jquerymobile-17 搜索框、滑动按钮(Slider)、开关(Flip toggle switch)

来源：互联网发布：php soap wsdl模式编辑：程序博客网时间：2024/04/28 23:55

今天介绍一下搜索框、滑动按钮(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。