码迷，mamicode.com
首页 > Web开发 > 详细

jquerymobile

时间：2017-12-07 15:06:00      阅读：288      评论：0      收藏：0      [点我收藏+]

标签：标题   设置图   dfa   datalist   禁用   als   back   type   ada   

1、简介

  1. HTML5 UI framework;
  2. 专门用于RWD( responsive web design响应式网站)和app应用;
  3. 适用所有移动设备，平板，桌面设备
  4. 依赖jQuery

2、资源

官网

菜鸟教程

3、page-single

基本结构如下：

<!--page-->
<div data-role="page" data-theme="b">
    <!--header-->
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>
    <!--content-->
    <div role="main" class="ui-content">
        content
    </div>
    <!--footer-->
    <div data-role="footer" data-position="fixed">
        <h1>footer</h1>
    </div>
</div>

3.1 data-position

data-position="fixed"设置固定定位

3.2 data-theme

设置主题，如data-theme="b"为反色主题

4、多页面

给每个page指定特有的id，将id传递给a链接的href属性中，不要忘记加#号，如下：

<div data-role="page" id="page1" data-title="jQueryMobile">
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>
    <div role="main" class="ui-content">
        <a href="#page2" data-transition="slide">page2</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>footer</h1>
    </div>
</div>
<div data-role="page" id="page2">
    
    <div role="main" class="ui-content">
        <a href="#page1" data-transition="pop" data-direction="reverse">page1</a>
    </div>
    
</div>

4.1. data-title

指定页面的title标题

4.2. data-transition

指定页面跳转的动画，添加到a标签的属性中，有如下表现形式:

  1. data-transition="slide"
  2. data-transition="slideup"
  3. data-transition="slidedowm"
  4. data-transition="fade"
  5. data-transition="pop"
  6. data-transition="flip"

4.3. data-direction

data-direction="reverse" 指定页面切换的动画为反向

5、button

按钮，可以使用a、button、input标签指定按钮样式。

5.1 默认样式

a 标签添加class ui-btn

<a class="ui-btn">基础样式button</a>
<button>基础样式button</button>
<input type="button" value="基础样式button">

5.2 圆角样式

使用圆角的样式，添加class ui-corner-all

<a href="#" class="ui-btn ui-corner-all">圆角样式按钮</a>
<button class="ui-btn ui-corner-all">按钮</button>

5.3 阴影样式

使用阴影样式，添加class ui-shadow

<a href="#" class="ui-btn ui-shadow">阴影样式按钮</a>
<button class="ui-btn ui-shadow">按钮</button>

5.4 行内样式

使用行内样式，添加class ui-btn-inline

<a href="#" class="ui-btn ui-btn-inline">行内样式按钮</a>

5.5 主题样式

可以使用class ui-btn-a 与 ui-btn-b设置按钮主题， ui-btn-b 为反色主题， 如下：

<a href="#" class="ui-btn ui-btn-a">a样式按钮</a>
<a href="#" class="ui-btn ui-btn-b">b样式按钮</a>

5.6 MINI样式

添加class ui-mini，设置按钮为mini样式：

<a href="#" class="ui-btn ui-mini">mini样式按钮</a>

5.7 ICON样式

按钮中添加icon，给元素添加class ui-icon-*，常用icon列表参见第6章，同时指定按钮放置的位置。

按钮放置位置，通过class ui-btn-icon-*指定，* 有如下的值：

  • ui-btn-icon-left
  • ui-btn-icon-right
  • ui-btn-icon-top
  • ui-btn-icon-button
  • ui-btn-icon-notext 无文本样式
<a href="#" class="ui-btn ui-btn-inline ui-icon-camera ui-btn-icon-left">icon样式按钮</a>

5.8 禁用样式

给按钮添加class ui-state-disabled 呈现禁用样式

5.9 data属性控制样式

  • data-role="button" 定义按钮
  • data-theme="b" 切换到深色的主题,可以单独控制组件的主题样式
  • data-icon="back" 添加图标icon
  • data-iconpos="top" 定义icon的位置
  • data-inline="true" 行内显示
  • data-role="controlgroup" 形成一个组
  • data-corners="false" 去掉默认的圆角
  • data-shadow="false" 去掉阴影
  • data-role="controlgroup" data-type="horizontal" 横向组

6. ICONS

技术分享图片技术分享图片技术分享图片

8. DIALOG对话框

