jQuery

jQuery Mobile

认识 jQuery Mobile

1、jQuery Mobile:

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 给主流移动平台带来 jQuery 核心库。与 jQuery 核心库一样，你不需要安装任何东西；只需将 *.js 和 *.css 文件直接包含到你的 web 页面中即可。

2、jQuery Mobile 事件:

触摸事件 - 当用户触摸屏幕时触发

滑动事件 - 当用户上下滑动时触发

定位事件 - 当设备水平或垂直翻转时触发

页面事件 - 当页面显示，隐藏，创建，加载或未加载时触发

3、官网：

https://jquerymobile.com

4、适配屏幕

5、布局：

data-role="header" content footer

切换样式 data-transition="slidedown"

jQuery Mobile 样式

Grid，Listview，Navbar，Popup，Selectmenu，Theming

Grid

ui-grid-c 表示有三列

ui-block-a 表示第一列

ui-grid-solo 只显示一列

<div class="ui-grid-b">
    <div class="ui-block-a">
        <div class="ui-bar ui-bar-a ">A1</div>
    </div>
    <div class="ui-block-b">
        <div class="ui-bar ui-bar-a">A1</div>
    </div>
</div>
<div class="ui-grid-solo">
    <div class="ui-block-a"><input type="button"/></div>
</div>

ListView

filter 允许过滤

inset 允许插入

<ul data-role="listview" data-filter="true" data-inset="true">
    <li>A</li>
    <li>B</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</li>
    <li>B</li>
</ul>

列表带索引

<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    <li>A</li>
    <li>B</li>
</ul>

navbar 导航条

ui-btn-active 默认选中状态

data-icon 图标

 <div data-role="header">
    <h1>my head</h1>
    <div data-role="navbar">
        <ul>
            <li><a class="ui-btn-active">one</a></li>
            <li><a data-icon="grid">two</a></li>
            <li><a>three</a></li>
        </ul>
    </div>
</div>

popup

//点击按钮弹出内容
<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="xx.jpg" 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="xx.jpg" class="popphoto" style="max-height:512px"/>
</div>

select

 <div class="ui-field-contain">
    <select name="select-native-1" id="select-native-1" data-iconpos="left">
        <option value="1">ONE</option>
        <option value="2" disabled="disabled">TWO</option>
        <option value="3">THREE</option>
    </select>
</div>

弹出跳转

<a href="#pagetwo" data-rel="dialog"></a>

删除图标

<a class="ui-btn ui-shadow ui-icon-delete ui-btn-icon-notext ui-corner-all">按钮</a>

controlgroup

controlgroup:间隔很小

取消间隔 data-type="horizontal"

<div data-role="controlgroup" data-type="horizontal">
    <a class="ui-btn ui-btn-inline"></a>
    <a class="ui-btn ui-btn-inline"></a>
</div>

主题更换 class="ui-btn-a"

checkbox/radio

checkbox 复选框和 radio 单选框放在label里会美观,放在 fieldset 成一组

data-theme="" 也可更换主题，horizontal 一行显示。

<fieldset data-role="controlgroup" data-type="horizontal">
        <label>
            <input type="checkbox"/>A
        </label>
        <label>
            <input type="checkbox" data-theme="b"/>B
        </label>
    </fieldset>

展开项 collapsible

去掉下边框 data-content-theme="false"

默认展开 data-collapsed="false"

列表项 data-role="listview"

<div data-role="collapsible" data-content-theme="false">
        <h4>heading</h4>
        <ul data-role="listview">
            <li><a>item1</a></li>
            <li><a>item2</a></li>
            <li><a>item3</a></li>
        </ul>
    </div>

data-position="fixed" 固定位置

<div data-role="footer" data-position="fixed"></div>