网格布局

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 一的更多相关文章

  1. 【初探移动前端开发】jQuery Mobile 二

    本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好了. 虽然HTML5与CSS3提供了强大的界面实现方案 ...

  2. 【初探移动前端开发04】jQuery Mobile (中)

    前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...

  3. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  4. 【初探移动前端开发05】jQuery Mobile (整合版)

    前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...

  5. 【初探移动前端开发03】jQuery Mobile（上）

    前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...

  6. 【初探移动前端开发05】jQuery Mobile (下)

    前言 继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...

  7. 史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发

    书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战> ...

  8. wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件

    场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...

  9. 前端开发：JQuery（2）& Bootstrap

    JS事件流 事件的概念:HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件. 事件流: ...

随机推荐

  1. Moodle简介

    Moodle简介 一．概述 Moodle是Modular Object-Oriented Dynamic Learning Environment(模块化面向对象动态学习环境)的简称,中文译名为魔灯, ...

  2. beego入门小坑

    刚接触beego,按照官网的文档操作,始终发现在orm操作数据的时候提示表不存在,数据库连接设置都没问题 "0 Error 1146: Table 'beego.archives' does ...

  3. ZooKeeper分层次的法定人数(十二)

    分层次的法定人数的介绍 这个文档给出一个关于怎么使用分层次的法定人数的例子.基本思路是很简单的.首先,我们把服务端分组,然后每一组一行.下一步我们分配一个权重为每一个服务端. 下面的例子展示了怎么每组 ...

  4. UVA 580 Critical Mass

    https://vjudge.net/problem/UVA-580 题意:一堆U和L,用n个排成一排,问至少有3个U放在一起的方案数 f[i] 表示 至少有3个U放在一起的方案数 g[i] 表示没有 ...

  5. LightOJ 1226 - One Unit Machine Lucas/组合数取模

    题意:按要求完成n个任务,每个任务必须进行a[i]次才算完成,且按要求,第i个任务必须在大于i任务完成之前完成,问有多少种完成顺序的组合.(n<=1000 a[i] <= 1e6 mod ...

  6. 阿里云oss命令详解

    SYNOPSIS 上传,下载或拷贝Objects SYNTAX ossutil cp file_url cloud_url [-r] [-f] [-u] [--output-dir=odir] [-- ...

  7. 「6月雅礼集训 2017 Day8」gcd

    [题目大意] 定义times(a, b)表示用辗转相除计算a和b的最大公约数所需步骤. 那么有: 1. times(a, b) = times(b, a) 2. times(a, 0) = 0 3. ...

  8. 【BZOJ】1601: [Usaco2008 Oct]灌水

    [算法]最小生成树 [题解] 想到网络流,但是好像不能处理流量和费用的关系. 想到最短路,但好像不能处理重复选边的问题. 每条边只需要选一次,每个点就要遍历到,可以想到最小生成树. 建超级源向每个点连 ...

  9. 【洛谷 T47488】 D:希望 （点分治）

    题目链接 看到这种找树链的题目肯定是想到点分治的. 我码了一下午,\(debug\)一晚上,终于做到只有两个点TLE了. 我的是不完美做法 加上特判\(A\)了这题qwq 记录每个字母在母串中出现的所 ...

  10. 大聊Python----Select解析

    1.首先列一下,sellect.poll.epoll三者的区别 select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当sele ...