8.1 显示对话框

在按钮上添加 data-rel="dialog"，在页面上添加data-role="dialog"，代码如下：

<div data-role="page" id="page1" data-title="jQueryMobile">
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>
    <div role="main" class="ui-content">
        <!--看这里-->
        <a href="#dialog" class="ui-btn ui-corner-all" data-rel="dialog">基础样式button</a>
    </div>
</div>
<!--还有这儿-->
<div data-role="dialog" id="dialog">
    hello
</div>

8.2 关闭对话框

$(‘.ui-dialog‘).dialog(‘close‘);

9. LIST列表

9.1 无序列表

使用ul>li标签，并给ul添加data-role="listview"属性

代码如下：

<ul data-role="listview">
  <li>Acura</li>
  <li>Audi</li>
  <li>BMW</li>
  <li>Cadillac</li>
  <li>Ferrari</li>
</ul>

效果如下图：

技术分享图片

9.2 有序列表

使用ol>li标签，并给ol添加属性data-role="listview"

代码如下：

<ol data-role="listview">
  <li>Acura</li>
  <li>Audi</li>
  <li>BMW</li>
  <li>Cadillac</li>
  <li>Ferrari</li>
</ol>

效果如下图：

技术分享图片

9.3 链接列表

再无序列表的基础上，li中使用a标签包裹子元素。

代码如下：

<ul data-role="listview">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

效果如下图：

技术分享图片

9.4 内置列表

在链接列表的基础上，添加属性data-inset="true"，为列表添加边距、圆角等样式。

代码如下：

<ul data-role="listview" data-inset="true">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

效果如下图：

技术分享图片

9.5 过滤列表

在列表的基础上，添加属性data-filter="true"，为列表添加过滤样式及功能，并通过属性data-filter-placeholder="占位文字"设置搜索框中的占位文字。

代码如下：

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search fruits...">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

效果如下图：

技术分享图片

在输入框中输入内容可以对列表中的内容进行过滤，如图：

技术分享图片

9.6 DATALIST列表

类似于HTML5中data-list的效果，在输入框中输入内容会有个AutoComplete提示效果

代码如下：

<form class="ui-filterable">
    <input id="autocomplete-input" data-type="search" placeholder="Search fruits...">
</form>

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-input="#autocomplete-input">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

效果如下图：

技术分享图片

当在输入框输入内容后，效果如下图：

技术分享图片

9.7 类分割列表（类似通讯录列表）

代码如下：

<ul data-role="listview" data-inset="true" data-divider-theme="a">
  <li data-role="list-divider">Mail</li>
  <li><a href="#">Inbox</a></li>
  <li><a href="#">Outbox</a></li>
  <li data-role="list-divider">Contacts</li>
  <li><a href="#">Friends</a></li>
  <li><a href="#">Work</a></li>
</ul>

效果如下图：

技术分享图片

9.8 自动类分割列表（类似通讯录列表）

给列表添加属性data-autodividers="true"会自动进行类分割

代码如下：

<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
  <li><a href="index.html">Adam Kinkaid</a></li>
  <li><a href="index.html">Alex Wickerham</a></li>
  <li><a href="index.html">Avery Johnson</a></li>
  <li><a href="index.html">Bob Cabot</a></li>
  <li><a href="index.html">Caleb Booth</a></li>
  <li><a href="index.html">Christopher Adams</a></li>
  <li><a href="index.html">Culver James</a></li>
</ul>

效果如下图：

技术分享图片

9.9 气泡列表

给包裹气泡文本内容的元素添加class ui-li-count，同时可以在ul元素上添加属性data-count-theme="b"设置主题样式

代码如下：

<ul data-role="listview" data-count-theme="b" data-inset="true">
  <li><a href="#">Inbox <span class="ui-li-count">12</span></a></li>
  <li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
  <li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
  <li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
  <li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
</ul>

效果如下图：

技术分享图片

9.10 图标列表

在li上添加属性data-icon="xxx"设置图标

代码如下：

<ul data-role="listview" data-inset="true">
  <li data-icon="custom" id="skull"><a href="#">custom-icon</a></li>
  <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
  <li data-icon="gear"><a href="#">data-icon="gear"</a></li>
  <li data-icon="info"><a href="#">data-icon="info"</a></li>
  <li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

效果如下图：

技术分享图片

9.11 ICONS: 16×16

