白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连续7-电话问卷调查
【例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所标注的内容会自己主动消失。
图7-4 简单的手机调查问卷 图7-5 在问卷中填入内容
在本范例中新用到的控件textarea，能够觉得是一种定义了多行文本的文本编辑控件。它能够依据当中的内容自己主动调整自身的高度，同一时候也能够通过拖拽的方式对其大小进行调整。
另外有读者或许会注意到在输入电话的编辑框中，笔者将空间的type属性设置为了tel。这样就会在用户输入当中内容时，自己主动将输入法切换到数字键盘，方便用户使用。
另外，jQueryMobile还提供了一些其他属性。表7-1他们一一列举出来，对于读者。
版权声明：本文博客原创文章，博客，未经同意，不得转载。
相关文章
- app自动化测试（Android）--App 控件定位
- App自动化测试|原生app元素定位方法
- vscode前端常用插件推荐，搭建JQuery、Vue等开发环境详解编程语言
- jquery停止动画详解编程语言
- vue main.js中app绑定的是index.html还是App.vue中详解编程语言
- 安卓APP配合MSSQL强势发力，创新移动应用体验（安卓app mssql）
- App无缝连接远程MySQL数据库（app连接远程mysql）
- APP构建MySQL数据库无缝连接（app连接mysql）
- APP连接MySQL，实现数据互联互通（app调用mysql）
- App注册MySQL一分钟构建安全的数据库（app 注册 mysql）
- App应用提交到MySQL中的实践与探索（app提交mysql）
- MySQL在App开发中的应用（app开发mysql）
- APP互联网化MySQL驱动开拓前沿（app和mysql的关系）
- App与MySQL搭建美好互联网空间（app与mysql）
- 如何下载MySQL用于游戏App（MYSQL下载游戏app）
- JQuery学习笔记选择器之三
- Jquery实战_读书笔记1—选择jQuery
- jquery学习之二属性(类)
- 基于jQuery实现的水平和垂直居中的div窗口
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- jquery选择器之基本过滤选择器详解
- 使用jQuery和PHP实现类似360功能开关效果
- jQuery提示效果代码分享