【例7-3  文本编辑框创建一个简单的调查问卷】

01     <!DOCTYPEhtml>

02     <html>

03     <head>

04     <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

05     <title>调查问卷</title>

06     <metaname="viewport" content="width=device-width,initial-scale=1">

07     <linkrel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"/>

08     <scriptsrc="http://code.jquery.com/jquery-1.7.1.min.js"></script>

09     <scriptsrc="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

10     </head>

11     <body>

12              <div data-role="page">

13                        <divdata-role="header">

14                                 <h1>调查问卷</h1>                              <!—先加上一个头部栏和标题—>

15                        </div>

16                        <divdata-role="content">

17                                 <formaction="#" method="post">

18                                          <!--placeholder属性的内容会在编辑框内以灰色显示-->

19                                          <inputtype="text" name="xingming" id="xingming"placeholder="请输入你的姓名："/>

20                                  <!--当data-clear-btn的值为true时，当该编辑框被选中-->

21                                          <!--能够单击右側的button将当中的内容清空-->

22                                          <inputtype="tel" name="dianhua" id="dianhua"data-clear-btn="true" placeholder="请输入你的电话号码：">

23                                                   <labelfor="adjust">请问您对本书有何看法？</label>

24                                                   <!—这里用到了textarea而不是input-->

25                                                    <textareaname="adjust" id="adjust"></textarea>

26                                                   <!—通过for属性与textarea进行绑定-->

27                                                   <labelfor="where">请问您是在哪里得到这本书的？</label>

28                                                   <!--使用label时要使用for属性指向其相应控件的id-->

29                                                    <textareaname="where" id="where"></textarea>

30                                                   <ahref="#" data-role="button">提交</a>

31                                 </form>

32                        </div>

33         </div>

34     </body>

35     </html>

执行结果如图7-4所看到的。

当在编辑框中输入内容时，页面会发生一定的变化。如页面上方输入姓名和电话的两个编辑框中的文字会自己主动消失。要求填写电话信息的编辑框右側会出现一个“删除”的图标，单击该图标，编辑框中的内容会被自己主动删除。

另外，页面下方两个编辑框的内容会随着当中内容的行数而自己主动添加高度。

在问卷中填入数据后的页面如图7-5所看到的。之所以会带来这些变化是因为。jQuery Mobile为文本编辑框设置了一些属性。如placeholder属性中的内容即是当编辑框未被使用时在当中显示的内容。

而当用户在编辑框中输入数据之后，placeholder所标注的内容会自己主动消失。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYm9va3poYW9waW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

图7-4 简单的手机调查问卷                                                                                             图7-5 在问卷中填入内容

在本范例中新用到的控件textarea，能够觉得是一种定义了多行文本的文本编辑控件。它能够依据当中的内容自己主动调整自身的高度，同一时候也能够通过拖拽的方式对其大小进行调整。

另外有读者或许会注意到在输入电话的编辑框中，笔者将空间的type属性设置为了tel。这样就会在用户输入当中内容时，自己主动将输入法切换到数字键盘，方便用户使用。

另外，jQueryMobile还提供了一些其他属性。表7-1他们一一列举出来，对于读者。

版权声明：本文博客原创文章，博客，未经同意，不得转载。

白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连续7-电话问卷调查的更多相关文章

  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. 白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》串行4（场景变化）

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

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

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

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

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

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

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

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

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

随机推荐

  1. poj1797（最短路小变形）

    题目连接:http://poj.org/problem?id=1797 题意: 分析:dp[i]表示到达i点的过程中的最大承受重量,更新到i点时可能有多条路径,由优先队列堆出最大的那条即可. #inc ...

  2. DIV+CSS 入门

    玩一小会儿前csdn什么时候,页面上的加qq而微博,我认为这是美好的.牛腩完成.运营商也开始了他真正的学习B/S之旅. 刚開始的时候,我不知道<div>是什么 也不清楚CSS用来干什么的, ...

  3. ZTESoft 持续集成 编年史 之 持续集成建设---自主研发（总括）

    最终选择了自主研发,考虑到我们团队对java以及flex知识的储备,展示层使用夸浏览器的flex开发,后端业务层使用java. 一.方案: BEC + ZCIPAgent + ZCIPServer + ...

  4. OpenCL 查看设备信息

    好久没搞OpenCL了.可是这是个好东西.不能不学,之前发了篇设置OpenCL的文章.看的人还真多,看来大家都知道这个好东西了,都想把OpenCL搞起.只是学习难度还是相当高的. 之前忙搞算法,所以非 ...

  5. ubuntu下使用自带的openJDK查看java源码

    如题 Ubuntu自带的OpenJDK仅仅有jre环境,不提供源代码,所以我们还是须要去下载. JDK6:http://download.java.net/openjdk/jdk6/ JDK7:htt ...

  6. SVN常见问题及解决方案

    . 隐藏文件.svn目录删除了怎么办 Checkout后,工作空间下.svn目录下有大量隐藏文件,占用比较大的空间,他们是工作空间的管理文件,不能删除,如果不小心删除了也不要抓狂,不会影响服务器端的, ...

  7. 去掉windows文件末尾的^M： %s/\r//g

    去掉windows文件末尾的^M: %s/\r//g

  8. 《JavaScript设计模式与开发实践》读书笔记之中介者模式

    1. 中介者模式 中介者模式的作用就是用来解除对象与对象之间的紧耦合关系,增加中介者后,所有相关对象都通过中介者来通信,而不再相互引用 1.1中介者模式的例子 以泡泡堂游戏为例,先定义一个玩家构造函数 ...

  9. sql小技巧 group by datetime类型字段，只取其中的日期部分

    工作中经常会遇到,要在sql中查询报表,查询结果要求按照日期来罗列, 或按照天, 或按照月,年. 这个时候我们经常会苦恼,datetime是精确到毫秒的,如果单纯的group by datetime就 ...

  10. pygame系列_游戏中的事件

    先看一下我做的demo: 当玩家按下键盘上的:上,下,左,右键的时候,后台会打印出玩家所按键的数字值,而图形会随之移动 这是客观上面存在的现象. 那么啥是事件呢? 你叫我做出定义,我不知道,我只能举个 ...