jquerymobile-17 搜索框、滑動按鈕(Slider)、開關(Flip toggle switch)


今天介紹一下搜索框、滑動按鈕(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。



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com