如果您在jQM演示页面上查看源代码,您可以看到他们已经添加了带有class =“content-secondary”的div标签。这用于平板电脑布局上的侧栏。如果您在移动设备上使用较小的屏幕和平板电脑查看同一页面,它也会堆叠。
HTML:
<div data-role="page" id="jqm-home" class="type-home"> <div data-role="content"> <div class="content-secondary"> <div id="jqm-homeheader"> <h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" /></h1> <p>A Touch-Optimized Web Framework for Smartphones & Tablets</p> <p id="jqm-version">Beta Release</p> </div> <p class="intro"><strong>Welcome.</strong> Browse the jQuery Mobile components and learn how to make rich, accessible, touch-friendly websites and apps.</p> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> <li data-role="list-divider">Overview</li> <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li> <li><a href="docs/about/features.html">Features</a></li> <li><a href="docs/about/accessibility.html">Accessibility</a></li> <li><a href="docs/about/platforms.html">Supported platforms</a></li> </ul> </div><!--/content-primary--> <div class="content-primary"> <nav> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Components</li> <li><a href="docs/pages/index.html">Pages & dialogs</a></li> <li><a href="docs/toolbars/index.html">Toolbars</a></li> <li><a href="docs/buttons/index.html">Buttons</a></li> <li><a href="docs/content/index.html">Content formatting</a></li> <li><a href="docs/forms/index.html">Form elements</a></li> <li><a href="docs/lists/index.html">List views</a></li> <li data-role="list-divider">API</li> <li><a href="docs/api/globalconfig.html">Configuring defaults</a></li> <li><a href="docs/api/events.html">Events</a></li> <li><a href="docs/api/methods.html">Methods & Utilities</a></li> <li><a href="docs/api/mediahelpers.html">Responsive Layout</a></li> <li><a href="docs/api/themes.html">Theme framework</a></li> </ul> </nav> </div> </div> <div data-role="footer" class="footer-docs" data-theme="c"> <p>© 2011 The jQuery Project</p> </div> </div>
使用JQuery Mobile的网格布局,只需覆盖“ui-block-a”和“ui-block-b”上的“width”,即可根据需要拆分屏幕。
用于示例演示页面结帐此博客 http://mdshannan1.blogspot.com/2011/08/jquery-mobile-split-screen-20-80-hack.html