<!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. hust-1024-dance party(最大流--枚举,可行流判断)

    题意: 舞会上,男孩和女孩配对,求最大完全匹配个数,要求每个人最多与k个不喜欢的人配对,且每次都和不同的人配对. 分析: 将一个点拆成3个点. b,  b1, b2.   从1到n枚举ans,  判可 ...

  2. appendGrid

    appendGrid appendGrid的使用

  3. 【JavaScript】

    右键禁用.防止文字选中 .返回选中的文本 JavaScript 原理 Javascript高性能动画与页面渲染 前端不为人知的一面--前端冷知识集锦 屏幕外去计算值,position:absolute ...

  4. 高效算法——G - 贪心

    G - 贪心 Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Status Desc ...

  5. POJ 3280 Cheapest Palindrome(水题)

    题意:给定一个完全由小写字母组成的字符串s,对每个字母比如x(或a,b,c...z),在字符串中添加或者删除它分别需要花费c1['x']和c2['x']的代价,问将给定字符串变成回文串所需要的最少代价 ...

  6. loadView是干什么用的

    文/natewang(简书作者)原文链接:http://www.jianshu.com/p/f8d261d49615著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. viewContro ...

  7. 一个美国小券商的生存之道Tradestation

    转自:证券时报记者 张欣然 桂衍民 中国互联网金融的口号喊了十几年,众多证券公司仍然苦于找不到新的蓝海,研究大西洋彼岸的美国TradeStation公司的业务模式,也许对国内的证券公司会有一些启迪. ...

  8. 原生 JavaScript 代码和Jquery实现对比

    下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...

  9. 蓝牙(BLE)应用框架接口设计和应用开发——以TI CC2541为例

    本文从功能需求的角度分析一般蓝牙BLE单芯片的应用框架(SDK Framework)的接口设计过程,并以TI CC2541为例说明BLE的应用开发方法. 一.应用框架(Framework) 我们熟知的 ...

  10. Linux中date命令的各种实用方法--转载

    在linux环境中,不管是编程还是其他维护,时间是必不可少的,也经常会用到时间的运算,自己也曾经为时间的各种表示方法和如何修改时间而困惑,熟练运用date命令来表示自己想要表示的时间,肯定可以给自己的 ...