我们上一节课里面介绍了基本的jqm是如何用的了，那么这一节课我们就开始玩玩他的控件

1...布局网格

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.             </div>
  34.             <div data-role="footer">
  35.                 <h1>页面脚注</h1>
  36.             </div>
  37.         </div>
  38.     </body>
  39. </html>

核心代码：

显示效果有点类似我们常见的表格：

2....列表视图格

代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.             </div>
  59.             <div data-role="footer">
  60.                 <h1>页面脚注</h1>
  61.             </div>
  62.         </div>
  63.     </body>
  64. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.             </div>
  59.             <div data-role="footer">
  60.                 <h1>页面脚注</h1>
  61.             </div>
  62.         </div>
  63.     </body>
  64. </html>

核心代码如下所示：

显示效果如下所示：

3....可折叠区块，代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.                 <hr />
  59.                 <br />
  60.                 <font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
  61.                 <div data-role="collapsible-set">
  62.                     <div data-role="collapsible">
  63.                         <h3>标题1</h3>
  64.                         <p>内容1</p>
  65.                     </div>
  66.                     <div data-role="collapsible" data-collapsed="true">
  67.                         <h3>标题2</h3>
  68.                         <p>内容2</p>
  69.                     </div>
  70.                     <div data-role="collapsible" data-collapsed="true">
  71.                         <h3>标题3</h3>
  72.                         <p>内容3</p>
  73.                     </div>
  74.                 </div>
  75.             </div>
  76.             <div data-role="footer">
  77.                 <h1>页面脚注</h1>
  78.             </div>
  79.         </div>
  80.     </body>
  81. </html>

核心代码如下所示：

展示效果如下所示：

4....文本输入区块，代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.                 <hr />
  59.                 <br />
  60.                 <font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
  61.                 <div data-role="collapsible-set">
  62.                     <div data-role="collapsible">
  63.                         <h3>标题1</h3>
  64.                         <p>内容1</p>
  65.                     </div>
  66.                     <div data-role="collapsible" data-collapsed="true">
  67.                         <h3>标题2</h3>
  68.                         <p>内容2</p>
  69.                     </div>
  70.                     <div data-role="collapsible" data-collapsed="true">
  71.                         <h3>标题3</h3>
  72.                         <p>内容3</p>
  73.                     </div>
  74.                 </div>
  75.                 <hr />
  76.                 <br />
  77.                 <font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
  78.                 <div data-role="fieldcontain">
  79.                     <label for="textinput">请输入您的帐号:</label>
  80.                     <input type="text" name="textinput" id="textinput" value="" />
  81.                 </div>
  82.             </div>
  83.             <div data-role="footer">
  84.                 <h1>页面脚注</h1>
  85.             </div>
  86.         </div>
  87.     </body>
  88. </html>

核心代码如下所示：

显示效果如下所示：

5....密码输入区域，代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.                 <hr />
  59.                 <br />
  60.                 <font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
  61.                 <div data-role="collapsible-set">
  62.                     <div data-role="collapsible">
  63.                         <h3>标题1</h3>
  64.                         <p>内容1</p>
  65.                     </div>
  66.                     <div data-role="collapsible" data-collapsed="true">
  67.                         <h3>标题2</h3>
  68.                         <p>内容2</p>
  69.                     </div>
  70.                     <div data-role="collapsible" data-collapsed="true">
  71.                         <h3>标题3</h3>
  72.                         <p>内容3</p>
  73.                     </div>
  74.                 </div>
  75.                 <hr />
  76.                 <br />
  77.                 <font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
  78.                 <div data-role="fieldcontain">
  79.                     <label for="textinput">请输入您的帐号:</label>
  80.                     <input type="text" name="textinput" id="textinput" value="" />
  81.                 </div>
  82.                 <hr />
  83.                 <br />
  84.                 <font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
  85.                 <div data-role="fieldcontain">
  86.                     <label for="passwordinput">请输入您的密码</label>
  87.                     <input type="password" name="passwordinput" id="passwordinput" value="" />
  88.                 </div>
  89.             </div>
  90.             <div data-role="footer">
  91.                 <h1>页面脚注</h1>
  92.             </div>
  93.         </div>
  94.     </body>
  95. </html>

核心代码如下所示：

展示效果如下所示：

