夺命雷公狗---微信开发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包含进来即可实现效果，嘻嘻

时间： 2024-10-10 02:11:10

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

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

这节课我们主要用到到jquery_mobile来实现一个点电影播放网站 jquery_mobile(简称JQM)其实就是基于jquery开发出来的一套移动端框架,适应移动用户端市场对浏览与体验从而进一步的提升 jquery_mobile控件介绍 jquery_mobile的语法将各个控件(widget)以data-role的形式定义好样式,使用时直接引用,则可调用适合手机页面显示的样式. juqery_mobile的常用控件如下所示: 我们废话不多说,开始写第一个jquery_mobile的模版

夺命雷公狗---微信开发23----客服消息接口基础和推送文本

我们这边课程里面一共用到了三个文件,分别是WeChat.class.php和common.php以及index.php 我们在写这个功能之前也要学会查手册,手册我们可以在微信开发这里找到,如下所示: 点击进去后我们将会看到客服接口,我们可以点击下进去看看里面有什么动动 这里有一个发送文本消息的,我们点击进去看下 这里很明显就看到文本消息是通过一个json数据来进行实现的,废话不多说,开工 这里我们先来写一个WeChat.php的文件,这里作用主要适用于封装一个CURL上传类的,代码如下所示: <

夺命雷公狗---微信开发27----客服消息接口基础和推送图文消息

按照25课的套路在改下index.php即可实现,代码如下所示: <?php /** * wechat php test */ //define your token require_once "common.php"; //这里是引入curl发送函数的类 require_once 'WeChat.class.php'; define("TOKEN", "twgdh"); //这里让这个类继承了curl发送参数的类 class wechat

夺命雷公狗---微信开发39----微信语言识别接口1

语音识别接口的基本介绍 注意: 由于客户端缓存,开发者开启或者关闭语音识别功能,对新关注者立即生效,对已关注用户需要24小时生效,开发者可以从新关注帐号进行测试. 我们可以在测试号下方的体验接口权限表里面找到“接收语音识别结果”,如下图所示 现在这里是显示的关闭,就是开启,如果想使用,那么就必“关闭”. 点击一下开启后,他就会问你是否关闭,所以这里的意思是相反的,如图所示: 然后再点击一下确定即可关闭. 不过我们现在要对他进行开发所以这里就要显示关闭这两个字,然后点击“接收语音识别结果”即可进入

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

废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "common.php"; define("TOKEN", "twgdh"); $wechatObj = new wechatCallbackapiTest(); //当接入成功后,请注销这句话,否则,会反复验证. //$wechatObj->valid();

夺命雷公狗---微信开发47----获取用户地理位置接口（2）

我们现在要做的是查找距离最近的“肯德基”,我们需要通过百度提供的LBS云服务定位距离您最近的肯德基,该程序需要到LBS后台进行相关设置,然后在完成程序 用户在客户端输入“肯德基”公众号就会自动回复距离用户最近的”肯德基“ 废话不多说,我们先到http://developer.baidu.com/里面找到LBS云------再到服务接口--------再到LBS云,如下图所示: 点击进来后,我们首先要获取一个密钥, 然后出了红色框部分填下数据即可,别的地方都不用改,直接提交即可 上面的0.0.0.

夺命雷公狗---微信开发26----客服消息接口基础和推送视频

我们按照上一课的套路继续改写下index.php即可实现,代码如下所示: <?php /** * wechat php test */ //define your token require_once "common.php"; //这里是引入curl发送函数的类 require_once 'WeChat.class.php'; define("TOKEN", "twgdh"); //这里让这个类继承了curl发送参数的类 class we

夺命雷公狗---微信开发25----客服消息接口基础和推送语音

按照23课的部署,我们再进行改造下WeChat.class.php文件,将get_token.php的代码封装到WeChat类中去,WeChat.class.php代码如下: <?php class WeChat{ //我把请求内容封装到类里面 protected function http_request($url, $data=null){ //我们使用curl函数 //初始化 $ch = curl_init(); //设置变量 curl_setopt($ch, CURLOPT_URL,$u

夺命雷公狗---微信开发60----在线点播电影网2之电影网整体完工

我们上一节课介绍了电影网的核心部分ckplayer播放器,那么我们按照上一节课的基础上来完成这个电影网. 我们先来穿件一个index.html,代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>夺命雷公狗之电影在线点播网</title> <!--宽高禁缩放 --> <meta name="viewpor