jquerymobile-7 表单基础 radio buttons和checkboxes select menu 搜索框、滑动按钮(Slider)、开关(Flip toggle switch)

最新推荐文章于 2021-12-06 17:57:37 发布
最新推荐文章于 2021-12-06 17:57:37 发布
阅读量2.4k 收藏
点赞数
分类专栏： 手持html5phone Gap JQuery moblie 文章标签： html5 jquery mobile 移动浏览器 html5技术 android

在开发的过程中，经常会用到表单进行交互，所以是比较重要的。今天就开始一点有点介绍吧。

对于我发表的文章，都是比较肤浅的，属于入门性的东西，如果你看着感觉在浪费时间，那么请不要拍砖，你去官网上看就可以了。

在开发的过程中，我们经常会用到的就是登录，开始就先写一个页面介绍一下基础：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Form Example 1</title>  
  5. <meta name="viewport" content="width=device-width, initial-scale=1">  
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />  
  7. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  8. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  
  9. </head>  
  10.   
  11. <body>  
  12.   
  13. <div data-role="page">  
  14.   
  15.     <div data-role="header">  
  16.         <h1>Form Demo</h1>  
  17.     </div>  
  18.       
  19.     <div data-role="content">  
  20.           
  21.         <form action="echo.cfm" method="post">  
  22.               
  23.         <div data-role="fieldcontain">  
  24.             <label for="name">Name:</label>  
  25.             <input type="text" name="name" id="name" value=""  />  
  26.         </div>      
  27.   
  28.         <div data-role="fieldcontain">  
  29.             <label for="email">Email:</label>  
  30.             <input type="text" name="email" id="email" value=""  />  
  31.         </div>      
  32.   
  33.         <div data-role="fieldcontain">  
  34.             <input type="submit" name="submit" value="登录"  />  
  35.         </div>      
  36.           
  37.         </form>  
  38.   
  39.     </div>  
  40.   
  41. </div>  
  42.   
  43. </body>  
  44. </html>  

这段代码显示如下：


在上面的代码中我们使用到了data-role="fieldcontain"，这个是为了使被其包围的代码看起来更像一个整体，结果就是在被包围的下面添加了一条横线。其他的作用我也没有发现。

虽然上面的显示效果很好，但是还是有点问题的。如果我们将浏览器的拉宽，那么会有如下的效果：


这样就有点偏了，看了一下原因是因为CSS中.ui-field-contain .ui-btn .ui-submit设置了width为78%。 解决他我们只要把按钮包围的data-role="fieldcontain"的div去掉就可以了。可能这个在手机上不会发生，因为手机屏幕就那么大，但是还是了解一下比较好。

在平时的开发中难免会用到单选和复选按钮，所以简单的介绍一下这两个，首先看一段代码：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Form Example 3</title>  
  5. <meta name="viewport" content="width=device-width, initial-scale=1">  
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />  
  7. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  8. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  
  9. </head>  
  10.   
  11. <body>  
  12.   
  13. <div data-role="page">  
  14.   
  15.     <div data-role="header">  
  16.         <h1>Form Demo</h1>  
  17.     </div>  
  18.       
  19.     <div data-role="content">  
  20.           
  21.         <form action="echo.cfm" method="post">  
  22.               
  23.         <div data-role="fieldcontain">  
  24.             <fieldset data-role="controlgroup">  
  25.                 <legend>性别：</legend>  
  26.   
  27.                 <input type="radio" name="sex" id="nan" value="男">  
  28.                 <label for="nan">男</label>   
  29.   
  30.                 <input type="radio" name="sex" id="nv" value="女">  
  31.                 <label for="nv">女</label>   
  32.   
  33.             </fieldset>  
  34.         </div>  
  35.   
  36.         <div data-role="fieldcontain">  
  37.             <fieldset data-role="controlgroup">  
  38.                 <legend>喜欢的颜色:</legend>  
  39.   
  40.                 <input type="checkbox" name="favoritecolor" id="favoritecolor1" value="Green">  
  41.                 <label for="favoritecolor1">绿色</label>   
  42.   
  43.                 <input type="checkbox" name="favoritecolor" id="favoritecolor2" value="Red">  
  44.                 <label for="favoritecolor2">红色</label>   
  45.   
  46.                 <input type="checkbox" name="favoritecolor" id="favoritecolor3" value="Yellow">  
  47.                 <label for="favoritecolor3">黄色</label>   
  48.   
  49.             </fieldset>  
  50.         </div>  
  51.   
  52.             <input type="submit" name="submit" value="Send"  />  
  53.         </div>      
  54.           
  55.         </form>  
  56.   
  57.     </div>  
  58.   
  59. </div>  
  60.   
  61. </body>  
  62. </html>  