6...文本域输入区块，代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.                 <hr />
  59.                 <br />
  60.                 <font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
  61.                 <div data-role="collapsible-set">
  62.                     <div data-role="collapsible">
  63.                         <h3>标题1</h3>
  64.                         <p>内容1</p>
  65.                     </div>
  66.                     <div data-role="collapsible" data-collapsed="true">
  67.                         <h3>标题2</h3>
  68.                         <p>内容2</p>
  69.                     </div>
  70.                     <div data-role="collapsible" data-collapsed="true">
  71.                         <h3>标题3</h3>
  72.                         <p>内容3</p>
  73.                     </div>
  74.                 </div>
  75.                 <hr />
  76.                 <br />
  77.                 <font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
  78.                 <div data-role="fieldcontain">
  79.                     <label for="textinput">请输入您的帐号:</label>
  80.                     <input type="text" name="textinput" id="textinput" value="" />
  81.                 </div>
  82.                 <hr />
  83.                 <br />
  84.                 <font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
  85.                 <div data-role="fieldcontain">
  86.                     <label for="passwordinput">请输入您的密码:</label>
  87.                     <input type="password" name="passwordinput" id="passwordinput" value="" />
  88.                 </div>
  89.                 <hr />
  90.                 <br />
  91.                 <font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
  92.                 <div data-role="fieldcontain">
  93.                     <label for="textarea">文本区域：</label>
  94.                     <textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
  95.                 </div>
  96.             </div>
  97.             <div data-role="footer">
  98.                 <h1>页面脚注</h1>
  99.             </div>
  100.         </div>
  101.     </body>
  102. </html>

核心代码如下所示：

展示效果如下所示：（如果我们不停的回车他也会使自适应的）

7.....选择菜单空间，代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.                 <hr />
  59.                 <br />
  60.                 <font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
  61.                 <div data-role="collapsible-set">
  62.                     <div data-role="collapsible">
  63.                         <h3>标题1</h3>
  64.                         <p>内容1</p>
  65.                     </div>
  66.                     <div data-role="collapsible" data-collapsed="true">
  67.                         <h3>标题2</h3>
  68.                         <p>内容2</p>
  69.                     </div>
  70.                     <div data-role="collapsible" data-collapsed="true">
  71.                         <h3>标题3</h3>
  72.                         <p>内容3</p>
  73.                     </div>
  74.                 </div>
  75.                 <hr />
  76.                 <br />
  77.                 <font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
  78.                 <div data-role="fieldcontain">
  79.                     <label for="textinput">请输入您的帐号:</label>
  80.                     <input type="text" name="textinput" id="textinput" value="" />
  81.                 </div>
  82.                 <hr />
  83.                 <br />
  84.                 <font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
  85.                 <div data-role="fieldcontain">
  86.                     <label for="passwordinput">请输入您的密码:</label>
  87.                     <input type="password" name="passwordinput" id="passwordinput" value="" />
  88.                 </div>
  89.                 <hr />
  90.                 <br />
  91.                 <font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
  92.                 <div data-role="fieldcontain">
  93.                     <label for="textarea">文本区域：</label>
  94.                     <textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
  95.                 </div>
  96.                 <hr />
  97.                 <br />
  98.                 <font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
  99.                 <div data-role="fieldcontain">
  100.                     <label for="selectmenu" class="select">选项：</label>
  101.                     <select name="selectmenu" id="selectmenu">
  102.                         <option value="option1">option1</option>
  103.                         <option value="option2">option2</option>
  104.                         <option value="option3">option3</option>
  105.                     </select>
  106.                 </div>
  107.             </div>
  108.             <div data-role="footer">
  109.                 <h1>页面脚注</h1>
  110.             </div>
  111.         </div>
  112.     </body>
  113. </html>

核心代码如下所示：

展示效果如下所示，如果在手机端里点击选择的时候会在界面前弹出一个选择的框，

