jquerymobile-7 表单基础 radio buttons和checkboxes select menu 搜索框、滑动按钮(Slider)、开关(Flip toggle switch)
2013-11-06 16:24
417 查看
在开发的过程中，经常会用到表单进行交互，所以是比较重要的。今天就开始一点有点介绍吧。
对于我发表的文章，都是比较肤浅的，属于入门性的东西，如果你看着感觉在浪费时间，那么请不要拍砖，你去官网上看就可以了。
在开发的过程中，我们经常会用到的就是登录，开始就先写一个页面介绍一下基础：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="登录" />
</div>
</form>
</div>
</div>
</body>
</html>
这段代码显示如下：
在上面的代码中我们使用到了data-role="fieldcontain"，这个是为了使被其包围的代码看起来更像一个整体，结果就是在被包围的下面添加了一条横线。其他的作用我也没有发现。
虽然上面的显示效果很好，但是还是有点问题的。如果我们将浏览器的拉宽，那么会有如下的效果：
这样就有点偏了，看了一下原因是因为CSS中.ui-field-contain .ui-btn .ui-submit设置了width为78%。 解决他我们只要把按钮包围的data-role="fieldcontain"的div去掉就可以了。可能这个在手机上不会发生，因为手机屏幕就那么大，但是还是了解一下比较好。
在平时的开发中难免会用到单选和复选按钮，所以简单的介绍一下这两个，首先看一段代码：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>性别：</legend>
<input type="radio" name="sex" id="nan" value="男">
<label for="nan">男</label>
<input type="radio" name="sex" id="nv" value="女">
<label for="nv">女</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>喜欢的颜色:</legend>
<input type="checkbox" name="favoritecolor" id="favoritecolor1" value="Green">
<label for="favoritecolor1">绿色</label>
<input type="checkbox" name="favoritecolor" id="favoritecolor2" value="Red">
<label for="favoritecolor2">红色</label>
<input type="checkbox" name="favoritecolor" id="favoritecolor3" value="Yellow">
<label for="favoritecolor3">黄色</label>
</fieldset>
</div>
<input type="submit" name="submit" value="Send" />
</div>
</form>
</div>
</div>
</body>
</html>
运行的效果如下：
解释一下代码中的一些东西：data-role="fieldcontain"是为了将内容进行分块，主要的功能就是在每个区域后面加上一条横线，便于区分区域。例如途中“女”字下面的那条线。data-role="controlgroup"是为了使其所包围的内容更加的紧凑更像一个整体。读者可以将代码中的对应的东西删去看一下效果。
最后将代码中的<fieldset data-role="controlgroup">修改为<fieldset data-role="controlgroup" data-type="horizontal">，可以实现按钮的横向排列。
简单介绍一下select menu，对于一个做网页开发的人来说，这个应该就是最简单的了，所以我也不多说了，为了保证我自己以后需要的时候方便查找，我还是简单的写一下，将来方便.
代码如下：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 6</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Trip Setup:</legend>
<label for="location">Location</label>
<select name="location" id="location">
<option value="Home">Home</option>
<option value="Work">Work</option>
<option value="Moon">Moon</option>
<option value="Airport">Airport</option>
</select>
<label for="time">Time</label>
<select name="time" id="time">
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
<option value="Evening">Evening</option>
</select>
<label for="time">Meal</label>
<select name="meal" id="meal">
<option value="Meat">Meat</option>
<option value="Vegan">Vegan</option>
<option value="Kosher">Kosher</option>
</select>
</fieldset>
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="Send" />
</div>
</form>
</div>
</div>
</body>
</html>
效果如下：
在点击的时候，默认是调用手机上的原生的显示方式，因为没有在手机上测试，所以就不截图了。
最后将代码中的<fieldset data-role="controlgroup">修改为<fieldset data-role="controlgroup" data-type="horizontal">，可以实现select按钮的横向排列。
今天介绍一下搜索框、滑动按钮(Slider)、开关(Flip toggle switch)，我写的东西都是比较简单的，所以还需要读者认真的去研究官方的API。
首先给一个搜索框的代码：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 8</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<label for="name">姓名:</label>
<input type="search" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="搜索" />
</div>
</form>
</div>
</div>
</body>
</html>
效果如下：
搜索框中默认为空，也没有后面的×号。当我们输入内容的时候会自动出现。
然后看一段滑动按钮(Slider)的代码：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 10</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<label for="coolness">音量:</label>
<input type="range" name="coolness" id="coolness" min="0" max="100" value="22" data-highlight="true">
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="Send" />
</div>
</form>
</div>
</div>
</body>
</html>
效果如下：
代码中min、max、value相信大家都可以看懂。默认的情况每滑动一下变化为1，我们可以为其添加step属性，其值为你想改变的数。
下面给出一个开关(Flip toggle switch)的代码：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 9</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<style>
div.ui-slider-switch { width: 9em }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<label for="gender">性别:</label>
<select name="gender" id="gender" data-role="slider" >
<option value="0">男</option>
<option value="1">女</option>
</select>
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="Send" />
</div>
</form>
</div>
</div>
</body>
</html>
如果想学习更多还请多看看官方的DEMO。
对于我发表的文章，都是比较肤浅的，属于入门性的东西，如果你看着感觉在浪费时间，那么请不要拍砖，你去官网上看就可以了。
在开发的过程中，我们经常会用到的就是登录，开始就先写一个页面介绍一下基础：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="登录" />
</div>
</form>
</div>
</div>
</body>
</html>
这段代码显示如下：
在上面的代码中我们使用到了data-role="fieldcontain"，这个是为了使被其包围的代码看起来更像一个整体，结果就是在被包围的下面添加了一条横线。其他的作用我也没有发现。
虽然上面的显示效果很好，但是还是有点问题的。如果我们将浏览器的拉宽，那么会有如下的效果：
这样就有点偏了，看了一下原因是因为CSS中.ui-field-contain .ui-btn .ui-submit设置了width为78%。 解决他我们只要把按钮包围的data-role="fieldcontain"的div去掉就可以了。可能这个在手机上不会发生，因为手机屏幕就那么大，但是还是了解一下比较好。
在平时的开发中难免会用到单选和复选按钮，所以简单的介绍一下这两个，首先看一段代码：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>性别：</legend>
<input type="radio" name="sex" id="nan" value="男">
<label for="nan">男</label>
<input type="radio" name="sex" id="nv" value="女">
<label for="nv">女</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>喜欢的颜色:</legend>
<input type="checkbox" name="favoritecolor" id="favoritecolor1" value="Green">
<label for="favoritecolor1">绿色</label>
<input type="checkbox" name="favoritecolor" id="favoritecolor2" value="Red">
<label for="favoritecolor2">红色</label>
<input type="checkbox" name="favoritecolor" id="favoritecolor3" value="Yellow">
<label for="favoritecolor3">黄色</label>
</fieldset>
</div>
<input type="submit" name="submit" value="Send" />
</div>
</form>
</div>
</div>
</body>
</html>
运行的效果如下：
解释一下代码中的一些东西：data-role="fieldcontain"是为了将内容进行分块，主要的功能就是在每个区域后面加上一条横线，便于区分区域。例如途中“女”字下面的那条线。data-role="controlgroup"是为了使其所包围的内容更加的紧凑更像一个整体。读者可以将代码中的对应的东西删去看一下效果。
最后将代码中的<fieldset data-role="controlgroup">修改为<fieldset data-role="controlgroup" data-type="horizontal">，可以实现按钮的横向排列。
简单介绍一下select menu，对于一个做网页开发的人来说，这个应该就是最简单的了，所以我也不多说了，为了保证我自己以后需要的时候方便查找，我还是简单的写一下，将来方便.
代码如下：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 6</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Trip Setup:</legend>
<label for="location">Location</label>
<select name="location" id="location">
<option value="Home">Home</option>
<option value="Work">Work</option>
<option value="Moon">Moon</option>
<option value="Airport">Airport</option>
</select>
<label for="time">Time</label>
<select name="time" id="time">
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
<option value="Evening">Evening</option>
</select>
<label for="time">Meal</label>
<select name="meal" id="meal">
<option value="Meat">Meat</option>
<option value="Vegan">Vegan</option>
<option value="Kosher">Kosher</option>
</select>
</fieldset>
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="Send" />
</div>
</form>
</div>
</div>
</body>
</html>
效果如下：
在点击的时候，默认是调用手机上的原生的显示方式，因为没有在手机上测试，所以就不截图了。
最后将代码中的<fieldset data-role="controlgroup">修改为<fieldset data-role="controlgroup" data-type="horizontal">，可以实现select按钮的横向排列。
今天介绍一下搜索框、滑动按钮(Slider)、开关(Flip toggle switch)，我写的东西都是比较简单的，所以还需要读者认真的去研究官方的API。
首先给一个搜索框的代码：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 8</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<label for="name">姓名:</label>
<input type="search" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="搜索" />
</div>
</form>
</div>
</div>
</body>
</html>
效果如下：
搜索框中默认为空，也没有后面的×号。当我们输入内容的时候会自动出现。
然后看一段滑动按钮(Slider)的代码：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 10</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<label for="coolness">音量:</label>
<input type="range" name="coolness" id="coolness" min="0" max="100" value="22" data-highlight="true">
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="Send" />
</div>
</form>
</div>
</div>
</body>
</html>
效果如下：
代码中min、max、value相信大家都可以看懂。默认的情况每滑动一下变化为1，我们可以为其添加step属性，其值为你想改变的数。
下面给出一个开关(Flip toggle switch)的代码：
[html]
view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>Form Example 9</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<style>
div.ui-slider-switch { width: 9em }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Form Demo</h1>
</div>
<div data-role="content">
<form action="echo.cfm" method="post">
<div data-role="fieldcontain">
<label for="gender">性别:</label>
<select name="gender" id="gender" data-role="slider" >
<option value="0">男</option>
<option value="1">女</option>
</select>
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="Send" />
</div>
</form>
</div>
</div>
</body>
</html>
如果想学习更多还请多看看官方的DEMO。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquerymobile-17 搜索框、滑动按钮(Slider)、开关(Flip toggle switch)
- Spring MVC-表单（Form）标签-单选按钮集合（RadioButtons）示例（转载实践）
- Html5添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件教程
- 表单中有一个搜索框，有两个radio条件选择，选中第一个时点击提交按钮时就跳转到zs_search.jsp搜索页面，
- Cocos2d-x学习笔记（12）（CCControlSwitch开关、CCControlSlider滑动条、CCControlButton按钮）
- BootStrap表单控件之复选框checkbox和单选择按钮radio
- 仿IOS Segment、搜索框、开关按钮和时间选择
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础：处理InfoPath布局、控件和视图（7）--添加含规则的提交按钮到Flight Delay表单
- 高仿Iphone滑动开关按钮
- 滑动开关按钮SlideSwich
- Extjs4循序渐进(三)——表单及表单控件详解一(表单布局和基础控件 Text,TextArea,Number,Checkbox,Radio,Date)
- Radio Buttons（单选按钮）
- jQuery 如何实现一个滑动按钮开关
- Cocos2d-x学习笔记（12）（CCControlSwitch开关、CCControlSlider滑动条、CCControlButtonbutton）
- 滑动或点击按钮切换页面 ViewPager+RadioGroup+Fragment
- 【android开发】滑动按钮 SlipSwitch开关的实现
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础：处理InfoPath布局、控件和视图（7）--添加含规则的提交按钮到Flight Delay表单
- 滑动开关按钮SlideSwich
- 可滑动的开关按钮
- Toggle Buttons（开关按钮）