运行的效果如下：



解释一下代码中的一些东西：data-role="fieldcontain"是为了将内容进行分块，主要的功能就是在每个区域后面加上一条横线，便于区分区域。例如途中“女”字下面的那条线。data-role="controlgroup"是为了使其所包围的内容更加的紧凑更像一个整体。读者可以将代码中的对应的东西删去看一下效果。

最后将代码中的<fieldset data-role="controlgroup">修改为<fieldset data-role="controlgroup" data-type="horizontal">，可以实现按钮的横向排列。

简单介绍一下select menu，对于一个做网页开发的人来说，这个应该就是最简单的了，所以我也不多说了，为了保证我自己以后需要的时候方便查找，我还是简单的写一下，将来方便.

代码如下：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Form Example 6</title>  
  5. <meta name="viewport" content="width=device-width, initial-scale=1">  
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />  
  7. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  8. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  
  9. </head>  
  10. <body>  
  11. <div data-role="page">  
  12.     <div data-role="header">  
  13.         <h1>Form Demo</h1>  
  14.     </div>  
  15.     <div data-role="content">  
  16.         <form action="echo.cfm" method="post">  
  17.         <div data-role="fieldcontain">  
  18.             <fieldset data-role="controlgroup">  
  19.                 <legend>Trip Setup:</legend>  
  20.                 <label for="location">Location</label>  
  21.                 <select name="location" id="location">  
  22.                     <option value="Home">Home</option>  
  23.                     <option value="Work">Work</option>  
  24.                     <option value="Moon">Moon</option>  
  25.                     <option value="Airport">Airport</option>  
  26.                 </select>  
  27.                 <label for="time">Time</label>  
  28.                 <select name="time" id="time">  
  29.                     <option value="Morning">Morning</option>  
  30.                     <option value="Afternoon">Afternoon</option>  
  31.                     <option value="Evening">Evening</option>  
  32.                 </select>  
  33.                 <label for="time">Meal</label>  
  34.                 <select name="meal" id="meal">  
  35.                     <option value="Meat">Meat</option>  
  36.                     <option value="Vegan">Vegan</option>  
  37.                     <option value="Kosher">Kosher</option>  
  38.                 </select>  
  39.             </fieldset>  
  40.         </div>  
  41.         <div data-role="fieldcontain">  
  42.             <input type="submit" name="submit" value="Send"  />  
  43.         </div>      
  44.         </form>  
  45.     </div>  
  46. </div>  
  47. </body>  
  48. </html>  

效果如下：


在点击的时候，默认是调用手机上的原生的显示方式，因为没有在手机上测试，所以就不截图了。

最后将代码中的<fieldset data-role="controlgroup">修改为<fieldset data-role="controlgroup" data-type="horizontal">，可以实现select按钮的横向排列。


今天介绍一下搜索框、滑动按钮(Slider)、开关(Flip toggle switch)，我写的东西都是比较简单的，所以还需要读者认真的去研究官方的API。

首先给一个搜索框的代码：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Form Example 8</title>  
  5. <meta name="viewport" content="width=device-width, initial-scale=1">  
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />  
  7. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  8. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  
  9. </head>  
  10. <body>  
  11. <div data-role="page">  
  12.     <div data-role="header">  
  13.         <h1>Form Demo</h1>  
  14.     </div>  
  15.     <div data-role="content">  
  16.         <form action="echo.cfm" method="post">  
  17.         <div data-role="fieldcontain">  
  18.             <label for="name">姓名:</label>  
  19.             <input type="search" name="name" id="name" value=""  />  
  20.         </div>      
  21.         <div data-role="fieldcontain">  
  22.             <input type="submit" name="submit" value="搜索"  />  
  23.         </div>      
  24.         </form>  
  25.     </div>  
  26. </div>  
  27. </body>  
  28. </html>  

效果如下：


搜索框中默认为空，也没有后面的×号。当我们输入内容的时候会自动出现。


然后看一段滑动按钮(Slider)的代码：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Form Example 10</title>  
  5. <meta name="viewport" content="width=device-width, initial-scale=1">  
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />  
  7. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  8. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  
  9. </head>  
  10. <body>  
  11. <div data-role="page">  
  12.     <div data-role="header">  
  13.         <h1>Form Demo</h1>  
  14.     </div>  
  15.     <div data-role="content">  
  16.         <form action="echo.cfm" method="post">  
  17.         <div data-role="fieldcontain">  
  18.             <label for="coolness">音量:</label>  
  19.             <input type="range" name="coolness" id="coolness" min="0" max="100" value="22" data-highlight="true">  
  20.         </div>      
  21.         <div data-role="fieldcontain">  
  22.             <input type="submit" name="submit" value="Send"  />  
  23.         </div>      
  24.         </form>  
  25.     </div>  
  26. </div>  
  27. </body>  
  28. </html>  

效果如下：


代码中min、max、value相信大家都可以看懂。默认的情况每滑动一下变化为1，我们可以为其添加step属性，其值为你想改变的数。


下面给出一个开关(Flip toggle switch)的代码：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Form Example 9</title>  
  5. <meta name="viewport" content="width=device-width, initial-scale=1">  
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />  
  7. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  8. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  
  9. <style>  
  10.     div.ui-slider-switch { width: 9em }  
  11. </style>  
  12. </head>  
  13. <body>  
  14. <div data-role="page">  
  15.     <div data-role="header">  
  16.         <h1>Form Demo</h1>  
  17.     </div>  
  18.     <div data-role="content">  
  19.         <form action="echo.cfm" method="post">  
  20.         <div data-role="fieldcontain">  
  21.             <label for="gender">性别:</label>  
  22.             <select name="gender" id="gender" data-role="slider" >  
  23.                 <option value="0">男</option>  
  24.                 <option value="1">女</option>  
  25.             </select>  
  26.         </div>      
  27.         <div data-role="fieldcontain">  
  28.             <input type="submit" name="submit" value="Send"  />  
  29.         </div>      
  30.         </form>  
  31.     </div>  
  32. </div>  
  33. </body>  
  34. </html>  



如果想学习更多还请多看看官方的DEMO。