8....复选框控件，代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.                 <hr />
  59.                 <br />
  60.                 <font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
  61.                 <div data-role="collapsible-set">
  62.                     <div data-role="collapsible">
  63.                         <h3>标题1</h3>
  64.                         <p>内容1</p>
  65.                     </div>
  66.                     <div data-role="collapsible" data-collapsed="true">
  67.                         <h3>标题2</h3>
  68.                         <p>内容2</p>
  69.                     </div>
  70.                     <div data-role="collapsible" data-collapsed="true">
  71.                         <h3>标题3</h3>
  72.                         <p>内容3</p>
  73.                     </div>
  74.                 </div>
  75.                 <hr />
  76.                 <br />
  77.                 <font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
  78.                 <div data-role="fieldcontain">
  79.                     <label for="textinput">请输入您的帐号:</label>
  80.                     <input type="text" name="textinput" id="textinput" value="" />
  81.                 </div>
  82.                 <hr />
  83.                 <br />
  84.                 <font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
  85.                 <div data-role="fieldcontain">
  86.                     <label for="passwordinput">请输入您的密码:</label>
  87.                     <input type="password" name="passwordinput" id="passwordinput" value="" />
  88.                 </div>
  89.                 <hr />
  90.                 <br />
  91.                 <font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
  92.                 <div data-role="fieldcontain">
  93.                     <label for="textarea">文本区域：</label>
  94.                     <textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
  95.                 </div>
  96.                 <hr />
  97.                 <br />
  98.                 <font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
  99.                 <div data-role="fieldcontain">
  100.                     <label for="selectmenu" class="select">选项：</label>
  101.                     <select name="selectmenu" id="selectmenu">
  102.                         <option value="option1">option1</option>
  103.                         <option value="option2">option2</option>
  104.                         <option value="option3">option3</option>
  105.                     </select>
  106.                 </div>
  107.                 <hr />
  108.                 <br />
  109.                 <font style="color:red;font-size:24px;"><b>复选框控件</b></font>
  110.                 <div data-role="fieldcontain">
  111.                     <fieldset data-role="controlgroup">
  112.                         <legend>请选择</legend>
  113.                         <input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
  114.                         <label for="checkbox1">选择1</label>
  115.                         <input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
  116.                         <label for="checkbox2">选择2</label>
  117.                         <input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
  118.                         <label for="checkbox3">选择3</label>
  119.                     </fieldset>
  120.                 </div>
  121.             </div>
  122.             <div data-role="footer">
  123.                 <h1>页面脚注</h1>
  124.             </div>
  125.         </div>
  126.     </body>
  127. </html>

核心代码如下所示：

展示效果如下所示：

9....单选框控件，代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.                 <hr />
  59.                 <br />
  60.                 <font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
  61.                 <div data-role="collapsible-set">
  62.                     <div data-role="collapsible">
  63.                         <h3>标题1</h3>
  64.                         <p>内容1</p>
  65.                     </div>
  66.                     <div data-role="collapsible" data-collapsed="true">
  67.                         <h3>标题2</h3>
  68.                         <p>内容2</p>
  69.                     </div>
  70.                     <div data-role="collapsible" data-collapsed="true">
  71.                         <h3>标题3</h3>
  72.                         <p>内容3</p>
  73.                     </div>
  74.                 </div>
  75.                 <hr />
  76.                 <br />
  77.                 <font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
  78.                 <div data-role="fieldcontain">
  79.                     <label for="textinput">请输入您的帐号:</label>
  80.                     <input type="text" name="textinput" id="textinput" value="" />
  81.                 </div>
  82.                 <hr />
  83.                 <br />
  84.                 <font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
  85.                 <div data-role="fieldcontain">
  86.                     <label for="passwordinput">请输入您的密码:</label>
  87.                     <input type="password" name="passwordinput" id="passwordinput" value="" />
  88.                 </div>
  89.                 <hr />
  90.                 <br />
  91.                 <font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
  92.                 <div data-role="fieldcontain">
  93.                     <label for="textarea">文本区域：</label>
  94.                     <textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
  95.                 </div>
  96.                 <hr />
  97.                 <br />
  98.                 <font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
  99.                 <div data-role="fieldcontain">
  100.                     <label for="selectmenu" class="select">选项：</label>
  101.                     <select name="selectmenu" id="selectmenu">
  102.                         <option value="option1">option1</option>
  103.                         <option value="option2">option2</option>
  104.                         <option value="option3">option3</option>
  105.                     </select>
  106.                 </div>
  107.                 <hr />
  108.                 <br />
  109.                 <font style="color:red;font-size:24px;"><b>复选框控件</b></font>
  110.                 <div data-role="fieldcontain">
  111.                     <fieldset data-role="controlgroup">
  112.                         <legend>请选择</legend>
  113.                         <input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
  114.                         <label for="checkbox1">选择1</label>
  115.                         <input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
  116.                         <label for="checkbox2">选择2</label>
  117.                         <input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
  118.                         <label for="checkbox3">选择3</label>
  119.                     </fieldset>
  120.                 </div>
  121.                 <hr />
  122.                 <br />
  123.                 <font style="color:red;font-size:24px;"><b>单选框控件</b></font>
  124.                 <div data-role="fieldcontain">
  125.                     <fieldset data-role="controlgroup" data-type="horizontal">
  126.                         <legend>请选择</legend>
  127.                         <input type="radio" name="radio1" id="radio1" value="1" />
  128.                         <label for="radio1">男</label>
  129.                         <input type="radio" name="radio1" id="radio2" value="0" />
  130.                         <label for="radio2">女</label>
  131.                     </fieldset>
  132.                 </div>
  133.             </div>
  134.             <div data-role="footer">
  135.                 <h1>页面脚注</h1>
  136.             </div>
  137.         </div>
  138.     </body>
  139. </html>