在a标签中添加img标签，并设置class ui-li-icon

代码如下：

<ul data-role="listview" data-inset="true">
  <li><a href="#"><img src=".." class="ui-li-icon ui-corner-none">France</a></li>
  <li><a href="#"><img src=".." class="ui-li-icon">Germany</a></li>
  <li><a href="#"><img src=".." class="ui-li-icon">Great Britain</a></li>
  <li><a href="#"><img src=".." class="ui-li-icon">Finland</a></li>
  <li><a href="#"><img src=".." class="ui-li-icon ui-corner-none">United States</a></li>
</ul>

效果如下图：

技术分享图片

9.12 缩略图列表

在a标签中添加img标签即可给列表添加缩略图。

代码如下：

<ul data-role="listview" data-inset="true">
  <li><a href="#">
    <img src="../_assets/img/album-bb.jpg">
    <h2>Broken Bells</h2>
    <p>Broken Bells</p></a>
  </li>
  <li><a href="#">
    <img src="../_assets/img/album-hc.jpg">
    <h2>Warning</h2>
    <p>Hot Chip</p></a>
  </li>
  <li><a href="#">
    <img src="../_assets/img/album-p.jpg">
    <h2>Wolfgang Amadeus Phoenix</h2>
    <p>Phoenix</p></a>
  </li>
</ul>

效果如下图：

技术分享图片

9.14 格式化列表

效果图中的时间内容样式，添加class ui-li-aside。

代码如下：

<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
  <li><a href="index.html">
    <h2>Stephen Weber</h2>
    <p><strong>You‘ve been invited to a meeting at Filament Group in Boston, MA</strong></p>
    <p>Hey Stephen, if you‘re available at 10am tomorrow, we‘ve got a meeting with the jQuery team.</p>
    <p class="ui-li-aside"><strong>6:24</strong>PM</p>
    </a>
  </li>
  <li><a href="index.html">
    <h2>jQuery Team</h2>
    <p><strong>Boston Conference Planning</strong></p>
    <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
    <p class="ui-li-aside"><strong>9:18</strong>AM</p>
    </a>
  </li>
  <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
  <li><a href="index.html">
    <h2>Avery Walker</h2>
    <p><strong>Re: Dinner Tonight</strong></p>
    <p>Sure, let‘s plan on meeting at Highland Kitchen at 8:00 tonight. Can‘t wait!</p>
    <p class="ui-li-aside"><strong>4:48</strong>PM</p>
    </a>
  </li>
</ul>

效果如下图：

技术分享图片

9.15 列表主题

  • data-theme="b" 设置列表主题
  • data-divider-theme="a" 设置类分割样式
  • data-count-theme="a" 设置气泡样式

代码如下：

<ul data-role="listview" data-inset="true" data-theme="b" data-divider-theme="a" data-count-theme="a">
  <li data-role="list-divider">Divider</li>
  <li><a href="index.html" data-theme="a">Inbox <span class="ui-li-count">12</span></a></li>
  <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
  <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
</ul>

效果如下图：

技术分享图片

9.16 列表中表单

代码如下：

<form>
  <ul data-role="listview" data-inset="true">
    <li class="ui-field-contain">
      <label for="name2">Text Input:</label>
      <input type="text" name="name2" id="name2" value="" data-clear-btn="true">
    </li>
    <li class="ui-field-contain">
      <label for="textarea2">Textarea:</label>
      <textarea cols="40" rows="8" name="textarea2" id="textarea2"></textarea>
    </li>
    <li class="ui-field-contain">
      <label for="flip2">Flip switch:</label>
      <select name="flip2" id="flip2" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
      </select>
    </li>
    <li class="ui-field-contain">
      <label for="slider2">Slider:</label>
      <input type="range" name="slider2" id="slider2" value="0" min="0" max="100" data-highlight="true">
    </li>
    <li class="ui-field-contain">
      <label for="select-choice-1" class="select">Choose shipping method:</label>
      <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
      </select>
    </li>
    <li class="ui-body ui-body-b">
      <fieldset class="ui-grid-a">
        <div class="ui-block-a"><button type="submit" class="ui-btn ui-corner-all ui-btn-a">Cancel</button></div>
        <div class="ui-block-b"><button type="submit" class="ui-btn ui-corner-all ui-btn-a">Submit</button></div>
      </fieldset>
    </li>
  </ul>
</form>

效果如下图：

技术分享图片

