jQuery komórkowy Pasek

Poprzedni: jQuery komórkowy ikona przycisku

Dalej: jQuery komórkowy pasek nawigacyjny

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

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: