По умолчанию jquery-mobile добавляет кнопку "Назад" на каждой странице после главной страницы. Я хочу знать, как я могу добавить кнопку дома?
Вот пример: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html
Примечание. Эта ссылка хороша только для firefox/chrome
Спасибо.
Не изменяя исходный код jquery-mobile.js, единственный способ, которым я могу это сделать, - добавить свои собственные ссылки навигации в заголовок. Когда вы добавите свою собственную ссылку, автоматическая кнопка "Назад" исчезнет, поэтому мы создадим 2 ссылки, одну для спины и одну для дома.
Вы заметите, что страницы 2 и 3 имеют кнопки возврата и домашнюю кнопку, и вы можете либо вернуться, либо перейти прямо к дому. Это требует, чтобы вы изменяли раздел "заголовок" для каждой страницы, но это не было большой сделкой, так как она всегда была одинаковой (копировать и вставлять) никаких изменений для каждого экземпляра.
Ссылка "home" будет находиться в верхнем правом углу (в соответствии со стандартным поведением второй ссылки, чтобы она была сверху справа).
Вот пример:
<!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>
Если вы хотите сделать это автоматически, вы также можете просто взломать js...
Сразу после этой части кода (вокруг строки 1084 неминифицированного 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 );
Добавьте строку, подобную этой, где # первая страница - это идентификатор вашей домашней страницы, я не смог найти способ ссылаться на домашнюю страницу, не назвав ее по имени, не стесняйтесь улучшать. Я не хотел do/или просто # не будет работать... но этот метод работает
$( "<a href='#firstpage' class='ui tn-right'>Home</a>" ).appendTo( $this );
Там есть более простое решение: просто добавьте ссылку на свой заголовок div с помощью class="ui-btn-right". Это необходимо, так что кнопка jQuery Mobile back может автоматически добавляться влево. Также есть несколько других атрибутов data- *, которые вы можете использовать, чтобы вы могли использовать встроенный значок темы и т.д., Как показано ниже:
<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">
...
(Очевидно, измените домашний URL href на что-то разумное для вашей среды, не просто используйте "/", потому что он ограничивает развертывание вашего приложения.)
<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>
Вы можете использовать rel=external в теге href. Это откроет домашнюю страницу без кнопки "Назад".
При первом использовании jqm для разработки приложения мне нужны как домашние, так и обратные кнопки в верхнем заголовке, потому что дерево навигации глубокое. Использование основных классов кнопок, таких как "ui-btn-right" или "ui-btn-left", отлично работает - ЕСЛИ вам нужна только одна кнопка с каждой стороны.
Но если вы похожи на меня и хотите две кнопки слева, вы можете использовать небольшой пользовательский CSS и позиционирование, чтобы получить его там, где хотите. Я также обернул кнопки в классе пользовательского заголовка, а также использовал CSS для управления заголовком в заголовке. Вам понадобится место каждой кнопки на другом z-index, иначе каждая кнопка будет конфликтовать с другой.
Это заголовок:
<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 -->
Это 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;
}
Надеюсь, это даст вам больше возможностей.