<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="./css/jquery.mobile-1.3.0.css"/>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.0.js"></script>
</head>
<body>
<div data-role="page" id="a">
<div data-role="header" data-position="fixed" data-theme="b">
<h2>
a页面的标题
</h2>
</div>
<!-- input标签上必须加上id属性,下面的label标签的for属性必须指向该id才能符合jqm的规则,否则没有效果 -->
<div data-role="content">
<p>a页面的内容</p>
<br>
<form action="">
<fieldset data-role="controlgroup">
<legend><b>JQM表单学习</b></legend>
<legend>爱好:</legend>
<input id="chb1" type="checkbox" name="love" value="1">
<label for="chb1">攀岩</label>
<input id="chb2" type="checkbox" name="love" value="2">
<label for="chb2">长跑</label>
<input id="chb3" type="checkbox" name="love" value="3">
<label for="chb3">跑酷</label>
</fieldset>
<br/>
<h3>水平的表现形式</h3>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>爱好:</legend>
<input type="checkbox" name="love" value="1" id="chb1">
<label for="chb1">乒乓球</label>
<input type="checkbox" name="love" value="2" id="chb2">
<label for="chb2">足球</label>
<input type="checkbox" name="love" value="3" id="chb3">
<label for="chb3">篮球</label>
</fieldset>
<br/>
<fieldset data-role="controlgroup">
<legend>性别选择:</legend>
<input type="radio" name="sex" id="r1" value="m">
<label for="r1">暖男</label>
<input type="radio" name="sex" id="r2" value="w">
<label for="r2">浪女</label>
</fieldset>
<br>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>性别选择:(水平样式)</legend>
<input type="radio" name="sex" id="s1" value="m">
<label for="s1">帅哥</label>
<input type="radio" name="sex" id="s2" value="w">
<label for="s2">美女</label>
</fieldset>
</form>
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
<h2>a页面的底部</h2>
</div>
</div>
</body>
</html>
jQuery mobile 学习09 单选框和复选框的使用
最新推荐文章于 2023-03-21 20:54:57 发布