核心代码如下所示：

展示效果如下所示：

10...按钮控件，代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.                 <hr />
  59.                 <br />
  60.                 <font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
  61.                 <div data-role="collapsible-set">
  62.                     <div data-role="collapsible">
  63.                         <h3>标题1</h3>
  64.                         <p>内容1</p>
  65.                     </div>
  66.                     <div data-role="collapsible" data-collapsed="true">
  67.                         <h3>标题2</h3>
  68.                         <p>内容2</p>
  69.                     </div>
  70.                     <div data-role="collapsible" data-collapsed="true">
  71.                         <h3>标题3</h3>
  72.                         <p>内容3</p>
  73.                     </div>
  74.                 </div>
  75.                 <hr />
  76.                 <br />
  77.                 <font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
  78.                 <div data-role="fieldcontain">
  79.                     <label for="textinput">请输入您的帐号:</label>
  80.                     <input type="text" name="textinput" id="textinput" value="" />
  81.                 </div>
  82.                 <hr />
  83.                 <br />
  84.                 <font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
  85.                 <div data-role="fieldcontain">
  86.                     <label for="passwordinput">请输入您的密码:</label>
  87.                     <input type="password" name="passwordinput" id="passwordinput" value="" />
  88.                 </div>
  89.                 <hr />
  90.                 <br />
  91.                 <font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
  92.                 <div data-role="fieldcontain">
  93.                     <label for="textarea">文本区域：</label>
  94.                     <textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
  95.                 </div>
  96.                 <hr />
  97.                 <br />
  98.                 <font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
  99.                 <div data-role="fieldcontain">
  100.                     <label for="selectmenu" class="select">选项：</label>
  101.                     <select name="selectmenu" id="selectmenu">
  102.                         <option value="option1">option1</option>
  103.                         <option value="option2">option2</option>
  104.                         <option value="option3">option3</option>
  105.                     </select>
  106.                 </div>
  107.                 <hr />
  108.                 <br />
  109.                 <font style="color:red;font-size:24px;"><b>复选框控件</b></font>
  110.                 <div data-role="fieldcontain">
  111.                     <fieldset data-role="controlgroup">
  112.                         <legend>请选择</legend>
  113.                         <input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
  114.                         <label for="checkbox1">选择1</label>
  115.                         <input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
  116.                         <label for="checkbox2">选择2</label>
  117.                         <input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
  118.                         <label for="checkbox3">选择3</label>
  119.                     </fieldset>
  120.                 </div>
  121.                 <hr />
  122.                 <br />
  123.                 <font style="color:red;font-size:24px;"><b>单选框控件</b></font>
  124.                 <div data-role="fieldcontain">
  125.                     <fieldset data-role="controlgroup" data-type="horizontal">
  126.                         <legend>请选择</legend>
  127.                         <input type="radio" name="radio1" id="radio1" value="1" />
  128.                         <label for="radio1">男</label>
  129.                         <input type="radio" name="radio1" id="radio2" value="0" />
  130.                         <label for="radio2">女</label>
  131.                     </fieldset>
  132.                 </div>
  133.                 <hr />
  134.                 <br />
  135.                 <font style="color:red;font-size:24px;"><b>按钮控件</b></font>
  136.                 <a href="http://www.showtp.com" data-role="button">按钮</a>
  137.                 <!--上面这里其实也是可以跳转到指定的#page控件里面去的-->
  138.                 <hr />
  139.                 <br />
  140.  
  141.             </div>
  142.             <div data-role="footer">
  143.                 <h1>页面脚注</h1>
  144.             </div>
  145.         </div>
  146.     </body>
  147. </html>

核心代码如下所示：

