夺命雷公狗---微信开发58----微网站之jquery_mobile之控件介绍
我们上一节课里面介绍了基本的jqm是如何用的了，那么这一节课我们就开始玩玩他的控件
1...布局网格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码：
显示效果有点类似我们常见的表格：
2....列表视图格
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码如下所示：
显示效果如下所示：
3....可折叠区块，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题2</h3>
<p>内容2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题3</h3>
<p>内容3</p>
</div>
</div>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码如下所示：
展示效果如下所示：
4....文本输入区块，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题2</h3>
<p>内容2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题3</h3>
<p>内容3</p>
</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
<div data-role="fieldcontain">
<label for="textinput">请输入您的帐号:</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码如下所示：
显示效果如下所示：
5....密码输入区域，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题2</h3>
<p>内容2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题3</h3>
<p>内容3</p>
</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
<div data-role="fieldcontain">
<label for="textinput">请输入您的帐号:</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
<div data-role="fieldcontain">
<label for="passwordinput">请输入您的密码</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</div>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码如下所示：
展示效果如下所示：
6...文本域输入区块，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题2</h3>
<p>内容2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题3</h3>
<p>内容3</p>
</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
<div data-role="fieldcontain">
<label for="textinput">请输入您的帐号:</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
<div data-role="fieldcontain">
<label for="passwordinput">请输入您的密码:</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
<div data-role="fieldcontain">
<label for="textarea">文本区域：</label>
<textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
</div>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码如下所示：
展示效果如下所示：（如果我们不停的回车他也会使自适应的）
7.....选择菜单空间，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题2</h3>
<p>内容2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题3</h3>
<p>内容3</p>
</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
<div data-role="fieldcontain">
<label for="textinput">请输入您的帐号:</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
<div data-role="fieldcontain">
<label for="passwordinput">请输入您的密码:</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
<div data-role="fieldcontain">
<label for="textarea">文本区域：</label>
<textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
<div data-role="fieldcontain">
<label for="selectmenu" class="select">选项：</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码如下所示：
展示效果如下所示，如果在手机端里点击选择的时候会在界面前弹出一个选择的框，
8....复选框控件，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题2</h3>
<p>内容2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题3</h3>
<p>内容3</p>
</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
<div data-role="fieldcontain">
<label for="textinput">请输入您的帐号:</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
<div data-role="fieldcontain">
<label for="passwordinput">请输入您的密码:</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
<div data-role="fieldcontain">
<label for="textarea">文本区域：</label>
<textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
<div data-role="fieldcontain">
<label for="selectmenu" class="select">选项：</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>复选框控件</b></font>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>请选择</legend>
<input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
<label for="checkbox1">选择1</label>
<input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
<label for="checkbox2">选择2</label>
<input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
<label for="checkbox3">选择3</label>
</fieldset>
</div>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码如下所示：
展示效果如下所示：
9....单选框控件，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题2</h3>
<p>内容2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题3</h3>
<p>内容3</p>
</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
<div data-role="fieldcontain">
<label for="textinput">请输入您的帐号:</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
<div data-role="fieldcontain">
<label for="passwordinput">请输入您的密码:</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
<div data-role="fieldcontain">
<label for="textarea">文本区域：</label>
<textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
<div data-role="fieldcontain">
<label for="selectmenu" class="select">选项：</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>复选框控件</b></font>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>请选择</legend>
<input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
<label for="checkbox1">选择1</label>
<input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
<label for="checkbox2">选择2</label>
<input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
<label for="checkbox3">选择3</label>
</fieldset>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>单选框控件</b></font>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>请选择</legend>
<input type="radio" name="radio1" id="radio1" value="1" />
<label for="radio1">男</label>
<input type="radio" name="radio1" id="radio2" value="0" />
<label for="radio2">女</label>
</fieldset>
</div>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码如下所示：
展示效果如下所示：
10...按钮控件，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题2</h3>
<p>内容2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题3</h3>
<p>内容3</p>
</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
<div data-role="fieldcontain">
<label for="textinput">请输入您的帐号:</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
<div data-role="fieldcontain">
<label for="passwordinput">请输入您的密码:</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
<div data-role="fieldcontain">
<label for="textarea">文本区域：</label>
<textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
<div data-role="fieldcontain">
<label for="selectmenu" class="select">选项：</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>复选框控件</b></font>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>请选择</legend>
<input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
<label for="checkbox1">选择1</label>
<input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
<label for="checkbox2">选择2</label>
<input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
<label for="checkbox3">选择3</label>
</fieldset>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>单选框控件</b></font>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>请选择</legend>
<input type="radio" name="radio1" id="radio1" value="1" />
<label for="radio1">男</label>
<input type="radio" name="radio1" id="radio2" value="0" />
<label for="radio2">女</label>
</fieldset>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>按钮控件</b></font>
<a href="http://www.showtp.com" data-role="button">按钮</a>
<!--上面这里其实也是可以跳转到指定的#page控件里面去的-->
<hr />
<br /> </div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码如下所示：
11....滑动控件，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题2</h3>
<p>内容2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题3</h3>
<p>内容3</p>
</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
<div data-role="fieldcontain">
<label for="textinput">请输入您的帐号:</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
<div data-role="fieldcontain">
<label for="passwordinput">请输入您的密码:</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
<div data-role="fieldcontain">
<label for="textarea">文本区域：</label>
<textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
<div data-role="fieldcontain">
<label for="selectmenu" class="select">选项：</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>复选框控件</b></font>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>请选择</legend>
<input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
<label for="checkbox1">选择1</label>
<input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
<label for="checkbox2">选择2</label>
<input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
<label for="checkbox3">选择3</label>
</fieldset>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>单选框控件</b></font>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>请选择</legend>
<input type="radio" name="radio1" id="radio1" value="1" />
<label for="radio1">男</label>
<input type="radio" name="radio1" id="radio2" value="0" />
<label for="radio2">女</label>
</fieldset>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>按钮控件</b></font>
<a href="http://www.showtp.com" data-role="button">按钮</a>
<!--上面这里其实也是可以跳转到指定的#page控件里面去的-->
<hr />
<br />
<font style="color:red;font-size:24px;"><b>滑动控件</b></font>
<div data-role="fieldcontain">
<label for="slider">音量：</label>
<input type="range" name="slider" id="slider" min="0" max="100" value="0" />
</div>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题2</h3>
<p>内容2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题3</h3>
<p>内容3</p>
</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
<div data-role="fieldcontain">
<label for="textinput">请输入您的帐号:</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
<div data-role="fieldcontain">
<label for="passwordinput">请输入您的密码:</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
<div data-role="fieldcontain">
<label for="textarea">文本区域：</label>
<textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
<div data-role="fieldcontain">
<label for="selectmenu" class="select">选项：</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>复选框控件</b></font>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>请选择</legend>
<input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
<label for="checkbox1">选择1</label>
<input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
<label for="checkbox2">选择2</label>
<input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
<label for="checkbox3">选择3</label>
</fieldset>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>单选框控件</b></font>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>请选择</legend>
<input type="radio" name="radio1" id="radio1" value="1" />
<label for="radio1">男</label>
<input type="radio" name="radio1" id="radio2" value="0" />
<label for="radio2">女</label>
</fieldset>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>按钮控件</b></font>
<a href="http://www.showtp.com" data-role="button">按钮</a>
<!--上面这里其实也是可以跳转到指定的#page控件里面去的-->
<hr />
<br />
<font style="color:red;font-size:24px;"><b>滑动控件</b></font>
<div data-role="fieldcontain">
<label for="slider">音量：</label>
<input type="range" name="slider" id="slider" min="0" max="100" value="0" />
</div>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码如下所示：
展示效果如下所示：
12.....翻转开关控件，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--宽高禁缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--类webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--状态条 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--电话号码不是链接 -->
<meta name="format-detection" content="telephone=no">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<font style="color:red;font-size:24px;"><b>布局网格</b></font>
<div class="ui-grid-b">
<div class="ui-block-a">区块1</div>
<div class="ui-block-b">区块2</div>
<div class="ui-block-c">区块3</div>
<div class="ui-block-a">区块4</div>
<div class="ui-block-b">区块5</div>
<div class="ui-block-c">区块6</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>列表视图格</b></font>
<br />
<br />
<ul data-role="listview">
<li>
<a href="">
<h3>页面1</h3>
<p>ym1</p>
</a>
</li>
<li>
<a href="">
<h3>页面2</h3>
<p>ym2</p>
</a>
</li>
<li>
<a href="">
<h3>页面3</h3>
<p>ym3</p>
</a>
</li>
</ul>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题2</h3>
<p>内容2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>标题3</h3>
<p>内容3</p>
</div>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
<div data-role="fieldcontain">
<label for="textinput">请输入您的帐号:</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
<div data-role="fieldcontain">
<label for="passwordinput">请输入您的密码:</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
<div data-role="fieldcontain">
<label for="textarea">文本区域：</label>
<textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
<div data-role="fieldcontain">
<label for="selectmenu" class="select">选项：</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>复选框控件</b></font>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>请选择</legend>
<input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
<label for="checkbox1">选择1</label>
<input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
<label for="checkbox2">选择2</label>
<input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
<label for="checkbox3">选择3</label>
</fieldset>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>单选框控件</b></font>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>请选择</legend>
<input type="radio" name="radio1" id="radio1" value="1" />
<label for="radio1">男</label>
<input type="radio" name="radio1" id="radio2" value="0" />
<label for="radio2">女</label>
</fieldset>
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>按钮控件</b></font>
<a href="http://www.showtp.com" data-role="button">按钮</a>
<!--上面这里其实也是可以跳转到指定的#page控件里面去的-->
<hr />
<br />
<font style="color:red;font-size:24px;"><b>滑动控件</b></font>
<div data-role="fieldcontain">
<label for="slider">音量：</label>
<input type="range" name="slider" id="slider" min="0" max="100" value="0" />
</div>
<hr />
<br />
<font style="color:red;font-size:24px;"><b>翻转开关控件</b></font>
<div data-role="fieldcontain">
<label for="flipswitch">选择：</label>
<select name="flipswitch" id="flipswitch" data-role="slider">
<option value="off">关</option>
<option value="on">开</option>
</select>
</div>
</div>
<div data-role="footer">
<h1>页面脚注</h1>
</div>
</div>
</body>
</html>
核心代码如下所示：
展示效果如下所示：
我们在实际的开发的时候，有上面这些控件几乎都没什么问题的了，只需将他们用form包含进来即可实现效果，嘻嘻
夺命雷公狗---微信开发58----微网站之jquery_mobile之控件介绍的更多相关文章
- 夺命雷公狗---微信开发57----微网站之jquery_mobile之入门案例
这节课我们主要用到到jquery_mobile来实现一个点电影播放网站 jquery_mobile(简称JQM)其实就是基于jquery开发出来的一套移动端框架,适应移动用户端市场对浏览与体验从而进一 ...
- 夺命雷公狗---微信开发62----所以memcache对access_token进行全局缓存优化
公众号调用接口并不是无限制的,为了防止公众号的程序错误而引发微信服务器负载异常,默认情况下, 每个公众号调用接口都不能超过一定限制,当超过一定限制时,调用对应接口会收到错误信息,造成调用失败. 我们也 ...
- 夺命雷公狗---微信开发17----自定义菜单的事件推送，响应菜单的CLICK
废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "com ...
- 夺命雷公狗---微信开发59----在线点播电影网1之ckplayer播放器
我们节课程就要开始写一个小项目了,这项目主要是写一个在线点播电影影网的,我们用到的播放器是ckplayer ckplayer基本介绍: ckplayer的全称是:超酷flv播放器,他是一款用于网页上播 ...
- 夺命雷公狗---微信开发55----微信js-sdk接口开发（2）接口功能介绍之签名算法
我们JS-SDK里面其实有不少的接口 startRecord---录音 stopRecord---停止录音 playVoice---播放 pauseVoice---暂停播放 uploadImage-- ...
- 夺命雷公狗---微信开发56----微信js-sdk接口开发（3）所有接口功能
按照上节课程里面的介绍,我们可以先将刚才在signatrue.php里获取到的信息填写进jssdk.htm模版文件里填写各个权限的参数 jssdk.htm代码如下: <!DOCTYPE html ...
- 夺命雷公狗---微信开发54----微信js-sdk接口开发（1）之快速入门
js-sdk基本介绍 除去服务号的九大接口外,微信提供了JS-SDK接口,所谓JS-SDK接口也就是在网页中使用javascript来更改网页设置, (比如隐藏右上角的菜单)获取用户状态(比如地理位置 ...
- 夺命雷公狗---微信开发53----网页授权（oauth2.0）获取用户基本信息接口（3）实现世界留言版
前面两节课我们讲的是base型的授权了,那么现在我们开始Userinfo型授权, 先来看下我们的原理图 我们这节课来做一个 世界留言版 系统 1..首先我还是在微信测试平台那里设置好回调页面的域名 2 ...
- 夺命雷公狗---微信开发51----网页授权（oauth2.0）获取用户基本信息接口（1）
如果用户在微信客户端访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,从而实现业务逻辑. 一般我们用来“数据采集”,“市场调查”,“投票”,只要授权了第三方网页,微信用户无需注册就可 ...
随机推荐
- 【Android开发学习笔记】【第二课】Activity学习
什么是Activity,就是我们所看到的 需要理解以下四句话: 1.一个Activity就是一个类,并且这个类需要集成Activity: 2.需要重写OnCreat方法 3.每个Activity都需要 ...
- VB的注释
VB程序中的注解有两种: 第1种是以单引号 ' 开头的,但如果这个符号是在双引号之内的,则视为文本,不做为注释引导符,这个符号后面的内容均为注释内容. 第2种就REM后加注释内容(REM与注释内容要空 ...
- Mac终端命令行提示符格式更改方法
内容提要: 主要是通过~/.bash_profile文件更改环境变量PS1,修改命令行提示符的显示格式,并展示不同颜色. 本文介绍了默认设置的缺陷,以及需要用到的基础知识,最后介绍了更改命令行提示符格 ...
- JS-005-常见下拉列表 Select 和 datalist
下拉列表在我们日常的网页浏览的过程中,随处可见,是 web 编程过程中大家非常熟悉的一个页面元素,随着 HTML 语言的日益强大,其在广大攻城狮的手中可谓是千变万化,有了很多不同的实现方式.本文主要以 ...
- Selenium2学习-018-WebUI自动化实战实例-016-自动化脚本编写过程中的登录验证码问题
日常的 Web 网站开发的过程中,为提升登录安全或防止用户通过脚本进行黄牛操作(宇宙最贵铁皮天朝魔都的机动车牌照竞拍中),很多网站在登录的时候,添加了验证码验证,而且验证码的实现越来越复杂,对其进行脚 ...
- python笔记 - day6
python笔记 - day6 参考: http://www.cnblogs.com/wupeiqi/articles/5501365.html 大纲: 利用递归,实现阶乘: Python反射 pyt ...
- java 中集合和数组互相转换
package test; import java.util.Arrays;import java.util.List; /** * Created by Administrator on 2016/ ...
- Android 使用Okhttp/Retrofit持久化cookie的简便方式
首先cookie是什么就不多说了,还是不知道的话推荐看看这篇文章 Cookie/Session机制详解 深入解析Cookie技术 为什么要持久化cookie也不多说了,你能看到这篇文章代表你有这个需求 ...
- java yum安装的环境变量设置
如何(怎样)在CentOS 6.X 或 redhat 上使用安装JDK runtime environment (openjdk) ? CentOS 6.X 和 5.X 自带有OpenJDK runt ...
- android UI进阶之用ViewPager实现欢迎引导页面
ViewPager需要android-support-v4.jar这个包的支持,来自google提供的一个附加包.大家搜下即可. ViewPager主要用来组织一组数据,并且通过左右滑动的方式来展示. ...