Jquery mobile选择框 开关

1.选择框：select 可以设置data-icon="plus"图标及位置data-iconpos="left",

定义控件组<fieldset data-role="controlgroup" data-type="horizontal">

data-native-menu="false"此属性将会把选择框弹出方式，默认是true下拉显示，但此属性与jquery版本有关系

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery Mobile-网页基本结构</title>
        <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.css" />
        <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> //select弹出框与jquery版本有关
        <script type="text/javascript" src="../js/jquery.mobile-1.4.5.js" ></script>
        
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    </head>
    <body>
        <div data-role="page" data-theme="a">
            <div data-role="header"><h1>选择菜单</h1></div>
            <div class="ui-content" rolel="main">
                <form target="#">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>中国->美国</legend>
                        <label for="airport">机场</label>
                        <select name="airport" id="airport" data-mini="true" data-native-menu="false">
                            <option>请选择...</option>
                                <option value="PEK">北京首都国际机场</option>
                                <option value="PVG">上海浦东国际机场</option>
                                <option value="SHA">上海虹桥国际机场</option>
                                <option value="CAN">广州白云国际机场</option>
                                <option value="CTU">成都双流国际机场</option>
                        </select>
                        <label for="destination">到达</label>
                        <select name="destination" id="destination" data-mini="true">
                            <option value="">目的地</option>
                            <option value="JFK">纽约肯尼迪国际机场</option>
                            <option value="LGA">纽约拉瓜迪亚国际机场</option>
                            <option value="LAX">洛杉机国际机场</option>
                        </select>
                    </div>
                </fieldset>
                <fieldset data-role="fieldcontain">
                    <label for="airport2">机场</label>
                    <select name="airport2" id="airport2" data-native-menu="false">
                        <option value="PEK">北京</option>
                        <option value="PVG">上海</option>
                    </select>
                </fieldset>
                </form>
            </div>
        </div>
    </body>
</html>

2. 开关：data-role="flipswitch"一种 以checkbox方式、另一种select方式

<div data-role="main" class="ui-content">
    <form>
        <div class="ui-field-contai">
            <label for="yes_no">功能激活</label>
            <input type="checkbox" data-role="flipswitch" name="yes_no" id="yes_no">
            
            <label for="yes-no">功能激活</label>
            <input type="checkbox" data-role="flipswitch" data-no-text="是" data-off-text="否" name="yes-no" id="yes-no" checked="">
            
            <label for="yesno">开关</label>
            <select data-role="flipswitch" name="yesno" id="yesno">
                <option>否</option>
                <option selected="">是</option>
            </select>
        </div>
    </form>
  </div>

 

posted @ 2016-07-13 23:01  xszjk  阅读(400)  评论(0)    收藏  举报