Firefox dodaje element do menu kontekstowego. Menu kontekstowe w Firefoksie

Niestandardowe menu kontekstowe jest rzadko używane w interfejsie strony internetowej. Przecież dla użytkownika wcale nie jest oczywiste, że na jakiś element musi kliknąć nie lewym, ale kliknij prawym przyciskiem myszy myszką i wybierz element z listy. Poza tym nie wszyscy odwiedzający strony internetowe lubią używać prawego przycisku myszy, a na smartfonach prawego przycisku w ogóle nie ma, a jedynie imitacja. Pomimo tych funkcji, HTML5 ma możliwość tworzenia własnych menu kontekstowych; jest to jak dotąd zaimplementowane tylko w Firefoksie i nawet wtedy w bardzo unikalny sposób.

Najpierw przyjrzyjmy się ogólnie, jak są tworzone różne menu. W tym celu używana jest kombinacja tagów i (przykład 1).

Przykład 1. Menu kontekstowe

HTML5 IE Cr na Fx

Menu kontekstowe

Atrybut kontekstmenu mówi nam, że nasze menu jest kontekstowe i jednocześnie wskazuje na tag o podanym identyfikatorze (w w tym przypadku edytować). Jak dotąd żadna przeglądarka nie rozumie powyższego przykładu, łącznie z Firefoxem. W tym celu zamiast tagu należy wstawić tag niestandardowy (przykład 2).

Przykład 2: Menu w Firefoksie

HTML5 IE Cr na Fx

Menu kontekstowe

Kod okazał się nieprawidłowy, ale po kliknięciu obrazu w przeglądarce Firefox pojawia się piękne menu(ryc. 1).

Ryż. 1. Menu kontekstowe

To menu nie działa jeszcze zgodnie z oczekiwaniami, więc przeprojektujmy je. Na początek dodajmy ikonę obok pozycji menu korzystając z atrybutu icon, dzięki czemu menu będzie wyglądać ładniej. Wartość jest względna lub absolutna ścieżka Do plik graficzny. Następnie musisz się upewnić, że po kliknięciu elementu menu nastąpi jakaś akcja. W tym celu użyjemy zdarzenia onclick i za jego pomocą wywołamy żądaną funkcję. Przykład 3 pokazuje utworzenie menu kontekstowego dla tekstu, jeśli wybierzesz w nim opcję „Edytuj”, tekst będzie można edytować. W rzeczywistości używane jest ukryte pole tekstowe, które staje się widoczne po wywołaniu funkcji edit(), natomiast sam tekst jest ukrywany podczas edycji. Po naciśnięciu Enter tekst z formularza zostaje wstawiony na swoje miejsce akapit tekstowy, tworząc wrażenie, że to my rządziliśmy. Po zakończeniu edycji formularz zostanie ponownie ukryty.

Przykład 3: Edycja tekstu

HTML5 IE Cr na Fx

Menu kontekstowe #edit ( szerokość: 200px; obramowanie: 1px pełna #ccc; wyświetlacz: brak; ) funkcja edit() ( document.getElementById("text").style.display = "none"; document.getElementById("edit" ).style.display = "blok"; document.getElementById("edit").value = document.getElementById("text").innerHTML; document.getElementById("edit").focus(); ) funkcja tekst() ( document.getElementById("text").innerHTML = document.getElementById("edit").value; document.getElementById("edit").style.display = "none"; document.getElementById("text").style .display = "blok"; )

Przykładowy tekst

Nowe menu pokazano na rys. 2.

Ryż. 2. Menu z ikoną

Jak widać na przykładzie, utworzenie menu kontekstowego nie różni się od tworzenia innych elementy interaktywne. Kiedy klikniemy element menu, nasza funkcja zostanie wywołana za pomocą modułu obsługi onclick, a następnie ta funkcja zrobi to, co chcemy. Firefox 8 była pierwszą przeglądarką obsługującą menu kontekstowe HTML5, ale zaskakujące jest dlaczego Twórcy Firefoksa Wprowadziliśmy własny, niestandardowy tag dla menu. Istnieje tutaj kilka możliwych scenariuszy:

tag zostanie dodany do specyfikacji HTML5;
ten tag stanie się przestarzały i nie będzie obsługiwany w przyszłości Wersje Firefoksa;

Pozostaje tylko poczekać na reakcję innych przeglądarek, w których ostatecznie zostanie zaimplementowany tag, a także różne oparte na nim menu.

Zainstalowałem program o nazwie Aptana Studio 3. Dodano element menu do mojego menu kontekstowego (kliknięcie prawym przyciskiem myszy powoduje wyświetlenie opcji „Aptana Studio”). Jak mogę usunąć to ręcznie z mojego menu?

