<!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. 行为树（Behavior Tree）实践（1）– 基本概念

    原文地址:http://www.360doc.com/content/15/0107/11/15099545_438831036.shtml 自从开博以来,每天都会关心一下博客的访问情况,看到一些朋友 ...

  2. 配置Chrome启动参数支持本地AJAX请求，解决XMLHttpRequest cannot load file..,Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest':.. 问题

    直接将本地的HTML文件拖拽到Chrome浏览器中运行时,发送的AJAX请求本地文件,会报跨域错误: 报错的原因是:Chrome默认不支持本地的AJAX请求! 解决问题的办法是:给Chrome浏览器添 ...

  3. Binary Tree Preorder Traversal on LeetCode in Java

    二叉树的非递归前序遍历,大抵是很多人信手拈来.不屑一顾的题目罢.然而因为本人记性不好.基础太差的缘故,做这道题的时候居然自己琢磨出了一种解法,虽然谈不上创新,但简单一搜也未发现雷同,权且记录,希望于人 ...

  4. poj1023

    题目大意:有趣的数字系统 在一个k位的2的补码,,位的索引是从0到k-1位的,值是-2^(k-1),其他位置的i是2^i( (0 ≤ i < k-1) ),例如,3位的数字101是-2^2 + ...

  5. Swap[HDU2819]

    SwapTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission ...

  6. Http报文 状态码

    一.HTTP报文 1.HTTP报文介绍 HTTP报文:用于HTTP协议交互的信息. HTTP报文由报文头部和报文主体(非必须)构成,中间由空行来分隔. 1.1 请求报文:客户端发起的报文. 1).报文 ...

  7. Java菜鸟学习笔记--Exception篇(一):异常简介

    什么是异常(Exception)? 简述: 在运行过程中,应用程序可能遭遇各种严重程度不同的问题.异常提供了一种在不弄乱程序的情况下检查错误的巧妙方式.它也提供了一种直接报告错误的机制. 不同类型异常 ...

  8. Linux驱动开发学习的一些必要步骤

      1. 学会写简单的makefile 2. 编一应用程序,可以用makefile跑起来 3. 学会写驱动的makefile 4. 写一简单char驱动,makefile编译通过,可以insmod, ...

  9. Struts2 Spring hibernate 整合示例 .

    示例工具:MyEclipse 8.5.Tomcat 6.0.MySql 步骤: 1.创建一个WEB工程,命名为BookShop(名字自己取,此处为示例工程名): 2.导入struts2的核心jar包, ...

  10. scala中常用但其他语言不常见的符号含义

    本文旨在介绍Scala在其他语言中不太常见的符号含义,帮助理解Scala Code. 随着我对Scala学习的深入,我会不断增加该篇博文的内容. 修改记录 ----2016.11.23  新增scal ...