Najlepszy samouczek jQuery komórkowy Pasek W 2024 r. W tym samouczku możesz dowiedzieć się
głowa Bar,Przykłady,Przykłady,Przykłady,pasek Tail,Przykłady,Przykłady,Przykłady,Pozycjonowanie głowa i ogon Bar,pozycjonowania Inline (domyślnie),Poprawiono pozycjonowanie,Pełny ekran Lokalizacja,Więcej przykładów,
jQuery komórkowy Pasek
Elementy paska narzędzi zazwyczaj znajduje się w głowę i ogon - Make nawigację łatwy dostęp do:
głowa Bar
Kolumna głowy zazwyczaj zawiera stronę tytułową / logo lub jeden lub dwa przyciski (zazwyczaj na stronie głównej lub opcji Search).
Możesz dodać przyciski po lewej lub po prawej stronie głowy.
Poniższy kod doda przycisk po lewej stronie głowy tekstu tytułowego dodać przycisk po prawej stronie głowy tekście tytułowej:
Przykłady
<Div data-role = "header">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left"> główna </a>
<H1> Witam na mojej stronie domowej </ h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left"> wyszukiwania </a>
</ Div>
Spróbuj » Poniższy kod doda przycisk po lewej stronie głowy tekście tytułowej:
Przykłady
<Div data-role = "header">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left"> główna </a>
<H1> Witam na mojej stronie domowej </ h1>
</ Div>
Spróbuj » Jednakże, jeśli umieścić link przycisk jest umieszczony po <h1> Element nie będzie w stanie wyświetlić tekst po prawej stronie. Aby dodać przycisk po prawej stronie głowy tytule należy podać klasę jako "UI-btn-right":
Przykłady
<Div data-role = "header">
<H1> Witam na mojej stronie domowej </ h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left"> wyszukiwania </a>
</ Div>
Spróbuj » | Nagłówek może zawierać jeden lub dwa przyciski, ogon bez ograniczeń. |
---|
pasek Tail
Bardziej elastyczne niż tylnym pasku nagłówka kolumny - przez swoich stronach bardziej funkcjonalne i zmienność, może zawierać dowolną liczbę przycisków:
Przykłady
<Div data-role = "footer">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Instagram </a>
</ Div>
Spróbuj » Uwaga: ogon i głowa innego stylu (bez wyściółki i przestrzeni, a przycisk nie jest wyśrodkowany). Możemy wykorzystać prosty wzór, aby rozwiązać ten problem:
Przykłady
<Div data-role = "footer" style = "text-align: center;">
Spróbuj » Można również użyć przycisku w tylnych kombinacje poziomych lub pionowych:
Przykłady
<Div data-role = "footer" style = "text-align: center;">
<Div data-role = "controlgroup " data-type = "horizontal">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Instagram </a>
</ Div>
</ Div>
Spróbuj »
Pozycjonowanie głowa i ogon Bar
Głowa i ogon może być umieszczony na trzy sposoby:
- Inline - domyślna. Wielka wewnętrzna pasku nagłówka i tylna strona bar i treść.
- Stałe - pasek głowa i ogon pasek przymocowany do górnej i dolnej części strony.
- Fullscreen - tryb pozycjonowanie stałe jest w zasadzie to samo z baru głowa i ogon pasku przymocowanym do górnej i dolnej części strony. Ale kiedy był na ekranie podczas przewijania pasek nie będzie wyświetlany ponownie automatycznie, chyba dotknąć ekranu, który obraz lub kategorii film został podniesiony w sensie stosowania jest bardzo przydatna. Zauważ, że ten pasek narzędzi Tryb obejmie zawartości strony, dlatego najlepiej nadaje się na specjalne okazje.
Korzystanie z własności danych, aby zlokalizować położenie paska głowa i ogon bar:
pozycjonowania Inline (domyślnie)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div>
Spróbuj » Poprawiono pozycjonowanie
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div>
Spróbuj » Aby umożliwić pozycjonowanie na pełnym ekranie, użyj danych-position = "stałe" i dodać atrybut danych-fullscreen do elementu:
Pełny ekran Lokalizacja
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div>
Spróbuj » Wskazówka: Pełne kierowanie stosuje się do zdjęć, obrazów i filmów.
Wskazówka: pozycjonowanie stałe oraz ukierunkowanie na pełnym ekranie, klikając na ekranie wyświetli i ukryć głowicę kolumny i bar ogon.
Więcej przykładów
Na pasku narzędzi wyświetla tylko ikon
Na pasku wyświetlane są ikony tylko można użyć klasy ui-btn-icon-notext.