网格布局

jquery mobile提供一种多列布局功能，由于移动设备的屏幕大小原因，一般情况还是不要使用多列布局啦。

jquery mobile提供一种css样式规则来定义多列布局，对应css为ui-block，每列的样式是通过定义前缀+“-a”等方式对网格的列进行布局，a字母根据网格的列数而定。

例如两列布局CSS为：ui-block-a与ui-block-b

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

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

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

            <input type="button" value="确定" />

        </div>

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

            <input type="button" value="取消" />

        </div>

    </div>

</body>

</html>

我们看见了他这些都是使用float布局的。

两列布局，需要指定外层div样式是ui-grid-a，ui-grid-a样式用于指定行列采用两列布局样式。

以上两个按钮各占屏幕的50%，采用data-line属性对按钮进行水平排列，按钮宽度根据实际文本而定。

ui-grid-a 两列

ui-grid-b 三列

ui-grid-c 四列

ui-grid-d 五列

我们来看一个三列网格布局：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

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

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

            <input type="button" value="确定" />

        </div>

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

            <input type="button" value="取消" />

        </div>

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

            <input type="button" value="取消" />

        </div>

    </div>

</body>

</html>

折叠功能

折叠块是移动端经常用到的效果，只要使用jquery mobile约定的编码规则并且利用HTML5的dataset特性，程序就能生成折叠快了。

其中data-role设置为collapsible，便可以创建一个可折叠的内容区，来个例子吧：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

  <div data-role="collapsible">

    <h3>可折叠区域</h3>

    <p>刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗</p>

  </div>

</body>

</html>

我们手机上的form表单其实都很漂亮了，但是我们的jquery mobile还是给他渲染了下下，是非常不错的。

我们来一个例子看看：form表单

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <label for="name">

        姓名</label>

    <input type="text" name="name" id="name" />

    <label for="password">

        密码</label>

    <input type="password" name="password" id="password" />

    <label for="content">

        密码</label>

    <textarea name="content" id="content"></textarea>

    <label for="number">

        年龄</label>

    <input type="number" name="number" id="number" />

    <label for="tel">

        手机</label>

    <input type="tel" name="tel" id="tel" />

    <label for="tel">

        email</label>

    <input type="email" name="email" id="email" />

    <label for="tel">

        url</label>

    <input type="url" name="url" id="url" />

    <label for="search">

        搜索</label>

    <input type="search" name="search" id="search" />

</body>

</html>

我这里喷一下《HTML5移动Web开发指南》这本书！

唐骏开写的，这家伙写的这本书不行，书中很多例子有问题。

Toggle类型

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <div data-role="fieldcontain">

        <label for="slider">

            打开开关：</label>

        <select name="slider" id="slider" data-role="slider">

            <option value="off">关闭</option>

            <option value="on">开启</option>

        </select>

    </div>

</body>

</html>

单选按钮类型

我们要创建一组单选按钮需要这样做：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <fieldset data-role="controlgroup">

        <legend>请选择你的年龄范围：</legend>

        <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />

        <label for="radio1">

            不限</label>

        <input type="radio" name="radio1" id="radio2" value="16-22" />

        <label for="radio2">

            -22岁</label>

        <input type="radio" name="radio1" id="radio3" value="23-30" />

        <label for="radio3">

            -30岁</label>

        <input type="radio" name="radio1" id="radio4" value="31-40" />

        <label for="radio4">

            -40岁</label>

        <input type="radio" name="radio1" id="radio5" value="" />

        <label for="radio5">

            40岁以上</label>

    </fieldset>

</body>

</html>

我们看到，他还是挺好看的哈。。。

我们先是竖排，我们设置一个横排的单选按钮看看：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <fieldset data-role="controlgroup" data-type="horizontal">

        <legend>请选择你的年龄范围：</legend>

        <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />

        <label for="radio1">

            不限</label>

        <input type="radio" name="radio1" id="radio2" value="16-22" />

        <label for="radio2">

            -22岁</label>

        <input type="radio" name="radio1" id="radio3" value="23-30" />

        <label for="radio3">

            -30岁</label>

    </fieldset>

</body>

</html>

复选框

单选完了我们来看看复选框：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <fieldset data-role="controlgroup" data-type="horizontal">

        <legend>爱好：</legend>

        <input type="checkbox" name="radio1" id="radio1" value="any" checked="checked" />

        <label for="radio1">

            足球</label>

        <input type="checkbox" name="radio1" id="radio2" value="16-22" />

        <label for="radio2">

           篮球</label>

        <input type="checkbox" name="radio1" id="radio3" value="23-30" />

        <label for="radio3">

            编码（危险）</label>

    </fieldset>