10. 表格table

给table标签添加属性data-role="table"

代码如下：

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
  <thead>
    <tr>
      <th data-priority="2">Rank</th>
      <th>Movie Title</th>
      <th data-priority="3">Year</th>
      <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th data-priority="5">Reviews</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
      <td>1941</td>
      <td>100%</td>
      <td>74</td>
    </tr>
    <tr>
      <th>2</th>
      <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
      <td>1942</td>
      <td>97%</td>
      <td>64</td>
    </tr>
    <tr>
      <th>3</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
      <td>1972</td>
      <td>97%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>4</th>
      <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
      <td>1939</td>
      <td>96%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>5</th>
      <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
      <td>1962</td>
      <td>94%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>6</th>
      <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
      <td>1964</td>
      <td>92%</td>
      <td>74</td>
    </tr>
    <tr>
      <th>7</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
      <td>1967</td>
      <td>91%</td>
      <td>122</td>
    </tr>
    <tr>
      <th>8</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
      <td>1939</td>
      <td>90%</td>
      <td>72</td>
    </tr>
    <tr>
      <th>9</th>
      <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin‘ in the Rain</a></td>
      <td>1952</td>
      <td>89%</td>
      <td>85</td>
    </tr>
    <tr>
      <th>10</th>
      <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
      <td>2010</td>
      <td>84%</td>
      <td>78</td>
    </tr>
  </tbody>
</table>

效果如下图：

技术分享图片

11. 栅格GRID

栅格系统，栅格容器使用class ui-grid-* ，添加class ui-responsive可使其变成响应式栅格。

栅格中的每一项添加class ui-block-*，第一项为ui-block-a，第二项为ui-block-b，以此类推，有几个block就是几等分

11.1 单行两列

代码如下：

<div class="ui-grid-a">
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
</div>

效果如下图：

技术分享图片

11.2 单行多列

代码如下：

<div class="ui-grid-c">
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
  <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
  <div class="ui-block-d"><div class="ui-bar ui-bar-a" style="height:60px">Block D</div></div>
</div>

效果如下图：

技术分享图片

11.3 多行多列

代码如下：

<div class="ui-grid-b">
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
  <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
  <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
  <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
</div><!-- /grid-c -->

效果如图：

技术分享图片

11.4 多个栅格

代码如下：

<h3>Grid A (50/50)</h3>
<div class="ui-grid-a ui-responsive">
  <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
  <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
</div><!-- /grid-a -->
<h3>Grid B (33/33/33)</h3>
<div class="ui-grid-b ui-responsive">
  <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
  <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
  <div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
</div><!-- /grid-b -->
<h3>Grid C (25/25/25/25)</h3>
<div class="ui-grid-c ui-responsive">
  <div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
  <div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
  <div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
  <div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
</div><!-- /grid-c -->
<h3>Grid D (20/20/20/20/20)</h3>
<div class="ui-grid-d ui-responsive">
  <div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
  <div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
  <div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
  <div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
  <div class="ui-block-e"><div class="ui-body ui-body-d">E</div></div>
</div>

效果如图：

技术分享图片

12. Collapsible折叠面板

给容器添加属性data-role="collapsible"，h4标签是显示的内容，p标签是被折叠的内容，代码如下：

<div data-role="collapsible">
  <h4>Heading</h4>
  <p>I‘m the collapsible content. By default I‘m closed, but you can click the header to open me.</p>
</div>

效果如图：

技术分享图片

点击以后效果图：

技术分享图片

13. TAB 选项卡

<div data-role="tabs" id="tabs">
  <!--tab 按钮-->
  <div data-role="navbar">
    <ul>
      <li><a href="#one" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li>
    </ul>
  </div>
  <!--tab 内容-->
  <div id="one" class="ui-body-d ui-content">
    <h1>First tab contents</h1>
  </div>
  <div id="two">
    <ul data-role="listview" data-inset="true">
      <li><a href="#">Acura</a></li>
      <li><a href="#">Audi</a></li>
      <li><a href="#">BMW</a></li>
      <li><a href="#">Cadillac</a></li>
      <li><a href="#">Ferrari</a></li>
    </ul>
  </div>
</div>

效果如下图：

技术分享图片

jquerymobile

标签：标题   设置图   dfa   datalist   禁用   als   back   type   ada   

原文地址：http://www.cnblogs.com/mongos/p/7998572.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！