jquerymobile-16 select menu

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

代码如下:

<!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>

效果如下:

jquerymobile-16 select menu_第1张图片

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

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


你可能感兴趣的:(jquerymobile-16 select menu)