在jQuery Mobile的布局中，控件大多都是单独占据页面中的一行，按钮自然也不例外，但是仍然有一些方法能够让多个按钮组成一行，比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中，如图6-24和图6-25所示。

图6-24 实现按钮分组的方法

图6-25 分组的按钮

而在上一节中也许有读者已经注意到，头部栏中的按钮并没有占据一整行，也没有与多个按钮一起成组存在，那么在页面的其他部分是否也可以让按钮以这样的形式出现呢？

【范例6-9 简单的QWER键盘】

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jquery.mobile.min.css" />
    <script src="jquery-1.7.1.min.js"></script>
    <script src=“jquery.mobile.min.js”></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>简单的QWER键盘</h1>
            </div>
            <div data-role="content">
                <a href="#" data-role="button" data-inline="true">Tab</a>
                <!—此处省略若干按钮，请读者自行添加，用标签<br/>换行-->
                <a href="#" data-role="button" data-inline="true">;</a>
                <br/>
                <a href="#" data-role="button" data-inline="true">Shift</a>
                <!—此处省略若干按钮，请读者自行添加，用标签<br/>换行-->
                <a href="#" data-role="button" data-inline="true">/</a>
            </div>
            <div data-role="footer">
                <h1>排列的非常整齐</h1>
            </div>
        </div>
    </body>
    </html>

图6-26 利用jQuery Mobile实现的QWER键盘

观察代码可以发现，每个按钮都增加了一个新的属性data-inline="true"，它可以使按钮的宽度变得仅包含按钮中标题的内容，而不是占据整整一行，但是这样也会带来一个缺点，就是jQuery Mobile中的元素将不知道该在何处换行，于是就有了第19行处的“<br/>”。

另外就是在使用了该属性之后，按钮将不再适应屏幕的宽度，可以看到图6-26的右侧还有一定的空白，这是因为页面的宽度超出了按钮宽度的总和。而当页面宽度不足以包含按钮宽度时，则会出现如图6-27所示的混乱结果。

图6-27 键盘上的按钮因宽度不够而自动换行

这时候再看尾部栏中“排列的非常整齐”这几个字就非常有讽刺意味了，这是因为在使用了属性data-inline="true"之后，每个按钮已经将本身的宽度压缩到了最小，这时如果还要显示全部内容就只好自动换行来显示内容了。

提示：其实用jQuery Mobile中的分栏布局功能要比这种方式好得多，但是由于分栏布局只能产生规整的布局，所以在实际使用时还要根据实际情况来决定具体用哪种方案比较合适。

如果您喜欢这些例子，强烈推荐这本适合没有任何基础的人来学习的APP开发入门书《构建跨平台APP：jQuery Mobile移动应用实战》

低门槛

浅阅读

轻轻松松就能学会移动APP开发

不但能了解做什么（What）与怎么做（How）

更能清楚为什么要这么做（Why）

jquery Mobile应用第2课《构建跨平台APP：jQuery Mobile移动应用实战》连载二（简单的QWER键盘）的更多相关文章

  1. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）

    之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...

  2. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载四（使用程序载入事件）

    在了解了PhoneGap中都有哪些事件之后,本节将開始对这些事件的使用方法进行具体地介绍.本节要介绍的是程序载入事件,也就是deviceready.pause和resume这3个事件. [范例4-2 ...

  3. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载五（使用PhoneGap获取设备信息）

    除了能够将HTML页面打包成可以直接安装运行的APP外,PhoneGap的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息,从而实现一些原本只有依靠原生SDK才能够达到的目的 ...

  4. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载三（通过实例来体验生命周期）

    4.1.2  通过实例来亲身体验Activity的生命周期 上一小节介绍了Activity生命周期中的各个过程,本小节将以一个简单的实例来使读者亲身体验到Activity生命周期中的各个事件. 在Ec ...

  5. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载二（生命周期）

    4.1 什么是生命周期 想要真正地理解PhoneGap应用开发的内涵,首先需要理解什么是生命周期.这在字面上其实非常容易理解,一个应用从开始运行被手机加载到应用被退出之间的过程就称之为一个生命周期.为 ...

  6. jqueryMobile应用第一课《构建跨平台APP：jQuery Mobile移动应用实战》连载一（Hello World）

    有人说每个程序员都曾经有过改变世界的梦想,笔者认为,这与程序员年轻时编写的第一个程序有着莫大的关系.简简单单的一句“hello world”让年轻的心开始相信梦想,用一种低调的壮志凌云向世界展示自己的 ...

  7. 【原创】小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载五（给按钮加图标）

    在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...

  8. 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）

    作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...

  9. 白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》串行4（场景变化）

    作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...

随机推荐

  1. mysql 使用说明-2

    3.3.4 Retrieving Information from a Table Select 命令从表格中取回信息 SELECT what_to_select FROM which_table W ...

  2. Html5——WEB(客户端)数据存储

    在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...

  3. Redis数据持久化之AOF持久化

    一.RDB持久化的缺点创建RDB文件需要将服务器所有的数据库的数据都保存起来,这是一个非常耗费资源和时间的操作,所以服务器需要隔一段时间才能创建一个新的RDB文件,就也是说创建RDB文件的操作不能执行 ...

  4. linux包转发开发

    28号晚上接到这个任务的, 看了点epoll, 29号上午安装Ubuntu 12.10的G++, 开始把内网的vm虚拟机文件, 复制到外网, 重新建立一个虚拟机再更新, 最后外网也没能安装得了g++. ...

  5. Android设置透明、半透明等效果

    设置透明效果 大概有三种 1.用android系统的透明效果Java代码 android:background="@android:color/transparent"  例如 设 ...

  6. 从AlphaGo谈通用型人工智能设计

    最近赢了人机大战的AlphaGo火了,火得一塌糊涂,圈里圈外,是人都在谈AlphaGo.但是AlphaGo毕竟是为特定场景特定应用设计的特定型人工智能,和通用型人工智能还是有很大差别,离人工智能普及更 ...

  7. [ CodeVS冲杯之路 ] P1197

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1197/ 密钥的字母可以全转换为小写字母,然后一一映射,a→0,b→1,c→2,依此类推 对于密文只需将每一位减去对应密 ...

  8. git添加文件过滤

    操作流程 touch .gitignore vi .gitignore,添加需要过滤的文件或目录 git commit 出现问题 假如.gitignore里面添加file,而git库中已经存在file ...

  9. Flex 播放视频

    Flex提供视频控件(VideoDisplay Control)播放图像和声音. 视频控件只支持播放,暂停和停止功能.不提供倒退和前进功能.只支持播放FLV格式的影片. 1. 视频控件标签 对应的MX ...

  10. 【LeetCode】14. Longest Common Prefix 最长前缀子串

    题目: Write a function to find the longest common prefix string amongst an array of strings. 思路:求最长前缀子 ...