11....滑动控件，代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.                 <hr />
  59.                 <br />
  60.                 <font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
  61.                 <div data-role="collapsible-set">
  62.                     <div data-role="collapsible">
  63.                         <h3>标题1</h3>
  64.                         <p>内容1</p>
  65.                     </div>
  66.                     <div data-role="collapsible" data-collapsed="true">
  67.                         <h3>标题2</h3>
  68.                         <p>内容2</p>
  69.                     </div>
  70.                     <div data-role="collapsible" data-collapsed="true">
  71.                         <h3>标题3</h3>
  72.                         <p>内容3</p>
  73.                     </div>
  74.                 </div>
  75.                 <hr />
  76.                 <br />
  77.                 <font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
  78.                 <div data-role="fieldcontain">
  79.                     <label for="textinput">请输入您的帐号:</label>
  80.                     <input type="text" name="textinput" id="textinput" value="" />
  81.                 </div>
  82.                 <hr />
  83.                 <br />
  84.                 <font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
  85.                 <div data-role="fieldcontain">
  86.                     <label for="passwordinput">请输入您的密码:</label>
  87.                     <input type="password" name="passwordinput" id="passwordinput" value="" />
  88.                 </div>
  89.                 <hr />
  90.                 <br />
  91.                 <font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
  92.                 <div data-role="fieldcontain">
  93.                     <label for="textarea">文本区域：</label>
  94.                     <textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
  95.                 </div>
  96.                 <hr />
  97.                 <br />
  98.                 <font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
  99.                 <div data-role="fieldcontain">
  100.                     <label for="selectmenu" class="select">选项：</label>
  101.                     <select name="selectmenu" id="selectmenu">
  102.                         <option value="option1">option1</option>
  103.                         <option value="option2">option2</option>
  104.                         <option value="option3">option3</option>
  105.                     </select>
  106.                 </div>
  107.                 <hr />
  108.                 <br />
  109.                 <font style="color:red;font-size:24px;"><b>复选框控件</b></font>
  110.                 <div data-role="fieldcontain">
  111.                     <fieldset data-role="controlgroup">
  112.                         <legend>请选择</legend>
  113.                         <input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
  114.                         <label for="checkbox1">选择1</label>
  115.                         <input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
  116.                         <label for="checkbox2">选择2</label>
  117.                         <input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
  118.                         <label for="checkbox3">选择3</label>
  119.                     </fieldset>
  120.                 </div>
  121.                 <hr />
  122.                 <br />
  123.                 <font style="color:red;font-size:24px;"><b>单选框控件</b></font>
  124.                 <div data-role="fieldcontain">
  125.                     <fieldset data-role="controlgroup" data-type="horizontal">
  126.                         <legend>请选择</legend>
  127.                         <input type="radio" name="radio1" id="radio1" value="1" />
  128.                         <label for="radio1">男</label>
  129.                         <input type="radio" name="radio1" id="radio2" value="0" />
  130.                         <label for="radio2">女</label>
  131.                     </fieldset>
  132.                 </div>
  133.                 <hr />
  134.                 <br />
  135.                 <font style="color:red;font-size:24px;"><b>按钮控件</b></font>
  136.                 <a href="http://www.showtp.com" data-role="button">按钮</a>
  137.                 <!--上面这里其实也是可以跳转到指定的#page控件里面去的-->
  138.                 <hr />
  139.                 <br />
  140.                 <font style="color:red;font-size:24px;"><b>滑动控件</b></font>
  141.                 <div data-role="fieldcontain">
  142.                     <label for="slider">音量：</label>
  143.                     <input type="range" name="slider" id="slider" min="0" max="100" value="0" />
  144.                 </div>
  145.             </div>
  146.             <div data-role="footer">
  147.                 <h1>页面脚注</h1>
  148.             </div>
  149.         </div>
  150.     </body>
  151. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.                 <hr />
  59.                 <br />
  60.                 <font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
  61.                 <div data-role="collapsible-set">
  62.                     <div data-role="collapsible">
  63.                         <h3>标题1</h3>
  64.                         <p>内容1</p>
  65.                     </div>
  66.                     <div data-role="collapsible" data-collapsed="true">
  67.                         <h3>标题2</h3>
  68.                         <p>内容2</p>
  69.                     </div>
  70.                     <div data-role="collapsible" data-collapsed="true">
  71.                         <h3>标题3</h3>
  72.                         <p>内容3</p>
  73.                     </div>
  74.                 </div>
  75.                 <hr />
  76.                 <br />
  77.                 <font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
  78.                 <div data-role="fieldcontain">
  79.                     <label for="textinput">请输入您的帐号:</label>
  80.                     <input type="text" name="textinput" id="textinput" value="" />
  81.                 </div>
  82.                 <hr />
  83.                 <br />
  84.                 <font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
  85.                 <div data-role="fieldcontain">
  86.                     <label for="passwordinput">请输入您的密码:</label>
  87.                     <input type="password" name="passwordinput" id="passwordinput" value="" />
  88.                 </div>
  89.                 <hr />
  90.                 <br />
  91.                 <font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
  92.                 <div data-role="fieldcontain">
  93.                     <label for="textarea">文本区域：</label>
  94.                     <textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
  95.                 </div>
  96.                 <hr />
  97.                 <br />
  98.                 <font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
  99.                 <div data-role="fieldcontain">
  100.                     <label for="selectmenu" class="select">选项：</label>
  101.                     <select name="selectmenu" id="selectmenu">
  102.                         <option value="option1">option1</option>
  103.                         <option value="option2">option2</option>
  104.                         <option value="option3">option3</option>
  105.                     </select>
  106.                 </div>
  107.                 <hr />
  108.                 <br />
  109.                 <font style="color:red;font-size:24px;"><b>复选框控件</b></font>
  110.                 <div data-role="fieldcontain">
  111.                     <fieldset data-role="controlgroup">
  112.                         <legend>请选择</legend>
  113.                         <input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
  114.                         <label for="checkbox1">选择1</label>
  115.                         <input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
  116.                         <label for="checkbox2">选择2</label>
  117.                         <input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
  118.                         <label for="checkbox3">选择3</label>
  119.                     </fieldset>
  120.                 </div>
  121.                 <hr />
  122.                 <br />
  123.                 <font style="color:red;font-size:24px;"><b>单选框控件</b></font>
  124.                 <div data-role="fieldcontain">
  125.                     <fieldset data-role="controlgroup" data-type="horizontal">
  126.                         <legend>请选择</legend>
  127.                         <input type="radio" name="radio1" id="radio1" value="1" />
  128.                         <label for="radio1">男</label>
  129.                         <input type="radio" name="radio1" id="radio2" value="0" />
  130.                         <label for="radio2">女</label>
  131.                     </fieldset>
  132.                 </div>
  133.                 <hr />
  134.                 <br />
  135.                 <font style="color:red;font-size:24px;"><b>按钮控件</b></font>
  136.                 <a href="http://www.showtp.com" data-role="button">按钮</a>
  137.                 <!--上面这里其实也是可以跳转到指定的#page控件里面去的-->
  138.                 <hr />
  139.                 <br />
  140.                 <font style="color:red;font-size:24px;"><b>滑动控件</b></font>
  141.                 <div data-role="fieldcontain">
  142.                     <label for="slider">音量：</label>
  143.                     <input type="range" name="slider" id="slider" min="0" max="100" value="0" />
  144.                 </div>
  145.             </div>
  146.             <div data-role="footer">
  147.                 <h1>页面脚注</h1>
  148.             </div>
  149.         </div>
  150.     </body>
  151. </html>

