<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web</title>
<link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="b">
<h1>第一页</h1>
</div>
<div data-role="content">
<input type="text" name="name" id="base" value=""/>
<label for="number-pattern">Number + [0-9]*pattern:</label>
<input type="number" pattern="[0-9]*" id="number-pattern" value="" type="number"/>
<label for="file">File:</label>
<input type="file" id="file" value="" name="file"/>
<label for="password">Password:</label>
<input name="password" id="password" type="password" value="" autocomplete="off"/>
<label for="textinput-hide" class="ui-hidden-accessible">Text</label>
<input name="textinput-hide" id="textinput-hide" placeholder="请输入您要搜索的信息" value="" type="text"/>
<input disabled="disabled" name="textinput-disabled" id="textinput-disabled" placeholder="Text input" value="这个文本框是disabled的" type="text"/>
<div data-role="fieldcontain">
<label for="name">用户名：</label>
<input type="text" name="name" id="name" placeholder="请输入用户名" value=""/>
<label for="password">密码：</label>
<input type="password" name="password" id="password" value=""/>
<input type="button" name="button" id="button" value="提交" data-inline="true"/>
<input type="button" name="button" id="button" value="重置" data-inline="true"/>
<label for="foo"></label>
<select name="foo" id="foo">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea name="textarea" id="textarea"></textarea>
</div>
<div data-role="fieldcontain">
<label for="search">Search</label>
<input type="search" name="search" id="search" value=""/>
</div>
<div data-role="fieldcontain">
<label for="range">range</label>
<input type="range" name="silder" id="silder" value="40" min="0" max="100"/>
</div>
<div data-role="fieldcontain">
<label for="fill">fill</label>
<input type="range" name="silder" id="silder" data-highlight="true" value="40" min="0" max="100"/>
</div>
<div data-role="fieldcontain">
<label for="fill">fill</label>
<input type="range" name="silder" id="silder" data-highlight="true" data-mini="ture" value="40" min="0" max="100"/>
</div>
<div data-role="rangeslider">
<label for="rangesilder1">rangesilder</label>
<input type="range" name="rangesilder1" id="rangesilder1" data-highlight="true" data-mini="ture" value="20" min="0" max="100"/>
<label for="rangesilder2">rangesilder</label>
<input type="range" name="rangesilder2" id="rangesilder2" data-highlight="true" data-mini="ture" value="40" min="0" max="100"/>
</div>
<div data-role="rangeslider" data-mini="true">
<label for="rangesilder1">rangesilder</label>
<input type="range" name="rangesilder1" id="rangesilder1" data-highlight="true" data-mini="ture" value="20" min="0" max="100"/>
<label for="rangesilder2">rangesilder</label>
<input type="range" name="rangesilder2" id="rangesilder2" data-highlight="true" data-mini="ture" value="40" min="0" max="100"/>
</div>
<label for="slider2">Flip switch:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">关</option>
<option value="on">开</option>
</select>
<label for="slider2">Flip switch:</label>
<select name="slider2" id="slider2" data-role="slider" data-mini="true">
<option value="off">关</option>
<option value="on">开</option>
</select>
<fieldset data-role="controlgroup">
<legend>Checkboxes</legend>
<input name="checkbox-1" id="checkbox-1" checked="" type="checkbox">
<label for="checkbox-1" id="checkbox-1">Cheetos</label>
<input name="checkbox-2" id="checkbox-2" checked="" type="checkbox">
<label for="checkbox-2" id="checkbox-2">Cheetos</label>
<input name="checkbox-3" id="checkbox-3" checked="" type="checkbox">
<label for="checkbox-3" id="checkbox-3">Cheetos</label>
<input name="checkbox-4" id="checkbox-4" checked="" type="checkbox">
<label for="checkbox-4" id="checkbox-4">Cheetos</label>
</fieldset>
<fieldset data-role="controlgroup" data-mini="true">
<legend>Checkboxes</legend>
<input name="checkbox-1" id="checkbox-1" checked="" type="checkbox">
<label for="checkbox-1" id="checkbox-1">Cheetos</label>
<input name="checkbox-2" id="checkbox-2" checked="" type="checkbox">
<label for="checkbox-2" id="checkbox-2">Cheetos</label>
<input name="checkbox-3" id="checkbox-3" checked="" type="checkbox">
<label for="checkbox-3" id="checkbox-3">Cheetos</label>
<input name="checkbox-4" id="checkbox-4" checked="" type="checkbox">
<label for="checkbox-4" id="checkbox-4">Cheetos</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>Radio buttons</legend>
<input name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" type="radio"/>
<label for="radio-choice-1">Cat</label>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-3">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"/>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Radio buttons</legend>
<input name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" type="radio"/>
<label for="radio-choice-1">Cat</label>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-3">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"/>
</fieldset>
<br><br><br>
<select name="select-choice-1" id="select-choice-1" data-inline="true">
<option value="aaaa">aaaaa</option>
<option value="bbbb">bbbbb</option>
<option value="cccc">ccccc</option>
<option value="dddd">ddddd</option>
</select>
<select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-inline="true">
<option value="aaaa">aaaaa</option>
<option value="bbbb">bbbbb</option>
<option value="cccc">ccccc</option>
<option value="dddd">ddddd</option>
</select>
------------------------------
<label for="select-choice" class="select">Multi-select with optgroups.</label>
<select name="select-choice" id="select-choice" multiple="multiple"
data-native-menu="false" data-icon="grid" data-iconpos="left">
<option>Choose a fes options:</option>
<optgroup label="USPS1">
<option value="standard1" selected="">Standard:7 day1</option>
<option value="standard2" selected="">Standard:7 day2</option>
<option value="standard3" selected="">Standard:7 day3</option>
</optgroup>
<optgroup label="USPS2">
<option value="standard1" selected="">Standard:7 day1</option>
<option value="standard2" selected="">Standard:7 day2</option>
<option value="standard3" selected="">Standard:7 day3</option>
</optgroup>
</select>
</div>
<div data-role="footer">
<h4>底部</h4>
</div>
</div>
</body>
</html>
本文将介绍如何使用jQuery Mobile创建响应式Web页面，包括表单元素、输入验证、文件上传、密码输入、隐藏和禁用输入框等功能的实现。
扫一扫
3990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
