Jquery mobile收放及面板组件

1. 收放UI组件：data-role="collapsible", 收缩图标data-collapsed-icon="carat-d",展开图标data-expanded-icon="carat-u"

默认展开data-collapsed="false"

<div data-role="page" id="home">
            <div data-role="header">
                <h1>列表视图</h1>
            </div>
            <div class="ui-content" role="main">
                <div data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-collapsed="false">
                    <h4>中国古典四大名著</h4>
                    <p>三国演义、红楼梦、水浒、西游记</p>
                </div>
                <fieldset data-role="collapsible">
                    <legend>客户满意度调查</legend>
                    <div data-role="controlgroup">
                        <label for="static-5">非常满意</label>
                        <input type="radio" id="static-5" name="static" value="5">
                        <label for="static-4">满意</label>
                        <input type="radio" id="static-4" name="static" value="4">
                        <label for="static-3">一般</label>
                        <input type="radio" id="static-3" name="static" value="3">
                        <label for="static-2">不满意</label>
                        <input type="radio" id="static-2" name="static" value="2">
                        <label for="static-1">非常不满意</label>
                        <input type="radio" id="static-1" name="static" value="1">
                    </div>
                    <label for="comments">简短留言</label>
                    <textarea id="comments" name="comments"></textarea>
                    <a href="#" data-role="button" data-inline="true">发送</a>
                </fieldset>
            </div>
        </div>

2.手风琴:收放组件外面是一个组件data-role="collapsibleset",主题<h?>内容<p>标签。

<div data-role="page" id="home">
            <div data-role="header">
                <h1>可收放的UI组件</h1>
            </div>
            <div data-role="collapsibleset" data-theme="b" data-content-theme="a">
                <div data-role="collapsible" data-inset="false">
                    <h4>中国古典四大名著</h4>
                    <p>三国演义、红楼梦、水浒、西游记</p>
                </div>
                <div data-role="collapsible" data-inset="false">
                    <h4>元杂剧四大悲剧</h4>
                    <p>窦娥冤、汉宫秋、梧桐雨、赵氏孤儿</p>
                </div>
                <div data-role="collapsible" data-inset="false">
                    <h4>落士比亚四大喜剧</h4>
                    <p>威尼斯商人、仲夏夜之梦、皆大欢喜、第十二夜</p>
                </div>
                <div data-role="collapsible" data-inset="false">
                    <h4>莎士比业四大悲剧</h4>
                    <p>哈姆雷特、马克白、李尔王、奥赛罗</p>
                </div>
            </div>
        </div>

3.面板：data-role="panel"与header、footer同层次，打开面板默认是左边驶入data-position="right"改变位置

运行方式：data-display有三个值:默认reveal、overlay、push

reveal:表示面板在显示之前已经定位在边缘，当屏幕向左向右移动时，逐渐显示出来。

overlay:表示当前屏幕不动，面板从左或右移入，局部覆盖当前屏幕。

push:表示面板在移动过程中，推动当前屏幕移动。

外部面板初始化使用$(document).on("pagecreate",function(){});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery Mobile-网页基本结构</title>
        <script type="text/javascript" src="../js/jquery-2.2.3.min.js" ></script>
        <script type="text/javascript" src="../js/jquery.mobile-1.4.5.js" ></script>
        <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.css" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <style>
            .fullWidthImg{
                width:100%;
                height:auto;
            }
        </style>
        <script>
            $(document).on("pagecreate",function(){
                $("[data-role='listview']").listview();
                $("[data-role='panel']").panel();
            });
        </script>
    </head>
    <body>
        <div data-role="page" data-theme="a" id="myPanel">
            <div data-role="header" data-position="fixed">
                <a href="#leftPanel" data-icon="bars" data-iconpos="notext">主菜单</a>
                <h1>城市旅游</h1>
            </div>
            <div class="ui-content" rolel="main">
                <img src="../images/8.jpg" class="fullWidthimg" >
                <a href="#myPage2" data-role="button">前往-->上海</a>
            </div>
        </div>
        <div data-role="page" data-theme="a" id="myPage2">
            <div data-role="header" data-position="fixed">
                <a href="#leftPanel" data-icon="bars" data-iconpos="notext">主菜单</a>
                <h1>城市旅游</h1>
            </div>
            <div class="ui-content" rolel="main">
                <img src="../images/8.jpg" class="fullWidthimg" >
                <a href="#myPage2" data-role="button">前往-->沈阳</a>
            </div>
        </div>
        <div data-role="panel" id="leftPanel" data-theme="a">
            <ul data-role="listview" data-inset="false">
                <li><a href="#">城市简介</a></li>
                <li><a href="#">主要景点</a></li>
                <li><a href="#">民族人文</a></li>
                <li><a href="#">宾馆酒店</a></li>
                <li><a href="#">特色小吃</a></li>
                <li><a href="#">公共交通</a></li>
                <li><a href="#">铁路</a></li>
                <li><a href="#">航空</a></li>
            </ul>
        </div>
    </body>
</html>

 

posted @ 2016-07-12 22:43  xszjk  阅读(478)  评论(0)    收藏  举报