Javascript jQuerymobile-积木和;iPad的拆分屏幕
我们正在使用基于HTML5的iPad应用程序图形界面框架。因为我们正在为iPad创建一个应用程序,所以我们基本上需要像iPad一样的典型分屏屏幕:左侧是一个窄侧边栏,右侧是主要内容: 现在我的问题是:我正在搜索创建这个分割屏幕的代码,但在jquerymobile文档中找不到与此相关的任何内容–我是错过了还是不理解?如果splitscreen的代码在此网站上不存在,我在哪里可以找到相关的代码 因为我没有找到任何与我需要的相关的东西,所以我尝试了另一种方法来获得这个拆分屏幕。所以我在css样式表中使用块: 解释:在jQuerymobile文档中,我发现了一个名为“内容格式>布局网格(列)”的类别() 所以我考虑创建两个块来制作分割的屏幕。但我不需要一个50/50的分割屏幕,而是更多的20/80或30/70。我试图将其更改为我的样式表:Javascript jQuerymobile-积木和;iPad的拆分屏幕,javascript,jquery,css,jquery-mobile,ipad,Javascript,Jquery,Css,Jquery Mobile,Ipad,我们正在使用基于HTML5的iPad应用程序图形界面框架。因为我们正在为iPad创建一个应用程序,所以我们基本上需要像iPad一样的典型分屏屏幕:左侧是一个窄侧边栏,右侧是主要内容: 现在我的问题是:我正在搜索创建这个分割屏幕的代码,但在jquerymobile文档中找不到与此相关的任何内容–我是错过了还是不理解?如果splitscreen的代码在此网站上不存在,我在哪里可以找到相关的代码 因为我没有找到任何与我需要的相关的东西,所以我尝试了另一种方法来获得这个拆分屏幕。所以我在css样式表中
.ui-grid-x { overflow: hidden; }
.ui-block-x, .ui-block-y { margin: 0; padding: 0; border: 0; float: left; min-height:1px;}
/* grid a: 20/80 */
.ui-grid-x .ui-block-x { width: 20%; }
.ui-grid-x .ui-block-y { width: 80%; }
.ui-grid-x .ui-block-x { clear: left; }
原文是:
.ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; }
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;}
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; }
.ui-grid-a .ui-block-a { clear: left; }
有人知道我做错了什么吗如何更改块的大小?这样做正确吗?
提前非常感谢。如果您在jQM演示页面上查看源代码,您可以看到他们添加了带有class=“content secondary”的div标记。这用于平板电脑布局上的侧栏。如果在屏幕比平板电脑小的移动设备上查看同一页面,它也会堆叠起来 HTML:
智能手机触摸优化网络框架&;平板电脑
测试版
欢迎。浏览jQuery移动组件,学习如何创建丰富、易访问、触控友好的网站和应用程序。
- 概述
- 组件
- API
&抄袭;2011年jQuery项目
使用JQuery Mobile的网格布局,只需覆盖“ui-block-a”和“ui-block-b”上的“宽度”,即可根据需要分割屏幕
有关示例演示页面,请查看此博客
<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>