核心代码如下所示：

展示效果如下所示：

12.....翻转开关控件，代码如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!--宽高禁缩放 -->
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  7.         <!--类webapp-->
  8.         <meta name="apple-mobile-web-app-capable" content="yes">
  9.         <!--状态条 -->
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.         <!--电话号码不是链接 -->
  12.         <meta name="format-detection" content="telephone=no">
  13.         <title>jQuery Mobile Web 应用程序</title>
  14.         <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
  15.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  16.         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  17.     </head>
  18.     <body>
  19.         <div data-role="page" id="page1">
  20.             <div data-role="header">
  21.                 <h1>header</h1>
  22.             </div>
  23.             <div data-role="content">
  24.                 <font style="color:red;font-size:24px;"><b>布局网格</b></font>
  25.                 <div class="ui-grid-b">
  26.                     <div class="ui-block-a">区块1</div>
  27.                     <div class="ui-block-b">区块2</div>
  28.                     <div class="ui-block-c">区块3</div>
  29.                     <div class="ui-block-a">区块4</div>
  30.                     <div class="ui-block-b">区块5</div>
  31.                     <div class="ui-block-c">区块6</div>
  32.                 </div>
  33.                 <hr />
  34.                 <br />
  35.                 <font style="color:red;font-size:24px;"><b>列表视图格</b></font>
  36.                 <br />
  37.                 <br />
  38.                 <ul data-role="listview">
  39.                     <li>
  40.                         <a href="">
  41.                             <h3>页面1</h3>
  42.                             <p>ym1</p>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="">
  47.                             <h3>页面2</h3>
  48.                             <p>ym2</p>
  49.                         </a>
  50.                     </li>
  51.                     <li>
  52.                         <a href="">
  53.                             <h3>页面3</h3>
  54.                             <p>ym3</p>
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.                 <hr />
  59.                 <br />
  60.                 <font style="color:red;font-size:24px;"><b>可折叠区块</b></font>
  61.                 <div data-role="collapsible-set">
  62.                     <div data-role="collapsible">
  63.                         <h3>标题1</h3>
  64.                         <p>内容1</p>
  65.                     </div>
  66.                     <div data-role="collapsible" data-collapsed="true">
  67.                         <h3>标题2</h3>
  68.                         <p>内容2</p>
  69.                     </div>
  70.                     <div data-role="collapsible" data-collapsed="true">
  71.                         <h3>标题3</h3>
  72.                         <p>内容3</p>
  73.                     </div>
  74.                 </div>
  75.                 <hr />
  76.                 <br />
  77.                 <font style="color:red;font-size:24px;"><b>文本输入区块</b></font>
  78.                 <div data-role="fieldcontain">
  79.                     <label for="textinput">请输入您的帐号:</label>
  80.                     <input type="text" name="textinput" id="textinput" value="" />
  81.                 </div>
  82.                 <hr />
  83.                 <br />
  84.                 <font style="color:red;font-size:24px;"><b>密码输入区块</b></font>
  85.                 <div data-role="fieldcontain">
  86.                     <label for="passwordinput">请输入您的密码:</label>
  87.                     <input type="password" name="passwordinput" id="passwordinput" value="" />
  88.                 </div>
  89.                 <hr />
  90.                 <br />
  91.                 <font style="color:red;font-size:24px;"><b>文本域输入区块</b></font>
  92.                 <div data-role="fieldcontain">
  93.                     <label for="textarea">文本区域：</label>
  94.                     <textarea cols="40" rows="10" name="textarea" id="textarea"></textarea>
  95.                 </div>
  96.                 <hr />
  97.                 <br />
  98.                 <font style="color:red;font-size:24px;"><b>选择菜单控件</b></font>
  99.                 <div data-role="fieldcontain">
  100.                     <label for="selectmenu" class="select">选项：</label>
  101.                     <select name="selectmenu" id="selectmenu">
  102.                         <option value="option1">option1</option>
  103.                         <option value="option2">option2</option>
  104.                         <option value="option3">option3</option>
  105.                     </select>
  106.                 </div>
  107.                 <hr />
  108.                 <br />
  109.                 <font style="color:red;font-size:24px;"><b>复选框控件</b></font>
  110.                 <div data-role="fieldcontain">
  111.                     <fieldset data-role="controlgroup">
  112.                         <legend>请选择</legend>
  113.                         <input type="checkbox" name="checkbox1" id="checkbox1" class="custom" value="" />
  114.                         <label for="checkbox1">选择1</label>
  115.                         <input type="checkbox" name="checkbox1" id="checkbox2" class="custom" value="" />
  116.                         <label for="checkbox2">选择2</label>
  117.                         <input type="checkbox" name="checkbox1" id="checkbox3" class="custom" value="" />
  118.                         <label for="checkbox3">选择3</label>
  119.                     </fieldset>
  120.                 </div>
  121.                 <hr />
  122.                 <br />
  123.                 <font style="color:red;font-size:24px;"><b>单选框控件</b></font>
  124.                 <div data-role="fieldcontain">
  125.                     <fieldset data-role="controlgroup" data-type="horizontal">
  126.                         <legend>请选择</legend>
  127.                         <input type="radio" name="radio1" id="radio1" value="1" />
  128.                         <label for="radio1">男</label>
  129.                         <input type="radio" name="radio1" id="radio2" value="0" />
  130.                         <label for="radio2">女</label>
  131.                     </fieldset>
  132.                 </div>
  133.                 <hr />
  134.                 <br />
  135.                 <font style="color:red;font-size:24px;"><b>按钮控件</b></font>
  136.                 <a href="http://www.showtp.com" data-role="button">按钮</a>
  137.                 <!--上面这里其实也是可以跳转到指定的#page控件里面去的-->
  138.                 <hr />
  139.                 <br />
  140.                 <font style="color:red;font-size:24px;"><b>滑动控件</b></font>
  141.                 <div data-role="fieldcontain">
  142.                     <label for="slider">音量：</label>
  143.                     <input type="range" name="slider" id="slider" min="0" max="100" value="0" />
  144.                 </div>
  145.                 <hr />
  146.                 <br />
  147.                 <font style="color:red;font-size:24px;"><b>翻转开关控件</b></font>
  148.                 <div data-role="fieldcontain">
  149.                     <label for="flipswitch">选择：</label>
  150.                     <select name="flipswitch" id="flipswitch" data-role="slider">
  151.                         <option value="off">关</option>
  152.                         <option value="on">开</option>
  153.                     </select>
  154.                 </div>
  155.             </div>
  156.             <div data-role="footer">
  157.                 <h1>页面脚注</h1>
  158.             </div>
  159.         </div>
  160.     </body>
  161. </html>

