jQuery Mobile 网格

在列容器中,根据不同的列数,子元素可设置类 ui-block-a|b|c|d|e。这些列将依次并排浮动。

网格中的列是等宽的(总宽是 100%),无边框、背景、外边距或内边距。

例:

对于 ui-grid-a 类(两列布局),您必须规定两个子元素 ui-block-a 和 ui-block-b。

对于 ui-grid-b 类(三列布局),请添加三个子元素 ui-block-a、ui-block-b 和 ui-block-c。

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

  ui-block-a:是直接换行的第一个,而ui-block-b,ui-block-c是接到后面的。

时间: 2024-08-06 17:15:37

jQuery Mobile 网格的相关文章

jQuery Mobile仿360首页,jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页

随着移动互联网的兴起,越来越多的人使用手机上网.打开uc浏览器.我们能够看到uc的主页.或者360的主页.或者百度的主页. 这些页面都是html5做的.看起来非常难.事实上一点也不难.网上有非常多介绍html5的文章,我这里就不解释了.对于程序猿来说.看代码还是最实在的. 代码支持电脑和手机,pad等终端设备. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <h

jQuery Mobile学习笔记

1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者

jquery mobile 移动web(2)

button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon ="" 1.arrow-1左箭头 2.arrow-r 右箭头 3.arrow-u 上箭头 4.arrow-d 下箭头 5.delete 删除 6.plus 加号 7.minus 减号 8.check 对号 9.gear 齿轮 10.refresh 刷新 11.forward 前进 12.back 返

对于JQuery Mobile的介绍

jQuery Mobile 是一个为触控优化的框架,用于创建移动 web 应用程序.jQuery 适用于所有流行的智能手机和平板电脑:jQuery Mobile 构建于 jQuery 库之上,这使其更易学习.它使用 HTML5.CSS3.JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局.jQuery Mobile 将“写得更少.做得更多”这一理念提升到了新的层次:它会自动为网页设计交互的易用外观,并在所有移动设计上保持一致. jQuery Mobile 主题,jQuery

jQuery Mobile笔记

1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者

jQuery Mobile的布局插件和示例

[转自网络] 现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例,可以帮助你创建多视图或者分割视图布局的移动web页面,并会根据移动设备的方向和屏幕大小来动态调整所显示的内容. 1.  Three Column iPad Layout 三列分割视图布局效果,为手机和平板电脑上的移动网页布局提供了一个良好的平台. 源码/ 演示 2.  JQM Mul

使用 jQuery Mobile 和 CSS3 实现响应式设计

使用 jQuery Mobile 和 CSS3 实现响应式设计 创建可以适应每个用户的屏幕分辨率的 Web 页面布局 jQuery Mobile 框架就其本身而言就是一个优秀的解决方案,可以快速创建一个可访问的由 HTML5 标记驱动的移动网站.当与 CSS3 配合使用时,工作真的会变得很有趣,因为它使创建一个根据屏幕分辨率来响应用户设备的 Web 页面布局成为可能.本文展示了如何使用 jQuery Mobile 框架和 CSS3 媒体查询在您的 Web 页面中实现响应式设计. jQuery M

jQuery Mobile移动开发

1.在<head>元素中包含JavaScript文件是传统的方法.然而,根据Yahoo!"80%的最终用户响应时间在前端上"的说法,这些事件大部分花在资产的下载上,例如样式表,图片,脚本等.减少这些资产的数量明显很重要,在HTML文件的最后包含JavaScript也变得更加常见.这是因为脚本阻止并行下载,也就是说其他资产在每个脚本单独下载完之前无法下载.为了确保脚本放在正确的位置,在</html>结束标记之前包含它. 2.注意:创建自定义 data- 属性的唯一

[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布

[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,也许我们正在阿谀逢迎自己懒惰的天性. Written In The Font 为了app的手机端,我选择了 jQuery Mobile  ,学习中出一系列的博客吧.我喜欢的一句话 "Talk is Cheap Show me the CODE",所以过多的废话 jjyy 我不太会,我直接上代码上样式.想玩手机端的可以来看