</body>

</html>

下拉菜单

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <div data-role="controlgroup">

        <label class="select">

            请选择兴趣

            <select>

                <option>电影</option>

                <option>体育</option>

                <option>旅游</option>

            </select>

        </label>

        <label class="select">

            请选择兴趣（多选）

            <select>

                <optgroup label="一般类">

                    <option>电影</option>

                    <option>体育</option>

                    <option>旅游</option>

                </optgroup>

                <optgroup label="特殊类">

                    <option>C</option>

                    <option>C++</option>

                    <option>Java</option>

                </optgroup>

            </select>

        </label>

    </div>

</body>

</html>

我们这里做一点改变，样式会发生变化：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <div data-role="controlgroup">

      <label class="select">

            请选择兴趣

            <select data-native-menu="false">

                <option>电影</option>

                <option>体育</option>

                <option>旅游</option>

            </select>

        </label>

        <label class="select">

            请选择兴趣

            <select>

                <option>电影</option>

                <option>体育</option>

                <option>旅游</option>

            </select>

        </label>

        <label class="select">

            请选择兴趣（多选）

            <select>

                <optgroup label="一般类">

                    <option>电影</option>

                    <option>体育</option>

                    <option>旅游</option>

                </optgroup>

                <optgroup label="特殊类">

                    <option>C</option>

                    <option>C++</option>

                    <option>Java</option>

                </optgroup>

            </select>

        </label>

    </div>

</body>

</html>

今天篇幅够长了，我们下一篇再继续吧。

【初探移动前端开发04】jQuery Mobile 一的更多相关文章

【初探移动前端开发】jQuery Mobile 二
本文例子请使用手机查看 List列表在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好了. 虽然HTML5与CSS3提供了强大的界面实现方案 ...
【初探移动前端开发04】jQuery Mobile (中)
前言昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...
《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记二〇一九年二月十三日星期三2时28分54秒前提:本书适合有初步HTML.CSS.JavaScri ...
【初探移动前端开发05】jQuery Mobile (整合版)
前言为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...
【初探移动前端开发03】jQuery Mobile（上）
前言到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...
【初探移动前端开发05】jQuery Mobile (下)
前言继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...
史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发
书是人类进步的阶梯. ——高尔基习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战> ...
wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...
前端开发：JQuery（2）& Bootstrap
JS事件流事件的概念:HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件. 事件流: ...

随机推荐

【题解】ZJOI2009 假期的宿舍网络流最大流
好久没有来写博客啦,来水一发. 网络流建模首先很容易想到,如果一个人能睡一张床,那么在这个人和这张床之间连接一条容量为1的边从s向每个需要住宿的人连容量为1的边,表示这个人需要住宿从每张床向t连容量为 ...
arm开发板刷机方法
1.linux系统启动方式 bootloader->kernel->system 在嵌入式系统中内存为DRAM,inand flash 都不能直接启动需要被初始化.其中初始化程序在(boo ...
c# MD5盐值加密
using System; using System.Collections.Generic; using System.Linq; using System.Security.Cryptograph ...
[技巧篇]03.关于MyBatis的简单批量处理
[USACO06NOV] Roadblocks
https://www.luogu.org/problem/show?pid=2865 题目描述 Bessie has moved to a small farm and sometimes enjo ...
A题 hdu 1235 统计同成绩学生人数
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1235 统计同成绩学生人数 Time Limit: 2000/1000 MS (Java/Others) ...
hdu 1395 2^x mod n = 1（暴力题）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1395 2^x mod n = 1 Time Limit: 2000/1000 MS (Java/Oth ...
(Git 钩子)自定义你的工作流和引用日志
Git 钩子是在 Git 仓库中特定事件发生时自动运行的脚本.它可以让你自定义 Git 内部的行为,在开发周期中的关键点触发自定义的行为. Git 钩子最常见的使用场景包括推行提交规范,根据仓库状态改 ...
linux驱动基础系列--Linux mmc sd sdio驱动分析
前言主要是想对Linux mmc子系统(包含mmc sd sdio)驱动框架有一个整体的把控,因此会忽略某些细节,同时里面涉及到的一些驱动基础,比如平台驱动.块设备驱动.设备模型等也不进行详细说明原 ...
Pylot网站Web服务器性能和负载压力测试-适用Windows可绘制图表
为了能够准确地评估网站服务器对网络流量的承受能力,我们一般会采取模拟网站用户访问,通过不断地增加并发数,延长访问时长,从而最终得出网站Web服务器的性能和负载能力.当然也可以通过Web压力测试,来完善 ...

【初探移动前端开发04】jQuery Mobile 一