Szukałem wszędzie i nie mogę znaleźć sposobu na usunięcie rzeczy Aptana z mojego Firefoksa. Może to dlatego, że korzystam z przeglądarki Firefox 4. To, co zrobiłem, to przejście na

O: konfiguracja

Następnie wyszukałem Aptanę i na liście są 3 pozycje. Załączam zrzut ekranu.

Teraz moje pytanie brzmi: jak usunąć te elementy, ponieważ prawdopodobnie usunie to opcję z mojego menu.

Zasadniczo po prostu przejdź do Narzędzia >

[!d4 ]

Biorąc pod uwagę, że to menu kontekstowe pojawia się w przeglądarce Firefox, wydaje się prawdopodobne, że zainstalowała się Aptana Rozszerzenie Firefoksa.

Opisuje proces usuwania.

Zasadniczo po prostu przejdź do Narzędzia > Dodatki w przeglądarce Firefox. Tam powinieneś znaleźć jakieś rozszerzenie związane z Aptaną - prawdopodobnie nazywa się to "debuggerem". Możesz wyłączyć lub usunąć rozszerzenie - wynik będzie taki sam.

Edycja: Aptana została dodana (automatycznie?) jako zewnętrzny edytor Firebug. Chociaż edycja about:config jest opcją, „poprawnym” sposobem edycji zewnętrznych edytorów jest okno „Konfiguracja edytora” Firebuga, które można znaleźć w menu kontekstowym jako zaawansowana opcja edytora lub poprzez główne menu Firebuga:

Biorąc pod uwagę, że to menu kontekstowe pojawia się w przeglądarce Firefox, wydaje się prawdopodobne, że Aptana zainstalowała rozszerzenie dla przeglądarki Firefox.

Opisuje proces usuwania.

Biorąc pod uwagę, że to menu kontekstowe pojawia się w przeglądarce Firefox, wydaje się prawdopodobne, że Aptana zainstalowała rozszerzenie dla przeglądarki Firefox.

Opisuje proces usuwania.

Biorąc pod uwagę, że to menu kontekstowe pojawia się w przeglądarce Firefox, wydaje się prawdopodobne, że Aptana zainstalowała rozszerzenie dla przeglądarki Firefox.

Opisuje proces usuwania.

Biorąc pod uwagę, że to menu kontekstowe pojawia się w przeglądarce Firefox, wydaje się prawdopodobne, że Aptana zainstalowała rozszerzenie dla przeglądarki Firefox.

Opisuje proces usuwania.

Biorąc pod uwagę, że to menu kontekstowe pojawia się w przeglądarce Firefox, najprawdopodobniej Aptana zainstalowała rozszerzenie dla przeglądarki Firefox.

1) przejdź do: konfiguracja

2) znajdź Aptanę [!d2 ]

Moje rozwiązania pozwalające usunąć element menu Aptana Studio z menu kontekstowego przeglądarki Firefox 4 to:

1) przejdź do: konfiguracja

2) znajdź Aptanę

3) na każdym z wpisów (powinny być 3) kliknij prawym przyciskiem myszy i wybierz reset

I interfejs Firefoksa Quantum nadal można go dostosowywać dzięki plikowi userChrome.css. Możesz edytować ten plik, aby ukryć niepotrzebne elementy menu, przenieść pasek kart poniżej paska nawigacji, wyświetlić wiele linii na pasku zakładek i wykonać inne rzeczy, które nie były możliwe.

Jak to działa

Plik userChrome.css to plik kaskadowego arkusza stylów (CSS), którego używa Firefox. Chociaż arkusze stylów są zwykle stosowane do stron internetowych, ten arkusz stylów ma również zastosowanie do interfejs użytkownika Firefoksa. Pozwala na zmianę wygląd oraz układ wszystkiego, co otacza stronę internetową. Nie możesz dodać żadnych funkcji; Możesz zmienić tylko to, co już istnieje (edytować, ukrywać lub przenosić).

To nie ma nic wspólnego GoogleChrome. „Chrome” oznacza interfejs użytkownika przeglądarki internetowej, od której wzięła się nazwa Google Chrome.

Plik userChrome.css jest dostępny w przeglądarce Firefox od dłuższego czasu, ale wraz z nim nabrał nowego znaczenia używając Firefoksa Kwant.

Wiele dostosowań, które można było wcześniej wprowadzić za pomocą dodatków do przeglądarki, można teraz wykonać jedynie poprzez edycję pliku userChrome.css.

Gdzie szukać ustawień

Chociaż możesz tworzyć własne ustawienia, jeśli rozumiesz kod CSS i sposób zaprojektowania interfejsu Firefoksa, możesz także po prostu znaleźć ustawienia w Internecie. Jeśli chcesz dokonać pewnych zmian, ktoś prawdopodobnie już wymyślił, jak to zrobić i napisał kod.

Oto kilka zasobów, które mogą Ci pomóc:

