如何在jQuery Mobile网站中创建侧边栏? [英] How to create a sidebar in jQuery Mobile Websites?
问题描述
我想简单地在此处的jQuery Mobile演示文档.
我已阅读此问题，但对如何操作不太了解实施它.
I have read this question and didn't quite understand on how to implement it.
重点是，我正在使用jQuery Mobile在大屏幕(例如台式机，上网本，平板电脑等)上建立网站.对于移动网站，我将只使用没有侧边栏的网站.
The point is, I'm making a website using jQuery Mobile for big screens, like Desktops, Net Books, Tablets and more. For the mobile site, I will just use the site without the sidebar.
我也尝试过 SplitView (
I have also tried SplitView (code here) but its a bit buggy, I think because jQuery Mobile hates sidebars...
所以:
- 要么我想要一种解决方案，以实现一个简单的侧边栏，例如谢谢...:D
推荐答案
我创建了一个示例jQuery Mobile应用程序，该应用程序的工作方式如下-当屏幕较大时，将显示一个拆分视图布局.否则，可以进行导航通过标题中的按钮.为在桌面浏览器中进行说明，我将宽度设置为500px.如果width> 500 px，则拆分视图.如果宽度< 500px，则在标题中单击按钮
I have created a sample jQuery Mobile application which works like this - When screen size is large,a split view layout will be shown.Otherwise,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
这是源代码:
<!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>此处实时演示- http://pastehtml.com/view/bo99qejac.html
相关问题- jQuery Mobile-content导航在人像上的按钮上折叠
这篇关于如何在jQuery Mobile网站中创建侧边栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
