今天介绍一下搜索框、滑动按钮(Slider)、开关(Flip toggle switch)，我写的东西都是比较简单的，所以还需要读者认真的去研究官方的API。
首先给一个搜索框的代码：
<!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)的代码：
<!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)的代码：
<!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。