jquery mobile基礎

時間 2019-11-16

原文原文鏈接

jquery mobile用來開發web app比較不錯。這裏本身整理了一些jquery mobile的基礎以下。jquery

jquery mobile的頁面結構：

<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>這是頭部</h1>
    </div>
    <div role="main">
        <p>最近好麼</p>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>這是尾部</h1>
    </div>
</div>
//注：其中的data-position是給頭部和尾部提供位置設置。

2.jquery mobile翻頁web

<a href="#page2" data-transition="fide">to the second</a>
      <a href="#page2" >to the second</a> //加上以上的連接就能夠翻頁，固然對應要有id爲page1的頁面，這裏面有不少的方式能夠經過data-transition來設置。

3.button
jquery的button有三種寫法：markdown

<button>按鈕</button>
        <input type="button" value="按鈕">
        <a class="ui-btn ui-shadow">按鈕</a>
        <a class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext" >按鈕</a>

button組：橫向和縱向app

<div data-role="controlgroup">
            <a href="#" class="ui-btn ">按鈕</a>
            <a href="#" class="ui-btn ">按鈕</a>
            <a href="#" class="ui-btn ">按鈕</a>
        </div>
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" class="ui-btn ">按鈕</a>
            <a href="#" class="ui-btn ">按鈕</a>
            <a href="#" class="ui-btn ">按鈕</a>
        </div>

4.單選框和複選框ide

<label>
            <input type="checkbox">哈啊
        </label>

        <fieldset data-role="controlgroup" >
            <label>
                <input type="checkbox">apple
            </label>
            <label>
                <input type="checkbox">sumsung
            </label>
            <label>
                <input type="checkbox">huawei
            </label>
            <label>
                <input type="radio" name="man1">man
            </label>
            <label>
                <input type="radio" name="man1">woman
            </label>
        </fieldset>

5.展開頁面ui

<div data-role="collapsible" data-collapsed="false">
            <h4>heading</h4>
            <p>我真展開了麼</p>
        </div>

        <div data-role="collapsible" data-content-theme="false">
            <h4>heading</h4>
            <p>我真展開了麼</p>
        </div>
        <div data-role="collapsible" data-content-theme="true">
            <h4>heading</h4>
            <ul data-role="listview">
                <li><a>1111</a></li>
                <li><a>2</a></li>
                <li><a>112312312</a></li>
                <li><a>12111</a></li>
            </ul>
        </div>
//data-collapsed設置是否有邊框。
//data-content-theme設置是否默認展開。

6.導航欄this

<div data-role="navbar">
            <ul>
                <li><a href="#" class="ui-btn-active">haha</a> </li>
                <li><a href="#" class="ui-btn-active">haha2</a> </li>
                <li><a href="#" class="ui-btn-active">haha3</a> </li>
                <li><a href="#" class="ui-btn-active">haha4</a> </li>
                <li><a href="#" class="ui-btn-active">haha5</a> </li>
            </ul>
        </div>
        <div data-role="navbar">
            <ul>
                <li><a href="#" class="ui-btn-active" data-icon="grid">haha</a> </li>
                <li><a href="#" class="ui-btn-active" data-icon="star">haha2</a> </li>
                <li><a href="#" class="ui-btn-active" data-icon="gear">haha3</a> </li>
                <li><a href="#" class="ui-btn-active" data-icon="gear">haha4</a> </li>
                <li><a href="#" class="ui-btn-active" data-icon="gear">haha5</a> </li>
            </ul>
        </div>

7.popup彈出窗口
後面那一個是點擊圖片全屏放大的一個效果。spa

<a href="#pp" data-rel="popup" class="ui-btn">彈出窗口</a>

        <div data-role="popup" id="pp">
            <p>這是一個彈出窗口</p>
        </div>

        <a href="#pop" data-rel="popup" data-position-to="window" data-transition="fade">
            <img src="thistime.png" class="pupphoto" style="width:20%">
        </a>

        <div data-role="popup" id="pop">
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">close</a>
            <img src="thistime.png" style="max-height:512px;">
        </div>

8.選擇窗code

<div class="ui-field-contain">
            <select data-iconpos="left" name="select-native-1">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>

9.十分強大的篩選機制orm

<ul data-role="listview" data-filter="true" data-inset="true">
            <li><a href="#">a</a> </li>
            <li><a href="#">b</a> </li>
            <li><a href="#">c</a> </li>
            <li><a href="#">d</a> </li>
        </ul>


        <form class="ui-filterable">
            <input id="autoinput" data-type="search">
        </form>
        <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput" data-inset="true">
            <li><a href="#">a</a> </li>
            <li><a href="#">b</a> </li>
            <li><a href="#">c</a> </li>
            <li><a href="#">d</a> </li>
        </ul>


        <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
            <li><a href="#">a</a> </li>
            <li><a href="#">b</a> </li>
            <li><a href="#">c</a> </li>
            <li><a href="#">d</a> </li>
            <li><a href="#">deaf</a> </li>
            <li><a href="#">fer</a> </li>
            <li><a href="#">c</a> </li>
            <li><a href="#">d</a> </li>
            <li><a href="#">2</a> </li>
            <li><a href="#">b</a> </li>
            <li><a href="#">c</a> </li>
            <li><a href="#">d</a> </li>
        </ul>

10.柵格處理
一共能夠分紅2-5個列，能夠根據柵格自行選擇。

<div class="ui-grid-a">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-a">
                    hello a
                </div>
                <div class="ui-bar ui-bar-b">
                    hello b
                </div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-a">
                    hello a
                </div>
                <div class="ui-bar ui-bar-b">
                    hello b
                </div>
            </div>
        </div>
        <div class="ui-grid-solo">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-a">
                    hello a
                </div>
                <div class="ui-bar ui-bar-b">
                    hello b
                </div>
            </div>
        </div>