JQuery mobile - content navigation collapse on a button on portrait
https://stackoverflow.com/questions/8817068
-
27-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianSolution
I have created a sample jQuery Mobile application which works like this - When in portrait mode,a split view layout will be shown.When in landscape mode,navigation can be done via a button in the header.For illustrating this in a desktop browser,I have given the width to check as 500px.If width>500 px ,split view. If width <500px, button in header.
This is the source code:
<!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>
This is not a foolproof application.But just a rough copy to illustrate how this feature can be done.There are still lot of things to be done to make this work perfectly.
To make it work I have used the concept of media queries.Using it you can selectively hide/show the layout depending on the browser width(orientation of device).
P.S. I have used jqm-docs.css for this example.This css has other media queries too targeting other widths.So there might be some weird layout issues when you test this code.Please modify that css to remove the unwanted media queries.
Let me know if it helps
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
