在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. [转]iOS技巧之获取本机通讯录中的内容,解析通讯录源代码

    一.在工程中添加AddressBook.framework和AddressBookUI.framework 二.获取通讯录 1.在infterface中定义数组并在init方法中初始化 ? 1 2 3 ...

  2. Cocos2dx3.0过渡篇 各种遍历与范围for语句的使用【转】

    1.CCArray的遍历看到这里,有些人又按耐不住的要举起西瓜刀了:你不是说3.0beta后已经没有CCArray这货了吗?现在又拿出来作甚?其实我也很无辜,CCArray确实是没了,但在某个不为人知 ...

  3. android menu 开发

    menu 分类: 选项菜单(OptionsMenu) 上下文菜单(ContextMenu) 子菜单(SubMenu) 弹出菜单(Popup)   首先说 选项菜单(OptionsMenu) 一.方法介 ...

  4. Flex 列表控件中的操作

    主要操作包括:显示提示,使用图标,编辑列表条目中数据. 1.使用数据提示: 当鼠标停留在条目上时,可以显示该条目的相关数据提示. 当利用滚动条时,可以显示滚动条的相关提示. 在列表控件中使用showD ...

  5. java springMVC生成二维码

    Zxing是Google提供的工具,提供了二维码的生成与解析的方法,现在使用Java利用Zxing生成二维码 1),二维码的生成 将Zxing-core.jar 包加入到classpath下. 我的下 ...

  6. 学习总结 java线程

    package com.hanqi.xc; public class Test1 { public static void main(String[] args) { // 线程测试 for (int ...

  7. Java程序员面试宝典——重要习题整理

    1.下面程序的输出结果是() public class Test { public static void main(String[] args) { int j = 0 ; for(int i = ...

  8. 关于enum的那些事儿

    自从当年明月的<明朝的那些事儿>爆红之后,以***那些事儿命名的文章便层出不穷.个人认为,这样的命名通俗但具有吸引力,容易接地气.哈哈,所以我也写了几篇以<***那些事儿>的文 ...

  9. C++中的位运算总结

    1)位运算 位运算是指对转换成二进制的数字进行每一位上的0.1的运算,运算涉及到五种运算:与(&),或(|),异或(^),左移(<<),右移(>>). 如下表所示:   ...

  10. javacript 优化2

    上面一篇文章大致介绍了一些javascript当中使用的一些小技巧,当下这篇文章继续介绍一下内存管理.松散耦合.性能方面的一些小知识.为避免错误应该注意的点 内存管理 1.循环引用 如果循环引用中包含 ...