Jquery Mobile滑动块及列表

1.滑动块: <input type="range" value="3" min="1" max="12" step="1"> 类型定义滑动块，当前值，最小值，最大值，步长值。

class="ui-hidden-accessible" 隐藏标签文本, 区间滑动块data-role="rangeslider" ,data-theme主题样式，data-track-theme轨迹样式。

<!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">
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>滑动块</h1>
            </div>
            <div class="ui-content" role="main">
                <form target="#">
                    <label for="month" class="ui-hidden-accessible">月份</label>
                    <input type="range" name="month" id="month" value="3" min="1" max="12" data-theme="b" data-track-theme="a">
                    <label for="years">年代</label>
                    <input type="range" name="years" id="years" value="2010" min="1940" max="2050" step="10" disabled>
                    <div data-role="rangeslider" data-mini="true">
                        <label for="min_year">年</label>
                        <input type="range" name="min_year" id="min_year" value="1996" min="1980" max="2020">
                        <label for="max_year">年</label>
                        <input type="range" name="max_year" id="max_year" value="2012" min="1980" max="2020">
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

 2.列表视图：data-rolel="listview" <ul> 无序 <ol>有序的，data-inset="true"此属性会对列表四周加边距;

<li><a>连接会在右边自动加向右箭头按钮，更变默认图标<li data-icon="home">;

<li data-icon="home">  //改变默认图标
    <a href="#beijing" data-transition="slide"> //链接锚点，过渡效果
        <img src="../images/8.jpg" alt="主页">  //缩略图，如加属性class="ui-li-icon"会变成图标
        <h2>主页</h2>    //主题
        <p>你正在访问我的网站</p>  //内容
        <p class="ui-li-aside">2016-7-11</p>  //显示在右上角文字 换成<span clas="ui-li-count">96.6</span>会在右上角显示计数但不可编辑
   </a>
</li>

<li>中的分割符data-role="list-divider" 自动按首字符分割<ul data-autodividers="true">

自动过滤<ul data-filter="true" data-filter-placeholder="搜索..."> 开启属性

<!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">
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header">
                <h1>列表视图</h1>
            </div>
            <div class="ui-content" role="main">
                <ul data-role="listview" data-inset="true">
                    <li data-role="list-divider">我的网站</li>
                    <li data-icon="home">
                        <a href="#beijing" data-transition="slide">
                            <img src="../images/8.jpg" alt="主页"> 
                            <h2>主页</h2>
                            <p>你正在访问我的网站</p>
                            <p class="ui-li-aside">2016-7-11</p>
                        </a></li>
                    <li data-icon="gear">
                        <a href="#shenyang" data-transition="slide">
                        <img src="../images/8.jpg" alt="配置" class="ui-li-icon">
                        配置
                        <span class="ui-li-count">96.6</span></a></li>
                    <li><a href="#suzhou" data-transition="slide">帮助</a></li>
                    <li data-role="list-divider">中国</li>
                    <li><a href="#">北京</a></li>
                    <li><a href="#">上海</a></li>
                </ul>
                <ul data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="搜索机场...">
                    <li><a href="#">PEK北京</a></li>
                    <li><a href="#">PVGh上海</a></li>
                    <li><a href="#">SHA虹桥</a></li>
                    <li><a href="#">LGA纽约</a></li>
                    <li><a href="#">SCN萨尔布</a></li>
                </ul>
            </div>
        </div>
        <div data-role="page" id="beijing">
            <div data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
                <h1>北京</h1>
            </div>
            <div calss="ui-content" role="main">
                <div>北京故宫</div>
                <div>
                    <img src="../images/ajax-loader.gif" alt="北京">
                </div>
            </div>
        </div>
    </body>
</html>

 

posted @ 2016-07-11 22:07  xszjk  阅读(430)  评论(0)    收藏  举报