zoukankan      html  css  js  c++  java
  • jQueryMobile控件之ListView

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Title</title>
        <script src="../jquery-2.2.4.min.js"></script>
        <script src="jquery.mobile-1.4.5.min.js"></script>
        <link type="text/css" rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    </head>
    <body>
    <div data-role="page">
        <div data-role="header" data-position="fixed"><h1>这是头部</h1></div>
        <div role="main" class="ui-content">
            <!--普通listView-->
            <ul data-role="listview">
                <li><a>A</a></li>
                <li><a>B</a></li>
                <li><a>C</a></li>
                <li><a>D</a></li>
            </ul>
    
            <br/>
    
            <!--具有搜索功能的listView-->
            <ul data-role="listview" data-filter="true" >
                <li><a>A</a></li>
                <li><a>B</a></li>
                <li><a>C</a></li>
                <li><a>D</a></li>
            </ul>
            <br>
    
            <!--过滤搜索隐藏列表-->
            <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search Alphabet">
                <li><a>A</a></li>
                <li><a>B</a></li>
                <li><a>C</a></li>
                <li><a>D</a></li>
            </ul>
    
            <br/>
    
            <!--过滤搜索隐藏列表,另一种写法-->
            <form class="ui-filterable">
                <input id="auto-input" data-type="search" placeholder="Search Alphabet">
            </form>
            <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search Alphabet"
                data-input = '#auto-input'>
                <li><a>A</a></li>
                <li><a>B</a></li>
                <li><a>C</a></li>
                <li><a>D</a></li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>这是底部</h1>
        </div>
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    [Luogu] 封锁阳光大学
    [other] Div
    [USACO11DEC] 牧草种植Grass Planting
    [Luogu] 仓鼠找sugar
    [USACO15DEC]最大流Max Flow
    [noip-2013] 货车运输
    [模板] 普通平衡树
    [Luogu] 树链剖分
    [ZJOI2008] 树的统计Count
    大组合数取模
  • 原文地址:https://www.cnblogs.com/yqlog/p/5596501.html
Copyright © 2011-2022 走看看