<!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. awk合并文件一例

    群里的朋友求助: $ cat file1a 1 2 3b 2 3 4c 3 4 5 $ cat file2d 你b 好c 吗 合并两个文件,需要实现: a 1 2 3b 2 3 4 好c 3 4 5 ...

  2. IIS7.0出错的解决方案 IIS 状态代码：IIS详细错误代码以及解释

    一.请求筛选模块被配置为拒绝包含双重转义序列的请求.HTTP 错误 404.11 - Not Found   1.单击 开始 . 在 开始搜索 框中, 键入 Notepad. 右击 记事本 , 然后单 ...

  3. QTP关于AOM的Javascript启动方式

    序 QTP的AOM模型想必大家都很熟悉了,平时常用的就是通过VBS脚本的方式编写启动程序(也是我现在用的方法).其实,还有很多其他的方式,如Java,C#,JS,这些语言都是通过调用QTObjectM ...

  4. ASP.NET网站发布－允许更新此预编译站点 打勾与不打勾的区别

    发布网站时在打开的对话框中,有一个选项是至关重要的,那就是“允许更新此预编译站点”: “允许更新此预编译站点”这一项,默认情况下,前面是打上一个√的,至于要不要打上一个√,是可选的,那么,打勾与不打勾 ...

  5. M - 昂贵的聘礼 - poj1062

    Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女儿嫁给他.探险家拿不出这么多金币,便请求酋长降低 ...

  6. Spring和Struct整合的三个方法

    1.使用Spring 的 ActionSupport .2.使用Spring 的 DelegatingRequestProcessor 类.3.全权委托. 无论用那种方法来整合第一步就是要为strut ...

  7. FindControl的使用方法

    Control.FindControl (String):在当前的命名容器中搜索带指定 id参数的服务器控件.(有点类似javascript中的getElementById(string)) 简单的例 ...

  8. 关于连不上dc服务器的机器强行退出域的方法

    有时加入域的计算机无法连接到之前的域了,只能强制退出域了,有两个前提条件:   1.断开网络,就是拔掉网线或者禁用网卡.   2.使用本地管理员登陆.   然后命令行执行如下命令即可:   netdo ...

  9. PHP学习之［第06讲］数组、多维数组和数组函数

    一.数组 ①Array(“aa”,12,true,2.2,”test”,50); ②Array(“title”=>“aa”,  ”age”=>20); 1.创建: $arr= array( ...

  10. Hadoop与HBase中遇到的问题

    1. Hadoop中遇到的问题 曾经所遇到的问题因为没有记录,所以忘了 (1)NameNode没有启动成功, 是因为你对HDFS多次格式化,导致datanode中与namenode中的VERSION文 ...