魔都
关注
专栏目录
jquerymobile-17 搜索框、滑动按钮(Slider)、开关(Flip toggle switch)
孟祥月的专栏
02-18 1万+
今天介绍一下搜索框、滑动按钮(Slider)、开关(Flip toggle switch)，我写的东西都是比较简单的，所以还需要读者认真的去研究官方的API。 首先给一个搜索框的代码： Form Example 8 Form Demo 姓名: 效果如下： 搜
Bootstrap-select下拉多选框+选中项添加radio单选按钮组
ycsss的博客
09-20 4337
目录一、问题描述二、具体实现1. 下载Bootstrap-select及汉化插件并引入2. bootstrap-select下拉多选实现HTMLJS三、参考博客 一、问题描述 工作中遇到的需求，需要将下拉单选框改成下拉多选框，因此使用Bootstrap-select插件完成。这个下拉单选框可以通过按钮切换为输入框，选中项或输入项都添加为radio单选按钮。过程中遇到了以下问题。 Bootstrap-select显示出错，总是显示两个下拉多选框 Bootstrap-select宽度width问题 radio
html 移动端 搜索,jquery移动端搜索框
weixin_35661850的博客
06-04 423
.weui-search-bar {position:relative;padding:8px;display:flex;box-sizing:border-box;background-color:red;-webkit-text-size-adjust:100%;align-items:center;}.weui-search-bar.weui-search-bar_focusing .weu...
jQuery Mobile 表单输入元素
齐枫的博客
06-02 803
文本域 对于多行文本输入可使用 。 注意：当您键入一些文本时，文本域会自动调整大小以适应新增加的行。 附加信息: 单选按钮 当用户在有限数量的选择中仅选取一个选项时，使用单选按钮。 为了创建一系列单选按钮，请添加带有 type="radio" 的 input 以及相应的 label。把单选按钮包围在 元素内。您
jQuery Mobile 列表视图(带有自动检索)
aihou3725的博客
12-01 182
输入a： 输入b： jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。 如需创建列表，请向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使这些项目可点击，请在每个列表项（<li...
滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动...
weixin_30438813的博客
04-15 205
今天看到一篇有关css3事件的博文，一时兴起便整理下相关的资料。 点击按钮，可以实现开关的滑动效果。 今天看到一篇有关css3事件的博文，一时兴起便整理下相关的资料。 点击按钮，可以实现开关的滑动效果。 今天看到一篇有关css3事件的博文，一时兴起便整理下相关的资料。 点击按钮，可以实现开关的滑动效果。 .toggle input:checked + .ss div { t...
小强的HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似人人网）
weixin_34200628的博客
02-11 80
记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热，很多app仿照该效果进行开发，在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果。 首先新建一个html文件，引入jqMobi的框架，如下： <!DOCTYPE html> <head> <meta charset="utf-8"> &lt...
jqueryMobile插件仿iPhone滑动出现删除按钮
03-16
总的来说，通过利用jQuery Mobile提供的事件处理机制和自定义样式，我们可以轻松实现仿iPhone滑动出现删除按钮的交互，提升用户在移动设备上的操作体验。这是一个典型的移动Web开发实例，展示了如何将前端技术与设计...
jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z
12-14
jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z 24H内删除，作者写书非常不容易，如觉得好，请购买纸质书籍，易读易懂！藏书不如读书，读书请买好书，这是好书。 第1章　jquery mobile简介 　1.1　通用访问 ...
jquery.mobile-1.3.2
09-04
2. **表单（Forms）**：jQuery Mobile提供了丰富的表单控件，如输入框、选择器、开关等，增强了触摸设备上的表单交互体验。 3. **网格系统（Grids）**：类似Bootstrap的栅格系统，用于创建响应式布局，适应不同屏幕...
jquery mobile radio的使用
程序员老旸
12-05 978
jquery mobile radio的使用： 纵向排版： 是否在校吃饭: 是 否 获取radio数值: var gender = $("input[name='gender']:checked").val();
jQuery Mobile-过滤-实现搜索对应元素内容
zhangfan5211314的博客
12-06 367
1.基本的过滤jQuery Mobile仅会过滤list内全部内容使用自定义过滤可以针对想要过滤的内容进行过滤 下面是样例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymo
html左右滑动切换页面实例6,HTML5带左右滑动切换动效的登录/注册表单页面模板...
weixin_39731456的博客
06-03 1234
CSS语言：CSSSCSS确定.body {background: #ff4931;transition: all .5s;padding: 1px;}.veen {width: 70%;margin: 100px auto;background: rgba(255, 255, 255, .5);min-height: 400px;display: table;position: relative...
jQuery Mobile中翻转拨动开关slider的data-*选项
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-31 2609
全栈工程师开发手册 （作者：栾鹏） jQuery Mobile 所有data-*选项 jQuery Mobile中翻转拨动开关slider的data-*选项 //一个带有 data-role="slider" 的 元素和两个 元素。 //data-mini true | false 规定开关是小尺寸还是常规尺寸 //data-role
miniui搜索单选按钮组-时间选择框验证-下拉框实现
weixin_34077371的博客
02-11 1211
页面代码： <div role="row"> 　　<div role="control" label="姓名"> 　　　　<input id="search_name" class="mini-textbox" emptyText="请输入姓名" bind="dataBean.name" /> 　　</div> ...
python基础
nyuXD的博客
03-12 724
python的特点 简单 边编译边运行 高级 ------- 不注重底层源码 面向对象 -------- 既支持面向对象也支持面向过程 可扩展 ----- 扩展的模块 免费和开源 可移植 ------python可以应用在不同的平台上 丰富的库 ------python拥有很多第三方库，非常的丰富 可嵌入性 ----- python可以嵌入到C、C++中，为其提供 脚本的功能 前期用记事本编写python运行方法 打开cmd用cd切换到xxx.py文件所在文件夹输入python xxx.py(可用ta
mx-framework前端框架使用经验积累(SG-UAP)
热门推荐
大雪封山的时候
03-13 1万+
** 1.布局控件 ** 创建一个布局控件主要包括以下步骤： 导入js类 创建实例 将实例添加到容器中 导入所需的js类。 创建实例。 将实例添加到容器中。 ** ## 1.1上下分割窗口布局 ** //1.导入类代码 $import(&amp;amp;quot;mx.containers.HSplit&amp;amp;quot;); //2. 创建实例 me.hsplit = new mx.containers.HSplit({ ...
vue搜索表格功能，根据input输入框和下拉框传递的参数进行搜索
祈澈菇凉
07-30 3295
json数据 {"msg":"success","total":0,"code":1,"data":[{"id":5,"userOrganId":null,"userName":"super","sex":1,"realName":"133","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":1,"role...
jQuery Mobile：表单组件基础与使用教程
"jQuery Mobile框架中的表单组件基础使用教程" jQuery Mobile是一款专为移动设备设计的前端框架，它提供了一套完整的UI组件和交互模式，极大地简化了在移动Web应用中创建用户界面的过程。该框架对标准HTML表单元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值