Domyślnie jquery-mobile dodaje przycisk Wstecz na każdej stronie po stronie głównej. Chciałbym wiedzieć, w jaki sposób mogę dodać przycisk Home?
Oto przykład: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.htmlJak dodać przycisk home za pomocą jquery-mobile?
Uwaga: Ten link jest tylko dobre dla Firefox/Chrome
dzięki.
Bez modyfikacji kodu źródłowego jquery-mobile.js, jedynym sposobem, w jaki mogę to zrobić, jest dodanie własnych linków nawigacyjnych do nagłówka. Po dodaniu własnego linku automatycznie zniknie przycisk "Wróć", więc utworzymy 2 linki, jedno do tyłu, a drugie do domu.
Zauważysz, że strona 2 i 3 mają przyciski powrotu i przycisk strony głównej, a Ty możesz wrócić lub przejść bezpośrednio do domu. Wymaga to zmodyfikowania sekcji "nagłówka" dla każdej strony, ale nie jest to zbyt duża oferta, ponieważ zawsze jest taka sama (kopiowanie i wklejanie) bez konieczności modyfikacji na instancję.
Łącze "domowe" będzie znajdować się w prawym górnym rogu (zgodnie z domyślnym zachowaniem drugiego linku, aby umieścić go w prawym górnym rogu).
Oto przykład:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="firstpage">
<div data-role="header">
<h1>First Page</h1>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#secondpage">second page</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="secondpage">
<div data-role="header">
<a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
<p><a href="#thirdpage">Go to third page</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="thirdpage">
<div data-role="header">
<a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page. (this is thirdpage)</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Jeśli chcesz, aby to zrobić automatycznie, można też po prostu włamać js ...
Zaraz po tym kawałku kodu (wokół linii 1084 niewykonania minified jquery.mobile-1.0a2.js)
$("<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>")
.click(function() {
history.back();
return false;
})
.prependTo($this);
Dodaj linię tak, gdzie #firstp age jest identyfikatorem twojej strony głównej, nie mogłem znaleźć sposobu na odniesienie się do strony głównej bez wywoływania jej po imieniu, nie krępuj się poprawić ... Nie chciałem zrobić/lub tylko # nie zadziała. . ale ta metoda działa
$("<a href='#firstpage' class='ui tn-right'>Home</a>").appendTo($this);
Dzięki stosom, tego właśnie szukałem. –
jest prostsze rozwiązanie: wystarczy dodać link do nagłówka div z class="ui-btn-right". Jest to niezbędne, aby przycisk wstecz jQuery Mobile mógł być automatycznie dodawany po lewej stronie. Jest też kilka innych data- * atrybuty, które można wykorzystać, dzięki czemu można korzystać z wbudowanego w ikonę rozrywki itp, jak pokazano:
<div data-role="page">
<div data-role="header">
<h1>Title</h1>
<a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
</div>
<div data-role="content">
...
(oczywiście zmienić adres domowy href coś sensownego dla środowiska, Don „t wystarczy użyć«/», ponieważ ogranicza gdzie aplikacja może zostać wdrożony.)
jeśli ustawisz 'href' na taki sam URL jak adres domowy, działa idealnie –
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="Main.html" data-role="button" rel=external><img src="/MobileTest/images/Home.png" /> </a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/MyShare.png" /></a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/SharedWithMe.png" /></a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/settings.png" /></a>
</div>
</div>
można użyć rel=external w was href tag. Spowoduje to otwarcie strony głównej bez przycisku wstecz.
Kiedy po raz pierwszy użyłem jqm do opracowania aplikacji, chciałem, aby zarówno górny, jak i domowy przycisk znajdował się w górnym nagłówku, ponieważ drzewo nawigacji jest głębokie. Korzystanie z podstawowych klas przycisków, takich jak "ui-btn-right" lub "ui-btn-left" działa świetnie - JEŻELI potrzebujesz tylko jednego przycisku z każdej strony.
Ale jeśli jesteś podobny do mnie i chcesz dwa przyciski po lewej stronie, możesz użyć trochę niestandardowego CSS i pozycjonowania, aby uzyskać go tam, gdzie chcesz. Zapakowałem również przyciski w klasie nagłówków niestandardowych, a także za pomocą CSS, aby kontrolować tytuł w nagłówku. Będziesz potrzebował umieścić każdy przycisk na innym indeksie Z, w przeciwnym razie każdy przycisk będzie w konflikcie z drugim.
To jest nagłówek:
<div id="home-btn" class="header-btn-left-pos1">
<a href="config.html" data-role="button" data-icon="home" data-rel="home">Home</a>
</div><!-- /home-btn -->
<div id="back-btn" class="header-btn-left-pos2">
<a href="#" data-role="button" data-icon="back" data-rel="back">Back</a>
</div><!-- /back-btn -->
<div class="header-title" align="center">
<h4>Business Locations</h4>
</div><!-- /header-title -->
</div><!-- /custom header -->
To CSS:
.custom-header
{
height:18px;
}
.header-title
{
position:relative;
top:-10px;
}
.header-btn-left-pos1
{
position:absolute;
left:25px;
top:5px;
z-index:1;
}
.header-btn-left-pos2
{
position:absolute;
left:105px;
top:5px;
z-index:2;
}
Nadzieja ta daje więcej możliwości.
Twoje łącze wskazuje na 1.0alpha1. Tylko dlatego, że wiesz - najnowsze wydanie to alpha3 i jeśli korzystasz z jakiegokolwiek odniesienia lub samouczków - te dla alpha1 są niekompatybilne. – naugtur