Poprawki z userChrome.org: ostateczna lista ciekawe ustawienia, które pokazują moc userChrome.css.
Klasyczne ulepszenia CSS: Repozytorium poprawek userChrome.css od autora rozszerzenia Classic Theme Restorer, które nie działa już w przeglądarce Firefox Quantum.
userChrome Tweaks: zbiór interesujących usprawnień Firefoksa.
FirefoxCSS na Reddicie: ten subreddit to społeczność służąca do omawiania ustawień. Możesz skorzystać z subreddita, aby znaleźć poprawki innych osób, zobaczyć, co inni udostępniają, a nawet poprosić o pomoc, jeśli nie możesz znaleźć poprawki, której szukasz.
Przewodnik po edytowaniu menu kontekstowego: Instrukcje usuwania elementów z menu kontekstowego przeglądarki Firefox i zmiany ich kolejności na liście, zaczerpnięte z CSS przeglądarki Firefox.

Należy pamiętać, że starsze wersje Firefoksa miały inny interfejs. Stare poprawki userChrome.css, które znajdziesz w Internecie, mogą nie działać w przeglądarce Firefox 57 i nowszych wersjach, znanej również jako Firefox Quantum.

Jeśli wiesz, co robisz z CSS, możesz włączyć pasek narzędzi przeglądarki, aby to sprawdzić Przeglądarka Firefox. Dzięki temu uzyskasz informacje potrzebne do konfiguracji różne elementy interfejs przeglądarki za pomocą własny kod CSS.

Jak utworzyć plik userChrome.css

Plik userChrome.css domyślnie nie istnieje, więc jeśli chcesz wypróbować jedną lub dwie poprawki, najpierw musisz utworzyć plik w odpowiedniej lokalizacji w folderze profilu Firefoksa.

Aby uruchomić folder Profil Firefoksa kliknij Menu > Pomoc > Informacje dotyczące rozwiązywania problemów w przeglądarce Firefox.

Kliknij przycisk Otwórz folder po prawej stronie folderu profilu, aby go otworzyć. ( Poniższe instrukcje pokaż proces w systemie Windows, ale w systemie Mac OS i Linux są prawie takie same: po prostu używasz innego menedżer plików I Edytor tekstu.)

Jeśli w wyświetlonym folderze profilu zobaczysz folder o nazwie „chrome”, kliknij go dwukrotnie. Prawdopodobnie jednak tego nie zrobisz, ponieważ ten folder nie został utworzony nowoczesne wersje Firefoksa.

Aby utworzyć folder, kliknij prawym przyciskiem myszy wolna przestrzeń i wybierz Nowy > Folder. Nazwij go „chrome”, naciśnij „Enter”, a następnie kliknij go dwukrotnie.

Będziesz musiał poinformować system Windows, aby wyświetlał rozszerzenia plików, jeśli jeszcze tego nie zrobiłeś. Aby ułatwić sobie pracę, system Windows domyślnie ukrywa rozszerzenia plików. Ten krok nie jest wymagany w przypadku systemów macOS lub Linux, w których te informacje są domyślnie wyświetlane.

W systemie Windows 8 lub 10 możesz po prostu kliknąć kartę Widok i zaznaczyć pole wyboru Rozszerzenia nazw plików, aby były widoczne. W systemie Windows 7 kliknij Organizuj > Opcje folderów i wyszukiwania, przejdź do karty Widok i odznacz Ukryj rozszerzenia dla znane typy akta".

Teraz utwórz plik userChrome.css, który tak naprawdę jest po prostu pusty plik tekstowy z rozszerzeniem .css zamiast .txt.

Aby to zrobić, kliknij prawym przyciskiem myszy puste miejsce i wybierz Nowy > Dokument tekstowy" Nazwij go „userChrome.css”, usuwając rozszerzenie .txt.

System Windows wyświetli ostrzeżenie, że zmieniasz rozszerzenie pliku, co może stanowić problem w przypadku niektórych typów plików. Kliknij Tak, aby potwierdzić zmiany.

W systemie MacOS lub Linux utwórz pusty plik tekstowy o tej samej nazwie.

Jak edytować plik userChrome.css

Do edycji pliku userChrome.css możesz użyć dowolnego edytora tekstu. Edytor tekstu Notatnik dołączony do systemu Windows działa świetnie. Jeśli potrzebujesz wydajniejszego edytora tekstu z duża ilość funkcje, a następnie wypróbuj Notepad++.

Aby edytować plik w Notatniku, kliknij plik prawym przyciskiem myszy i wybierz Edytuj.

Dodaj wszystkie ustawienia, które chcesz zachować, kopiując je i wklejając. Jeśli dodajesz wiele ustawień, pamiętaj o dodaniu ich wszystkich w osobnych wierszach.

Gdy skończysz, zapisz plik, klikając Plik > Zapisz w Notatniku.
Za każdym razem, gdy edytujesz plik userChrome.css, będziesz musiał wszystko zamknąć Otwórz okna Firefox i uruchom ponownie przeglądarkę Firefox, aby zmiany odniosły skutek.

Jeśli często powracasz do folderu „chrome”, aby edytować plik userChrome.css, może być konieczne utworzenie skrótu na pulpicie dla tego folderu lub dodanie go do „ Szybki dostęp» w Eksploratorze.

plik userContent.css

Firefox ma również plik userContent.css, który możesz edytować i możesz natknąć się na pewne ustawienia, które mówią, że dotyczą pliku userContent.css.

Aby użyć tego pliku, po prostu utwórz plik o nazwie „userContent.css” w swoim folderze Chrome. Zmiany umieszczone w tym pliku wpływają na wewnętrzne „strony z zawartością” przeglądarki Firefox, takie jak „ Nowa wstawka" i "Opcje".

Jeśli coś jest zepsute

Jeśli napotkasz problem z ustawieniem, możesz po prostu usunąć je z pliku userChrome.css i ponownie uruchomić przeglądarkę Firefox. Jeśli to nie zadziała, możesz całkowicie usunąć plik userChrome.css i ponownie uruchomić przeglądarkę, aby usunąć wszystkie zmiany i uzyskać nowy interfejs Firefoksa.

Jedna z najbardziej znaczących zmian w interfejsie niedawno wydanej stajni Wersje Mozilli Firefox 32 stał się modyfikacją menu kontekstowego. Polega ona na tym, że niektóre elementy tekstowe menu zostały zastąpione szkicami graficznymi znajdującymi się w jego górnej części. W szczególności wymianie uległy opcje poruszania się pomiędzy stronami, a także możliwości aktualizacji i dodawania strony do zakładek przeglądarki.

Ogólnie zmianę można uznać za całkiem przydatną. Po pierwsze rozwiązanie pozwoliło skrócić długość menu kontekstowego, do którego użytkownik prawdopodobnie doda opcje dodatków firm trzecich, a po drugie samo menu stało się bardziej estetyczne z estetycznego punktu widzenia. Jednak wśród użytkowników Firefoksa znajdą się tacy, dla których zaktualizowane menu nie będzie zbyt atrakcyjne. Niektórzy uznają to za niezwykłe, niektórzy uznają to za niewygodne, a znajdą się tacy, którzy będą argumentować, że menu graficzne ładują się wolniej niż menu tekstowe.

Oczywiście zarówno twórcy Firefoksa, jak i twórcy dodatków innych firm przewidzieli takie scenariusze i dlatego dali użytkownikom możliwość wyboru, z którego menu skorzystać, starego czy nowego. Jednym słowem, jeśli nie podoba Ci się zaktualizowane menu, możesz łatwo przywrócić mu poprzedni wygląd na jeden z dwóch sposobów.

Klasyczny przywracacz motywów

Przywrócić Projekt Firefoksa możesz użyć dobrze znanego dodatku o nazwie Classic Theme Restorer. Po zainstalowaniu dodatku musisz przejść do jego ustawień, w sekcji „Główny interfejs” znaleźć opcję „Na stronie, w menu kontekstowym zamień ikony na etykiety” i aktywować ją.

Ikony w menu kontekstowym znikną, a samo menu stanie się o rząd wielkości dłuższe. Ponadto podczas instalowania programu Classic Theme Restorer karty znajdujące się w najnowsze wersje Firefox miał zaokrąglony wygląd, znów stanie się wąski i ściśle prostokątny.

Niestety ta metoda nie przyniesie pożądanego rezultatu, jeśli do zaprojektowania interfejsu Firefoksa użyjesz „pełnego” motywu. Chociaż nie oznacza to, że ze względu na ten sam wygląd menu będziesz musiał poświęcić piękno. Podczas korzystania ze zwykłych motywów nie powstają żadne „konflikty”.

Kreator menu

Druga metoda jest równie prosta jak pierwsza, tyle że tym razem zamiast Theme Restorer skorzystamy z dodatku Menu Wizard. Po zainstalowaniu dodatku przejdź do jego ustawień, otwórz listę „Główne menu kontekstowe” i odznacz następujące pozycje:

powrót do kontekstu
kontekst-przesyłanie do przodu
przeładowanie kontekstu
zatrzymanie kontekstu

Dodatek Kreator menu współpracuje z dowolnym motywem, a także umożliwia szybkie ukrywanie i wyświetlanie miniatur z poziomu samego menu kontekstowego. Jednak Kreator menu ma jedną wadę. Ikony menu nie mogą być tekstowe, tak jak w przypadku korzystania z narzędzia Theme Restorer, można je jedynie ukryć.