核心代码如下所示：

展示效果如下所示：

我们在实际的开发的时候，有上面这些控件几乎都没什么问题的了，只需将他们用form包含进来即可实现效果，嘻嘻

夺命雷公狗---微信开发58----微网站之jquery_mobile之控件介绍的更多相关文章

  1. 夺命雷公狗---微信开发57----微网站之jquery_mobile之入门案例

    这节课我们主要用到到jquery_mobile来实现一个点电影播放网站 jquery_mobile(简称JQM)其实就是基于jquery开发出来的一套移动端框架,适应移动用户端市场对浏览与体验从而进一 ...

  2. 夺命雷公狗---微信开发62----所以memcache对access_token进行全局缓存优化

    公众号调用接口并不是无限制的,为了防止公众号的程序错误而引发微信服务器负载异常,默认情况下, 每个公众号调用接口都不能超过一定限制,当超过一定限制时,调用对应接口会收到错误信息,造成调用失败. 我们也 ...

  3. 夺命雷公狗---微信开发17----自定义菜单的事件推送，响应菜单的CLICK

    废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "com ...

  4. 夺命雷公狗---微信开发59----在线点播电影网1之ckplayer播放器

    我们节课程就要开始写一个小项目了,这项目主要是写一个在线点播电影影网的,我们用到的播放器是ckplayer ckplayer基本介绍: ckplayer的全称是:超酷flv播放器,他是一款用于网页上播 ...

  5. 夺命雷公狗---微信开发55----微信js-sdk接口开发（2）接口功能介绍之签名算法

    我们JS-SDK里面其实有不少的接口 startRecord---录音 stopRecord---停止录音 playVoice---播放 pauseVoice---暂停播放 uploadImage-- ...

  6. 夺命雷公狗---微信开发56----微信js-sdk接口开发（3）所有接口功能

    按照上节课程里面的介绍,我们可以先将刚才在signatrue.php里获取到的信息填写进jssdk.htm模版文件里填写各个权限的参数 jssdk.htm代码如下: <!DOCTYPE html ...

  7. 夺命雷公狗---微信开发54----微信js-sdk接口开发（1）之快速入门

    js-sdk基本介绍 除去服务号的九大接口外,微信提供了JS-SDK接口,所谓JS-SDK接口也就是在网页中使用javascript来更改网页设置, (比如隐藏右上角的菜单)获取用户状态(比如地理位置 ...

  8. 夺命雷公狗---微信开发53----网页授权（oauth2.0）获取用户基本信息接口（3）实现世界留言版

    前面两节课我们讲的是base型的授权了,那么现在我们开始Userinfo型授权, 先来看下我们的原理图 我们这节课来做一个 世界留言版 系统 1..首先我还是在微信测试平台那里设置好回调页面的域名 2 ...

  9. 夺命雷公狗---微信开发51----网页授权（oauth2.0）获取用户基本信息接口（1）

    如果用户在微信客户端访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,从而实现业务逻辑. 一般我们用来“数据采集”,“市场调查”,“投票”,只要授权了第三方网页,微信用户无需注册就可 ...

随机推荐

  1. C/C++获取系统时间

    C/C++获取系统时间需要使用Windows API,包含头文件"windows.h". 系统时间的数据类型为SYSTEMTIME,可以在winbase.h中查询到如下定义: ty ...

  2. JS懒加载

    4.如何使用js懒加载图片       a.懒加载图片是基于jquery.js的,所以: <script src="jquery.js" type="text/ja ...

  3. Solr4+IKAnalyzer的安装配置

    一.下载Solr4.10.2 我们以Windows版本为例,solr-4.10.2.zip是目前最新版本,下载地址: http://www.apache.org/dyn/closer.cgi/luce ...

  4. Maven实战（一）安装与配置

    1. 简介 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 如果你已经有十次输入同样的Ant targets来编译你的代码.jar或者w ...

  5. ios证书

    内容提要: 安装app时提示 “无法下载应用,此时无法安装“XXX””.我遇到过多次是由于ios的app出现证书问题.本篇文章讲解用ios证书制作过程,以及每个步骤的解释. 正文: Xcode签名至少 ...

  6. HTML页引用CSS

    方法1 使用import 方法引用CSS <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...

  7. @MyBatis中的if...else...

    <select id="selectSelective" resultMap="xxx" parameterType="xxx"> ...

  8. POJ 1028解答

    #include <iostream>#include <cstdio>#include <cmath>#include <stack>#include ...

  9. Linux中mod相关的命令 内核模块化 mod相关命令都是用来动态加载内核模块/驱动程序模块

    Linux中mod相关的命令 内核模块化   mod相关命令都是用来动态加载内核模块/驱动程序模块 http://baike.baidu.com/link?url=lxiKxFvYm-UfJIxMjz ...

  10. linux sed命令参数及用法详解

    linux sed命令参数及用法详解 http://blog.csdn.net/namecyf/article/details/7336308 1. Sed简介 sed 是一种在线编辑器,它一次处理一 ...