Jquery mobile - навигационная навигация по контенту на кнопке на портрете
https://stackoverflow.com/questions/8817068
-
27-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianРешение
Я создал образец мобильного приложения jQuery, который работает подобным образом - в режиме портрета будет показана макет разделителя. Я дал width Чтобы проверить как 500px.Если width>500 px , разделенный вид. Если width <500px, кнопка в заголовке.
Это исходный код:
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
function showNavList() {
$(".navdiv").toggle();
}
$(".page").live("pagebeforeshow", function() {
$(".navdiv").hide();
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>
.content-secondary{
margin: 0px !important;
padding:0px !important;
}
/*refer http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/* Smartphones (landscape) ----------- */
@media all and (min-width: 501px){/*For demo in desktop browsers,gave 501.Should be 321px.Refer above link*/
.headerNav{
display:none !important;
}
.content-secondary{
display: block;
}
.navdiv{
display:none !important;
}
}
/* Smartphones (portrait) ----------- */
@media all and (max-width: 500px){/*320px*/
.headerNav{
display:block !important;
}
.content-secondary{
display: none;
}
}
</style>
</head>
<body>
<div data-role="page" class="page" id="page1">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 1</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content1
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2" data-icon="false">Page 2</a>
</li>
<li>
<a href="#page3" data-icon="false">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page2">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false" class="ui-btn-active">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 2</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content2
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li class="ui-btn-active" data-icon="false" >
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page3">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false" class="ui-btn-active">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 3</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content3
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li class="ui-btn-active">
<a href="#page3">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Это не надежное приложение. Но просто грубая копия, чтобы проиллюстрировать, как эта функция может быть сделана. Есть еще много вещей, которые нужно сделать, чтобы эта работа была идеальной.
Чтобы он работал, я использовал концепцию media queriesИспользуя его, вы можете избирательно скрыть/показать макет в зависимости от ширины браузера (ориентация устройства).
Пса я использовал jqm-docs.css Для этого примера. У этого CSS есть другие медиа -запросы, которые слишком нацелены на другие ширины. Так что могут быть некоторые странные проблемы с макетом, когда вы тестируете этот код. Пожалуйста, изменяйте, что CSS для удаления нежелательных медиа -запросов.
Дайте мне знать, если это поможет
Не связан с StackOverflow
