<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script>

 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script>

 <link rel="stylesheet" type="text/css" href="../jquery.mobile-1.4.5.min.css">

 </head>

 <body>

 <div class="ui-grid-c"><!-- 代表2列 -->

     <div class="ui-block-a"><!-- 代表第一列 -->

         <div class="ui-bar ui-bar-a">hello A</div>

     </div>

     <div class="ui-block-b"><!-- 代表第二列 -->

         <div class="ui-bar ui-bar-c">hello B</div>

     </div>

     <div class="ui-block-c"><!-- 代表第三列 -->

         <div class="ui-bar ui-bar-a">hello C</div>

     </div>

     <div class="ui-block-d"><!-- 代表第四列 -->

         <div class="ui-bar ui-bar-b">hello D</div>

     </div>

 </div>

 <!-- ui-bar-a代表列的样式 -->

 <!-- ui-grid-c代表展示总的列数 ,c为4列-->

 <!-- ui-block-a ui-block-b分别代表第一列和第二列，依次类推 -->

 <!-- 容器内承载其他内容 -->

 <!-- 同一列当中存在3个按钮 -->

 <div class="ui-grid-a">

     <div class="ui-block-a">

         <input type="button" data-theme="a" value="按钮">

         <input type="button" data-theme="b" value="按钮">

         <input type="button" data-theme="a" value="按钮">

     </div>

     <div class="ui-block-b">

         <input type="button" data-theme="a" value="按钮">

         <input type="button" data-theme="a" value="按钮">

         <input type="button" data-theme="a" value="按钮">

     </div>

 </div>

 <!-- 当前只放一列 -->

 <div class="ui-grid-solo"><!-- 变成一行显示内容 -->

     <div class="ui-block-a">

         <input type="button" data-theme="a" value="按钮">

     </div>

 </div>

 </body>

 </html>

显示内容

jquery mobile 栅格化的更多相关文章

  1. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  2. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...

  3. jquery mobile 问问多多

    jquery mobile  问题多多,兼容性太差.android4.1下完全崩溃.以后再也不用jquery mobile了

  4. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  5. jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统

      一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...

  6. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

  7. JQuery Mobile 页面参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

  8. jQuery Mobile学习笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

  9. Jquery Mobile开发以及Js对象动态绑定

    动态创建对象并绑定属性: var instantiate = function (Type, args) { var Constructor = function () { }; Constructo ...

随机推荐

  1. HDU 3829 Cat VS Dog（最大独立集）

    题目大意: 有n只猫,有m只狗.现在有P个学生去参观动物园.每个孩子有喜欢的动物和不喜欢的动物.假如他喜欢猫那么他就一定不喜欢狗(反之亦然). 如果一个孩子喜欢一个动物,那么这个动物不会被移除,若是不 ...

  2. 【字符串】【最小表示法】Vijos P1683 有根树的同构问题

    题目链接: https://vijos.org/p/1683 题目大意: 给M棵树,每棵N个点,N-1条边,树边有向,问哪些树同构. 题目思路: [字符串][最小表示法] 用()表示一个节点,那么三个 ...

  3. 大小中型数据库和Oracle的常用命令

    一:大小中型数据库 二:基本命令 连接命令 1.conn[ect] 用法:conn 用户名/密码@网络服务器名[as sysdba/sysoper]当用特权用户身份连接时,必须带上as sysdba或 ...

  4. Sqrt(x)——LeetCode

    Implement int sqrt(int x). Compute and return the square root of x. 题目大意:实现求一个int的根. 解题思路:二分. public ...

  5. bzoj 2245 [SDOI2011]工作安排（最小费用最大流）

    2245: [SDOI2011]工作安排 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 1197  Solved: 580[Submit][Statu ...

  6. prim模板题

    题目链接:http://acm.hrbeu.edu.cn/index.php?act=problem&id=1223 #include <cstdio> #include < ...

  7. Detect the Virus - ZOJ 3430（恶心的自动机）

    题目大意:给你一些病毒的特征码,然后再给一些文本,判断每个文本有多少种病毒,不过给的字符串都是加密处理过的,给的每个字符串都有对应一个64以内的一个数(题目里面那个表就是),然后可以把这个64以内的这 ...

  8. UITextField知多少

    //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, ...

  9. winform timespan 两个时间的间隔（差） 分类： WinForm 2014-04-15 10:14 419人阅读 评论(0) 收藏

    TimeSpan 结构  表示一个时间间隔. 先举一个小例子:(计算两个日期相差的天数) 代码如下: DateTime dt = DateTime.Now.ToShortDateString(yyyy ...

  10. today's learning of english 1

    1.curriculum    必修课 主修课 2.sought       seek的过去式 3.blessed with a wonderful marriage   有个幸福美满的婚姻 4.al ...