常用列表
常在iOS应用中看到的列表，是种多功能且强大的交互组件。列表将数据展现在一个可滚动的多行的列表中。
列表有以下用途：
- 让用户可以浏览结构化的多级数据
- 展现一个索引列表
- 在可视化的不同分组中，显示详细信息和控件
- 展现一个可以选择的列表
<div class="ui-list-block">
<ul>
<li>
<div class="ui-list-item-content ui-list-item-link ">
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">名称</div>
<div class="ui-list-item-after">你的iPhone</div>
</div>
</div>
</li>
</ul>
</div>
<div class="ui-list-block">
<ul>
<li>
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">网络</div>
<div class="ui-list-item-after">中国移动</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">歌曲</div>
<div class="ui-list-item-after">0</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">视频</div>
<div class="ui-list-item-after">0</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">照片</div>
<div class="ui-list-item-after">229</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">应用程序</div>
<div class="ui-list-item-after">132</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">总容量</div>
<div class="ui-list-item-after">55.9G</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">可用容量</div>
<div class="ui-list-item-after">32.9G</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">版本</div>
<div class="ui-list-item-after">8.4(12H143)</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">运营商</div>
<div class="ui-list-item-after">中国移动20.0</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">型号</div>
<div class="ui-list-item-after">MG4H2CH/A</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">SEID</div>
</div>
</div>
</li>
</ul>
</div>
<div class="ui-list-block">
<ul>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">法律信息</div>
</div>
</div>
</li>
<li>
<div class="ui-list-content">
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">更多</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
样式说明
-
ui-list-block
- 列表组件的顶层标示。 必选
元素。
-
ui-list-item-content
- 列表项的主要弹性(flex)容器。 必选
元素。
-
ui-list-item-link
- 需要该项有点击效果的时候，在该项最外层添加该样式。
可选
元素。
-
ui-list-item-inner
-
ui-list-item-title
和
ui-list-item-after
的主要弹性(flex)容器。
必选
元素。
-
ui-list-item-title
- 单行列表项目标题。
必选
元素。
-
ui-list-item-title
- 单行列表项目标题，帶箭頭。
可选
元素。
-
ui-list-item-after
- 列表项目标签。可以包含任意额外的html元素（例如标签文本、徽章、switch/toggle、按钮等等）。
可选
元素。
自定义列表（Custom List View）
自定义列表满足了个性化的列表需求
<div class="ui-list-block">
<ul>
<li>
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">item</div>
<div class="ui-list-item-after">
<div class="ui-switch ui-active">
<div class="ui-switch-handle"></div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">item</div>
<div class="ui-list-item-after">你的iPhone</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">item</div>
<div class="ui-list-item-after">
<span class="ui-badge ui-badge-red">15</span>
</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-link ui-list-item-content ui-list-button">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">item</div>
<div class="ui-list-item-after"></div>
</div>
</div>
</li>
</ul>
</div>
样式说明
-
ui-switch
- switch组件标示。 必选
元素。
-
ui-active
- switch组件默认开启标示。 可选
元素。
-
ui-switch-handle
- switch组件滑动按钮样式
可选
元素。
-
ui-badge
- 标记样式。
必选
元素。
-
ui-badge-red
- 标记颜色样式（紅色）。
可选
元素。
-
ui-btn
- 按钮样式。
必选
元素。
-
ui-btn-blue
- 按钮颜色样式。
可选
元素。
多媒体列表（Media List View）
多媒体列表是列表（list view）的扩展，它是为了展示更复杂的数据比如产品，服务，用户等等。
当然，它的布局更为复杂：
<div class="ui-list-block ui-media-list">
<ul>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-item-media">
<img src="../img/dmbj.jpg" style="width: 80px;"/>
</div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">盗墓笔记</div>
<div class="ui-list-item-after">￥150</div>
</div>
<div class="ui-media-item-subtitle">南派三叔</div>
<div class="ui-media-item-text">
出身“老九门”世家的吴邪，因身为考古学家的父母在某次保护国家文物行动时被国外盗墓团伙杀害，吴家为保护吴邪安全将他送去德国读书，因而吴邪对“考古”事业有着与生俱来的兴趣，在一次护宝过程中他偶然获得一张记载着古墓秘密的战国帛书，为赶在不明势力之前解开帛书秘密，保护古墓中文物不受侵害，按照帛书的指引吴邪跟随三叔吴三省、潘子以及神秘小哥张起灵来到鲁殇王墓探究七星鲁王宫的秘密。 在古墓中，吴邪结识了前来探秘的王胖子并救下身份不明的阿宁，经过一系列惊险刺激匪夷所思的事件之后，众人又发现了更多未解的谜团。吴邪等人在和不明势力斗智斗勇的同时又踏上了新的探秘之旅。
</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-item-media">
<img src="../img/gcd.jpg" style="width: 80px;"/>
</div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">鬼吹灯</div>
<div class="ui-list-item-after">$140</div>
</div>
<div class="ui-media-item-subtitle">天下霸唱</div>
<div class="ui-media-item-text">
《鬼吹灯》是一部中国大陆的网络小说，作者为天下霸唱，主要内容是盗墓寻宝，是一部极为经典的悬疑盗墓小说，这部小说也迅速成为了图书销售排行榜的榜首。之后作者继续创作第二部，内容涉及陈瞎子和鹧鸪哨之盗墓往事。
</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-item-media">
<img src="../img/ltt.jpg" style="width: 80px;"/>
</div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">狼图腾</div>
<div class="ui-list-item-after">$36</div>
</div>
<div class="ui-media-item-subtitle">姜戎</div>
<div class="ui-media-item-text">
《狼图腾》是一部以狼为叙述主体的小说，讲述了上个世纪六七十年代一位知青在内蒙古草原插队时与草原狼、游牧民族相依相存的故事。
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="ui-list-block ui-media-list">
<ul>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">计费通知</div>
<div class="ui-list-item-after">12:14</div>
</div>
<div class="ui-media-item-subtitle">您支付了7元</div>
<div class="ui-media-item-text">
您2015-05-17 21:09:49的用车服务已完成，行驶10.00分钟3.70公里，原价10.00元，使用优惠券3.00元，应付7.00元，2小时后系统将自动从您的信用卡中扣款，账户有余额时优先扣除余额。
</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">计费通知</div>
<div class="ui-list-item-after">12:14</div>
</div>
<div class="ui-media-item-subtitle">您支付了7元</div>
<div class="ui-media-item-text">
您2015-05-17 21:09:49的用车服务已完成，行驶10.00分钟3.70公里，原价10.00元，使用优惠券3.00元，应付7.00元，2小时后系统将自动从您的信用卡中扣款，账户有余额时优先扣除余额。
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="ui-list-block ui-media-list">
<ul>
<li>
<div class="ui-list-item-content ui-list-item-link">
<div class="ui-item-media">
<img class ='ui-media-inset' src="../img/6.jpg"/>
</div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title">单标题列</div>
</div>
</div>
</li>
</ul>
</div>
<div class="ui-list-block ui-media-list">
<ul>
<li>
<div class="ui-list-item-content">
<div class="ui-item-media">
<img class ='ui-media-inset' src="../img/7.jpg"/>
</div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">都市</div>
</div>
<div class="ui-media-item-subtitle">在喧嚣浮躁的繁华都市里,不断拼命追逐。</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-item-media">
<img class ='ui-media-inset' src="../img/8.jpg"/>
</div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">青山绿水</div>
</div>
<div class="ui-media-item-subtitle">远离都市的压抑喧嚣,到青山绿水间,悠然山居。</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-content">
<div class="ui-item-media">
<img class ='ui-media-inset' src="../img/9.jpg"/>
</div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">居家</div>
</div>
<div class="ui-media-item-subtitle">家是人温馨的港湾,让你疲惫的身心得到全面的放松</div>
</div>
</div>
</li>
</ul>
</div>
<div class="ui-list-block ui-media-list ui-inset">
<ul>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-item-media">
<img class ='ui-media-inset' src="../img/5.jpg"/>
</div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">都市</div>
</div>
<div class="ui-media-item-subtitle">在喧嚣浮躁的繁华都市里,不断拼命追逐。</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-item-media">
<img class ='ui-media-inset' src="../img/7.jpg"/>
</div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">青山绿水</div>
</div>
<div class="ui-media-item-subtitle">远离都市的压抑喧嚣,到青山绿水间,悠然山居。</div>
</div>
</div>
</li>
<li>
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-item-media">
<img class ='ui-media-inset' src="../img/9.jpg"/>
</div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">居家</div>
</div>
<div class="ui-media-item-subtitle">家是人温馨的港湾,让你疲惫的身心得到全面的放松。</div>
</div>
</div>
</li>
</ul>
</div>
样式说明
-
ui-media-list
- 媒体列表组件标示。 必选
元素。
-
ui-item-media
- 媒体项标示。 必选
元素。
-
ui-list-item-title-row
- 媒体项主标题样式
可选
元素。
-
ui-media-item-subtitle
- 媒体项副标题样式。
可选
元素。
-
ui-list-item-after
- 媒体项标题补充。
可选
元素。
-
ui-media-item-text
- 媒体项文字描述样式。
可选
元素。
-
ui-media-inset
- 媒体项图标控制样式。
可选
元素。
滑动删除列表（Swipe List View）
滑动删除列表是列表（list view）的扩展，它是为了实现更复杂的数据操作。
当然，它的布局更为复杂：
<div class="ui-list-block">
<ul>
<li class="ui-swipeout">
<div class="ui-list-item-content ui-swipeout-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">左滑显示删除按钮</div>
</div>
</div>
<div class="ui-swipeout-actions-right">
<span class="ui-swipeout-delete">删除</span>
</div>
</li>
<li class="ui-swipeout">
<div class="ui-list-item-content ui-swipeout-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title">右滑显示删除按钮</div>
</div>
</div>
<div class="ui-swipeout-actions-left">
<span class="ui-swipeout-delete">删除</span>
</div>
</li>
</ul>
</div>
<div class="ui-list-block ui-media-list">
<ul>
<li class="ui-swipeout">
<div class="ui-swipeout-content">
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">左滑显示删除按钮</div>
</div>
</div>
</div>
</div>
<div class="ui-swipeout-actions-right">
<span class="ui-swipeout-delete">Delete</span>
</div>
</li>
<li class="ui-swipeout">
<div class="ui-swipeout-content">
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">右滑显示删除按钮</div>
</div>
</div>
</div>
</div>
<div class="ui-swipeout-actions-left">
<span class="ui-swipeout-delete">删除</span>
</div>
</li>
</ul>
</div>
<div class="ui-list-block">
<ul>
<li class="ui-swipeout">
<div class="ui-list-item-content ui-swipeout-content">
<div class="ui-item-media">
<img class="ui-media-inset" src="../img/9.jpg"></div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title">右滑显示按钮</div>
</div>
</div>
<div class="ui-swipeout-actions-left">
<span class="ui-bg-green">Reply</span>
<span class="ui-bg-blue">Forward</span>
</div>
</li>
<li class="ui-swipeout">
<div class="ui-list-item-content ui-swipeout-content">
<div class="ui-item-media">
<img class="ui-media-inset" src="../img/7.jpg"></div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title">左滑显示按钮</div>
</div>
</div>
<div class="ui-swipeout-actions-right">
<span class="ui-bg-green">Reply</span>
<span class="ui-bg-blue">Forward</span>
</div>
</li>
</ul>
</div>
<div class="ui-list-block ui-media-list">
<ul>
<li class="ui-swipeout">
<div class="ui-swipeout-content">
<div class="ui-list-item-content ui-list-item-link">
<div class="ui-item-media">
<img class="ui-media-inset" src="../img/6.jpg"></div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title">左滑显示按钮</div>
</div>
</div>
</div>
<div class="ui-swipeout-actions-right">
<span class="ui-bg-green">Reply</span>
<span class="ui-bg-blue">Forward</span>
</div>
</li>
<li class="ui-swipeout">
<div class="ui-swipeout-content">
<div class="ui-list-item-content ui-list-item-link">
<div class="ui-item-media">
<img class="ui-media-inset" src="../img/5.jpg"></div>
<div class="ui-list-item-inner">
<div class="ui-list-item-title">右滑显示按钮</div>
</div>
</div>
</div>
<div class="ui-swipeout-actions-left">
<span class="ui-bg-green">Reply</span>
<span class="ui-bg-blue">Forward</span>
</div>
</li>
</ul>
</div>
<div class="ui-list-block ui-media-list">
<ul>
<li class="ui-swipeout">
<div class="ui-swipeout-content">
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">计费通知</div>
<div class="ui-list-item-after">17:14</div>
</div>
<div class="ui-media-item-subtitle">您支付了7元</div>
<div class="ui-media-item-text">
您2015-05-17 21:09:49的用车服务已完成，行驶10.00分钟3.70公里，原价10.00元，使用优惠券3.00元，应付7.00元，2小时后系统将自动从您的信用卡中扣款，账户有余额时优先扣除余额。
</div>
</div>
</div>
</div>
<div class="ui-swipeout-actions-left">
<span class="ui-bg-green ">Reply</span>
<span class="ui-bg-blue">Forward</span>
</div>
<div class="ui-swipeout-actions-right">
<span>More</span>
<span class="ui-bg-orange">Mark</span>
<span class="ui-swipeout-delete">Delete</span>
</div>
</li>
<li class="ui-swipeout">
<div class="ui-swipeout-content">
<div class="ui-list-item-link ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">计费通知</div>
<div class="ui-list-item-after">17:14</div>
</div>
<div class="ui-media-item-subtitle">您支付了7元</div>
<div class="ui-media-item-text">
您2015-05-17 21:09:49的用车服务已完成，行驶10.00分钟3.70公里，原价10.00元，使用优惠券3.00元，应付7.00元，2小时后系统将自动从您的信用卡中扣款，账户有余额时优先扣除余额。
</div>
</div>
</div>
</div>
<div class="ui-swipeout-actions-left">
<span class="ui-bg-green ">Reply</span>
<span class="ui-bg-blue">Forward</span>
</div>
<div class="ui-swipeout-actions-right">
<span>More</span>
<span class="ui-bg-orange">Mark</span>
<span class="ui-swipeout-delete">Delete</span>
</div>
</li>
</ul>
</div>
<div class="ui-list-block ui-media-list">
<ul>
<li class="ui-swipeout">
<div class="ui-swipeout-content">
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">计费通知</div>
<div class="ui-list-item-after">17:14</div>
</div>
<div class="ui-media-item-subtitle">您支付了7元</div>
<div class="ui-media-item-text">
您2015-05-17 21:09:49的用车服务已完成，行驶10.00分钟3.70公里，原价10.00元，使用优惠券3.00元，应付7.00元，2小时后系统将自动从您的信用卡中扣款，账户有余额时优先扣除余额。
</div>
</div>
</div>
</div>
<div class="ui-swipeout-actions-left">
<span class="ui-bg-green ">Reply</span>
<span class="ui-bg-blue">Forward</span>
</div>
<div class="ui-swipeout-actions-right">
<span>More</span>
<span class="ui-bg-orange">Mark</span>
<span class="ui-swipeout-delete">Delete</span>
</div>
</li>
<li class="ui-swipeout">
<div class="ui-swipeout-content">
<div class="ui-list-item-content">
<div class="ui-list-item-inner">
<div class="ui-list-item-title-row">
<div class="ui-list-item-title">计费通知</div>
<div class="ui-list-item-after">17:14</div>
</div>
<div class="ui-media-item-subtitle">您支付了7元</div>
<div class="ui-media-item-text">
您2015-05-17 21:09:49的用车服务已完成，行驶10.00分钟3.70公里，原价10.00元，使用优惠券3.00元，应付7.00元，2小时后系统将自动从您的信用卡中扣款，账户有余额时优先扣除余额。
</div>
</div>
</div>
</div>
<div class="ui-swipeout-actions-left">
<span class="ui-bg-green ">Reply</span>
<span class="ui-bg-blue">Forward</span>
</div>
<div class="ui-swipeout-actions-right ">
<span >More</span>
<span class="ui-bg-orange">Mark</span>
<span class="ui-swipeout-delete">Delete</span>
</div>
</li>
</ul>
</div>
JS 部分
domReady(function(require){
$('.ui-swipeout').on('delete',function(e,sp){
return true;
}).on('open',function(e,sp){
console.log('open');
}).on('close',function(e,sp){
console.log('close');
}).on('opened',function(e,sp){
console.log('opened');
}).on('closed',function(e,sp){
console.log('closed');
}).on('deleted',function(e,sp){
console.log('deleted');
}).on('tapped',function(e,sp){
console.log('singleTap');
}).swipelist();
});
通过swipelist方法返回一个或多个滑动列表对象的数组（根据选择器选到的dom对象个数）
var sp = $('.ui-swipeout').swipelist(); //单个
var sps = $('.ui-swipeout').swipelist(); //数组
样式说明
-
ui-swipeout
- 滑动列表组件标示。 必选
元素。
-
ui-swipeout-content
- 滑动列表项内容样式。 必选
元素。
-
ui-swipeout-actions-right
- 滑动列表右侧可滑动样式标示
可选
元素。
-
ui-swipeout-actions-left
- 滑动列表左侧可滑动样式标示。
可选
元素。
-
ui-swipeout-delete
- 删除按钮样式。
可选
元素。
-
ui-bg-orange
- 橙色背景样式。
可选
元素。
-
ui-bg-blue
- 蓝色背景样式。
可选
元素。
-
ui-bg-green
- 绿色背景样式。
可选
元素。
事件
在操作过程中可以通过以下事件来控制滑动删除的操作。
| 事件 |
参数 |
说明 |
| open |
event, swip，其中swip 是当前操作的滑块对象，可通过该对象调用滑动列表的方法 |
滑块被打开时触发 |
| opened |
event, swip，其中swip 是当前操作的滑块对象，可通过该对象调用滑动列表的方法 |
滑块被打开后触发 |
| delete |
event, swip，其中swip 是当前操作的滑块对象，可通过该对象调用滑动列表的方法 |
点击加有删除样式的按钮时触发，回调函数返回true直接删除，返回false则不执行删除，可做其他操作后通过回调函数返回的swip对象进行删除操作 |
| deleted |
event, swip，其中swip 是当前操作的滑块对象，可通过该对象调用滑动列表的方法 |
删除成功后出发 |
| close |
event, swip，其中swip 是当前操作的滑块对象，可通过该对象调用滑动列表的方法 |
关闭滑块时触发 |
| closed |
event, swip，其中swip 是当前操作的滑块对象，可通过该对象调用滑动列表的方法 |
关闭滑块后出发 |
| tapped |
event, swip，其中swip 是当前操作的滑块对象，可通过该对象调用滑动列表的方法 |
列表项被点击时触发 |
方法
在操作过程中可以通过以下方法来控制滑动删除的操作。
| 方法 |
参数 |
说明 |
| close |
callback操作成功回调函数 |
关闭滑块 |
| delete |
callback操作成功回调函数 |
删除当前行 |
折叠列表（Accordion List View）
<div class="ui-accordion-list">
<ul>
<li class="ui-accordion-list-item">
<a class="ui-accordion-list-item-link">
<div class="ui-accordion-list-item-inner">
按钮
</div>
</a>
<div class="ui-accordion-list-item-content">
<ul>
<li class="ui-accordion-list-item">
<a class="ui-accordion-list-item-link">
<div class="ui-accordion-list-item-inner">
第十三章 内能
</div>
</a>
</li>
<li class="ui-accordion-list-item">
<a class="ui-accordion-list-item-link">
<div class="ui-accordion-list-item-inner">
第十四章 内能的利用
</div>
</a>
<div class="ui-accordion-list-item-content">
<img src="../img/8.jpg" width="100%" />
</div>
</li>
<li class="ui-accordion-list-item">
<a class="ui-accordion-list-item-link">
<div class="ui-accordion-list-item-inner">
第十三章 电流和电力
</div>
</a>
<div class="ui-accordion-list-item-content">
<img src="../img/6.jpg" width="100%" />
</div>
</li>
</ul>
</div>
</li>
<li class="ui-accordion-list-item">
<a class="ui-accordion-list-item-link">
<div class="ui-accordion-list-item-inner">
第十四章 内能的利用
</div>
</a>
<div class="ui-accordion-list-item-content">
<img src="../img/1.jpg" width="100%" />
</div>
</li>
<li class="ui-accordion-list-item">
<a class="ui-accordion-list-item-link">
<div class="ui-accordion-list-item-inner">
第十三章 电流和电力
</div>
</a>
<div class="ui-accordion-list-item-content">
<img src="../img/5.jpg" width="100%" />
</div>
</li>
</ul>
</div>
JS 部分
domReady(function(require){
$('.ui-accordion-list').on('tapped',function(e,el){
console.log('tapped')
}).on('open',function(e,el){
console.log('open')
}).on('opened',function(e,el){
console.log('opened')
}).on('close',function(e,el){
console.log('close')
}).on('closed',function(e,el){
console.log('closed')
}).accordionList({
toggleClose:true
});
});
通过accordionList方法返回一个或多个折叠列表对象的数组（根据选择器选到的dom对象个数）
var acl = $('.ui-accordion-list').accordionList(); //单个
var acls = $('.ui-accordion-list').accordionList(); //数组
样式说明
-
ui-accordion-list
- 折叠列表组件标示。 必选
元素。
-
ui-accordion-list-item
- 列表项样式。 必选
元素。
-
ui-accordion-list-item-link
- 列表项点击样式
必选
元素。
-
ui-accordion-list-item-inner
- 列表项标题内容样式。
必选
元素。
-
ui-accordion-list-item-content
- 列表项内容容器样式。
可选
元素。
属性
| 属性 |
取值范围 |
默认值 |
说明 |
| toggleClose |
true/false |
true |
在打开折叠列表时是否自动关闭其他已经打开的项 |
事件
在操作过程中可以通过以下事件来控制折叠列表的操作。
| 事件 |
参数 |
说明 |
| tapped |
event, el，其中el 是当前操作的列表项的Zepto对象 |
列表项被点击时若无内容项则触发 |
| open |
event, el，其中el 是当前操作的列表项的Zepto对象 |
列表项被点击时若有内容项则触发 |
| opened |
event, el，其中el 是当前操作的列表项的Zepto对象 |
列表项被展开后触发 |
| close |
event, el，其中el 是当前操作的列表项的Zepto对象 |
列表项被折叠时触发 |
| closed |
event, el，其中el 是当前操作的列表项的Zepto对象 |
列表项被折叠后触发 |
手风琴（Accordion）
<div class="ui-accordion">
<ul class="ui-accordion-level1">
<li class="ui-accordion-item ui-accordion-item-expanded">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十三章 内能
</div>
</a>
<div class="ui-accordion-item-content">
<ul class="ui-accordion-level2">
<li class="ui-accordion-item">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十三章 内能
</div>
</a>
<div class="ui-accordion-item-content">
<ul class="ui-accordion-level3">
<li class="ui-accordion-item">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十三章 内能
</div>
</a>
<div class="ui-accordion-item-content">
<ul class="ui-accordion-level3">
<li class="ui-accordion-item">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十三章 内能
</div>
</a>
<div class="ui-accordion-item-content">
<img src="../img/1.jpg" width="100%" />
</div>
</li>
<li class="ui-accordion-item">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十四章 内能的利用
</div>
</a>
<div class="ui-accordion-item-content">
<img src="../img/2.jpg" width="100%" />
</div>
</li>
<li class="ui-accordion-item">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十三章 电流和电力
</div>
</a>
<div class="ui-accordion-item-content">
<img src="../img/3.jpg" width="100%" />
</div>
</li>
</ul>
</div>
</li>
<li class="ui-accordion-item">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十四章 内能的利用
</div>
</a>
<div class="ui-accordion-item-content">
<img src="../img/4.jpg" width="100%" />
</div>
</li>
<li class="ui-accordion-item">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十三章 电流和电力
</div>
</a>
<div class="ui-accordion-item-content">
<img src="../img/5.jpg" width="100%" />
</div>
</li>
</ul>
</div>
</li>
<li class="ui-accordion-item">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十四章 内能的利用
</div>
</a>
<div class="ui-accordion-item-content">
<img src="../img/8.jpg" width="100%" />
</div>
</li>
<li class="ui-accordion-item">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十三章 电流和电力
</div>
</a>
<div class="ui-accordion-item-content">
<img src="../img/7.jpg" width="100%" />
</div>
</li>
</ul>
</div>
</li>
<li class="ui-accordion-item">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十四章 内能的利用
</div>
</a>
<div class="ui-accordion-item-content">
<img src="../img/6.jpg" width="100%" />
</div>
</li>
<li class="ui-accordion-item">
<a class="ui-accordion-item-link">
<div class="ui-accordion-item-inner">
第十三章 电流和电力
</div>
</a>
<div class="ui-accordion-item-content">
<img src="../img/5.jpg" width="100%" />
</div>
</li>
</ul>
</div>
JS 部分
domReady(function(require) {
$('.ui-accordion').on('open',function(e,el){
console.log('open')
}).on('opened',function(e,el){
console.log('opened')
}).on('close',function(e,el){
console.log('close')
}).on('closed',function(e,el){
console.log('closed')
}).accordion({
toggleClose:true
});
})
通过accordion方法返回一个或多个手风琴对象的数组（根据选择器选到的dom对象个数）
var ac = $('.ui-accordion').accordion(); //单个
var acs = $('.ui-accordion').accordion(); //数组
样式说明
-
ui-accordion
- 手风琴组件标示。 必选
元素。
-
ui-accordion-item
- 手风琴单项样式
必选
元素。
-
ui-accordion-item-link
- 手风琴单项点击样式。
必选
元素。
-
ui-accordion-item-inner
- 手风琴单项标题内容样式。
必选
元素。
-
ui-accordion-item-expanded
- 手风琴单项展开样式（添加该样式默认展开）
可选
元素。
-
ui-accordion-item-content
- 手风琴单项内容区域样式。
必选
元素。
-
ui-accordion-level1
- 手风琴第一级顶层样式。 必选
元素。
-
ui-accordion-level2
- 手风琴第二级顶层样式。
可选
元素。
-
ui-accordion-level3
- 手风琴第三级顶层样式。
可选
元素。
属性
| 属性 |
取值范围 |
默认值 |
说明 |
| toggleClose |
true/false |
true |
手风琴在打开单项时是否自动关闭其他已经打开的项 |
事件
在操作过程中可以通过以下事件来控制手风琴的操作。
| 事件 |
参数 |
说明 |
| open |
event, el，其中el 是当前操作的手风琴项Zepto对象 |
手风琴被展开时触发 |
| opened |
event, el，其中el 是当前操作的手风琴项Zepto对象 |
手风琴被展开后触发 |
| close |
event, el，其中el 是当前操作的手风琴项Zepto对象 |
手风琴被展开关闭时触发 |
| closed |
event, el，其中el 是当前操作的手风琴项Zepto对象 |
手风琴被关闭后触发 |
底部导航（TabBar）
<div class="ui-tab-bar">
<a class="ui-tab-item">
<span class="ui-icon ui-icon-phone"></span>
<span class="ui-tab-label">phone</span>
</a>
<a class="ui-tab-item">
<span class="ui-icon ui-icon-email"></span>
<span class="ui-tab-label">email</span>
</a>
<a class="ui-tab-item">
<span class="ui-icon ui-icon-chatbubble"></span>
<span class="ui-tab-label">message</span>
</a>
<a class="ui-tab-item">
<span class="ui-icon ui-icon-gear"></span>
<span class="ui-tab-label">install</span>
</a>
</div>
JS 部分
domReady(function(require) {
$('.ui-tab-bar').on('activate', function(e, to, from) {
console.log(to)
}).tab()
});
样式说明
-
ui-tab-bar
- 底部导航组件标示。 必选
元素。
-
ui-tab-item
- 底部导航子元素样式
必选
元素。
-
ui-icon ui-icon-email
- 底部导航图标样式。
必选
元素。
-
ui-tab-label
- 底部导航描述样式。
可选
元素。
属性
| 属性 |
取值范围 |
默认值 |
说明 |
| active |
Number |
0 |
初始选中下标（从0开始） |
事件
在操作过程中可以通过以下事件来控制底部导航的操作。
| 事件 |
参数 |
说明 |
| activate |
event, to, from
，其中
to
当前选中的下标，
from
来源的下标
|
发生切换时触发 |
方法
在操作过程中可以通过以下方法来控制底部导航的操作。
| 方法 |
参数 |
说明 |
| switchTo |
index：目标的下标
|
切换到目标项 |
顶部导航（Navigator）
<div class="ui-navigator">
<ul class="ui-navigator-list">
<li>
<a>首页</a>
</li>
<li>
<a>要闻</a>
</li>
<li>
<a>国内</a>
</li>
<li>
<a>国际</a>
</li>
<li>
<a>军事</a>
</li>
<li>
<a>社会</a>
</li>
<li>
<a>娱乐</a>
</li>
<li>
<a>女人</a>
</li>
<li>
<a>体育</a>
</li>
<li>
<a>科技</a>
</li>
<li>
<a>互联网</a>
</li>
<li>
<a>教育</a>
</li>
<li>
<a>财经</a>
</li>
<li>
<a>房产</a>
</li>
<li>
<a>汽车</a>
</li>
</ul>
</div>
JS 部分
domReady(function(require){
$('.ui-navigator').on('switch',function(e,to,li){
console.log(to)
}).navigator();
})
样式说明
-
ui-navigator
- 顶部导航组件标示。 必选
元素。
-
ui-navigator-list
- 顶部导航列表样式 必选
元素。
属性
| 属性 |
取值范围 |
默认值 |
说明 |
| active |
Number
|
0
|
初始选中下标（从0开始） |
事件
在操作过程中可以通过以下事件来控制顶部导航的操作。
| 事件 |
参数 |
说明 |
| switch |
event, to, li
，其中
to
当前选中的下标，
li
选中的html对象
|
发生切换时触发 |
方法
在操作过程中可以通过以下方法来控制底部导航的操作。
| 方法 |
参数 |
说明 |
| switchTo |
index
：目标的下标
|
切换到目标项 |
滚屏（Fullpage）
<div class="ui-fullpage">
<div class="ui-fullpage-page ">
<img class ="ui-fullpage-pageinner" src="../img/5.jpg"></img>
</div>
<div class="ui-fullpage-page">
<img class ="ui-fullpage-pageinner" src="../img/6.jpg"></img>
</div>
<div class="ui-fullpage-page">
<img class ="ui-fullpage-pageinner" src="../img/7.jpg"></img>
</div>
<div class="ui-fullpage-page">
<img class ="ui-fullpage-pageinner" src="../img/8.jpg"></img>
</div>
</div>
JS 部分
domReady(function(require){
$('.ui-fullpage').fullpage({
loop:true,
dots:true,
arrow:true,
gesture: false,
fullPage: true,
speed: 500
});
});
通过fullpage方法返回一个或多个滚屏对象的数组（根据选择器选到的dom对象个数）
var fp = $('.ui-fullpage').fullpage(); //单个
var fps = $('.ui-fullpage').fullpage(); //数组
样式说明
-
ui-fullpage
- 滚屏组件标示。 必选
元素。
-
ui-fullpage-page
- 滚屏页样式
必选
元素。
-
ui-fullpage-pageinner
- 滚屏内容区域样式。
必选
元素。
属性
| 属性 |
取值范围 |
默认值 |
说明 |
| loop |
true/false |
false |
是否循环滚动 |
| gesture |
true/false |
false |
是否手势跟随 |
| dots |
true/false |
false |
是否显示滚动点 |
| arrow |
true/false |
false |
是否显示向上指示箭头 |
| speed |
Number（毫秒） |
500 |
滚动动画的速度 |
| fullPage |
true/false |
true |
是否撑满整屏（取false时，默认以组件的父对象的高度为准） |
事件
在操作过程中可以通过以下事件来控制滚屏组件的操作。
| 事件 |
参数 |
说明 |
| beforeChange |
event, cur, next，其中cur 是当前页的下标，next是目标页的下标 |
将要改变显示页之前触发 |
| change |
event, cur, next，其中cur 是当前页的下标，next是目标页的下标 |
发生改变显示页时触发 |
| afterChange |
event, cur，其中cur 是当前页的下标 |
发生改变显示页后触发 |
方法
在操作过程中可以通过以下方法来控制滚屏组件的操作。
| 方法 |
参数 |
说明 |
| start |
无 |
使滚屏对象可以滚动 |
| stop |
无 |
禁止滚屏对象滚动 |
| moveTo |
next目标页的下标（从0开始） |
移动到目标页 |
| prev |
无 |
移动到上一页 |
| next |
无 |
移动到下一页 |
| getCurIndex |
无 |
获取当前页的下标 |
搜索框（Searchbar）
<div class="ui-searchbar">
<form class="ui-searchbar-container">
<div class="ui-searchbar-input">
<input type="search" placeholder="Search"/>
</div>
</form>
<div class="ui-searchbar-content">
<div class="ui-list-block ui-searchbar-list">
<ul>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">北京</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item ui-searchbar-ignore">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">河北</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">辽宁</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">吉林</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">黑龙江</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">甘肃</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">内蒙古</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">山东</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">山西</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">河南</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">湖北</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">湖南</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">浙江</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">上海</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">重庆</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">广东</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">福建</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">西藏</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">新疆</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">四川</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">广西</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">江西</div>
</div>
</li>
<li class="ui-list-item-content ui-searchbar-item">
<div class="ui-list-item-inner">
<div class="ui-list-item-title ui-searchbar-key">陕西</div>
</div>
</li>
</ul>
</div>
</div>
</div>
JS 部分
domReady(function(require){
$('.ui-searchbar').on('search',function(e,query,foundItems){
console.log(query);
}).searchbar({
cancel:'取消'
})
});
通过searchbar方法返回一个或多个搜索框对象的数组（根据选择器选到的dom对象个数）
var sb = $('.ui-searchbar').searchbar(); //单个
var sbs = $('.ui-searchbar').searchbar(); //数组
样式说明
-
ui-searchbar
- 搜索框组件标示。 必选
元素。
-
ui-searchbar-container
- 搜索框容器样式。 必选
元素。
-
ui-searchbar-input
- 搜索框样式
必选
元素。
-
ui-searchbar-content
- 搜索内容区域样式。
可选
元素。
-
ui-list-block ui-searchbar-list
- 搜索列表样式。
可选
元素。
-
ui-list-item-content ui-searchbar-item
- 搜索列表项样式。
可选
元素。
-
ui-list-item-inner
- 搜索列表项内容样式。
可选
元素。
-
ui-list-item-title
- 搜索项标题样式。
可选
元素。
-
ui-searchbar-key
- 搜索项标示。
可选
元素。
-
ui-searchbar-ignore
- 搜索项排除标示（添加该样式始终显示）。
可选
元素。
属性
| 属性 |
取值范围 |
默认值 |
说明 |
| customSearch |
true/false |
false |
是否启用自定义搜索（当该值为true时，可通过监听search事件来进行自定义搜索） |
| cancel |
Sting |
取消 |
取消按钮显示内容 |
事件
在操作过程中可以通过以下事件来控制搜索框的操作。
| 事件 |
参数 |
说明 |
| enableSearch |
event |
当搜索栏可以进行搜索时触发 |
| disableSearch |
event |
搜索栏由可搜索状态变为普通状态时触发 |
| clearSearch |
event |
清空搜索栏时触发 |
| search |
event, query, foundItems，其中query 是当前搜索栏的输入内容,foundItems 当customSearch为false时，传入的搜索结果集数组 |
进行搜索时触发 |
方法
在操作过程中可以通过以下方法来控制搜索框的操作。
| 方法 |
参数 |
说明 |
| enable |
无 |
使搜索栏处于搜索状态 |
| disable |
无 |
使搜索栏处于普通状态 |
| clear |
无 |
清空搜索栏 |
| search |
query搜索关键字 |
根据传入值进行搜索 |
图片浏览器（Photobrowser）
<div class="ui-photo-browser">
<div class="ui-photo-browser-container">
<div class="ui-slider-item">
<img class="ui-slider-img" src="../img/4.jpg"></div>
<div class="ui-slider-item">
<img class="ui-slider-img" src="../img/5.jpg"></div>
<div class="ui-slider-item">
<img class="ui-slider-img" src="../img/6.jpg"></div>
<div class="ui-slider-item">
<img class="ui-slider-img" src="../img/7.jpg"></div>
</div>
</div>
JS 部分
domReady(function(require){
$('.ui-photo-browser').photobrowser({
loop:true,
speed:400,
index:0,
gestur:true,
light:false,
space:0,
captions: ['描述1','描述2','描述3','描述4']
}).open()
});
通过photobrowser方法返回一个或多个图片浏览器对象的数组（根据选择器选到的dom对象个数）
var pb = $('.ui-photo-browser').photobrowser(); //单个
var pbs = $('.ui-photo-browser').photobrowser(); //数组
样式说明
-
ui-photo-browser
- 图片浏览器组件标示。 必选
元素。
-
ui-photo-browser-container
- 图片浏览器组件内容区域样式。 必选
元素。
-
ui-slider-item
- 图片内容项样式
必选
元素。
-
ui-slider-img
- 图片样式。
必选
元素。
属性
| 属性 |
取值范围 |
默认值 |
说明 |
| loop |
true/false |
false |
是否循环播放 |
| speed |
Number（毫秒） |
400 |
滚动动画的速度 |
| index |
Number |
0 |
默认显示的图片下标（从0开始） |
| captions |
图片的描述（array） |
无 |
针对每张图片的描述数组 |
| light |
true/false |
false |
是否采用白背景模式，默认为黑色系 |
| space |
Number |
10 |
图片间的间隔 |
方法
在操作过程中可以通过以下方法来控制滑动删除的操作。
| 方法 |
参数 |
说明 |
| open |
index需要打开的图片下标 |
打开图片浏览器 |
| moveTo |
next目标图片的下标 |
移动到指定下标的图片 |
| prev |
无 |
移动到上一张图片 |
| next |
无 |
移动到下一张图片 |
| close |
无 |
关闭图片浏览器 |
图片懒加载（Lazyloadimage）
<div class="ui-lazy-loader">
<div class="ui-lazy-loader-content">
<p>
<img data-src="http://www.freeimages.co.uk/galleries/sports/relaxation/thumbs/peaceful_bamboo_grove.jpg" class="ui-lazy" />
</p>
<p>
<img data-src="http://www.freeimages.co.uk/galleries/sports/relaxation/thumbs/peaceful_lake.jpg" class="ui-lazy" />
</p>
<p>
<img data-src="http://www.freeimages.co.uk/galleries/sports/relaxation/thumbs/quiet_rainforest.jpg" class="ui-lazy" />
</p>
<p>
<img data-src="http://www.freeimages.co.uk/galleries/sports/relaxation/thumbs/mossy_glade.jpg" class="ui-lazy" />
</p>
<p>
<img data-src="http://www.freeimages.co.uk/galleries/sports/relaxation/thumbs/quiet_zen_retreat.jpg" class="ui-lazy" />
</p>
<p>
<img data-src="http://www.freeimages.co.uk/galleries/sports/relaxation/thumbs/still_sunset.jpg" class="ui-lazy" />
</p>
<p>
<img data-src="http://www.freeimages.co.uk/galleries/sports/relaxation/thumbs/reading_a_book.jpg" class="ui-lazy" />
</p>
<p>
<img data-src="http://www.freeimages.co.uk/galleries/sports/relaxation/thumbs/zen_tranquility.jpg" class="ui-lazy" />
</p>
<p>
<img data-src="http://www.freeimages.co.uk/galleries/sports/relaxation/thumbs/calm_zen_garden.jpg" class="ui-lazy" />
</p>
<p>
<img data-src="http://www.freeimages.co.uk/galleries/sports/relaxation/thumbs/calm_ocean.jpg" class="ui-lazy" />
</p>
<div style='height:300px;' data-background="http://www.freeimages.co.uk/galleries/sports/relaxation/thumbs/beach_walk.jpg" class="ui-lazy"></div>
</div>
</div>
JS 部分
domReady(function(require){
$('.ui-lazy-loader').lazyloadimage();
});
通过lazyloadimage方法返回一个或多个图片懒加载对象的数组（根据选择器选到的dom对象个数）
var lli = $('.ui-lazy-loader').lazyloadimage(); //单个
var llis = $('.ui-lazy-loader').lazyloadimage(); //数组
样式说明
-
ui-lazy-loader
- 图片懒加载组件顶层标示。 必选
元素。
-
ui-lazy-loader-content
- 图片懒加载组件内容区域样式。 必选
元素。
-
ui-lazy
- 延迟加载项样式
必选
元素。
属性
| 属性 |
取值范围 |
默认值 |
说明 |
| placeholderSrc |
Sting
|
data:image/png;base64,iVBORw0K
GgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bK
AAAAA1BMVEXCwsK592mkAAAACklEQVQI12Ng
AAAAAgAB4iG8MwAAAABJRU5ErkJggg==
|
默认图片站位图，base64图片格式 |
| lazyContent |
selector（样式选择器）
|
.ui-lazy-loader-content
|
需要进行图片加载的区域 |
列表刷新（Refresh）
<div class="ui-list-block ui-media-list">任意列表组件外层</div>
JS 部分
domReady(function(require) {
$('.ui-list-block').append('<ul></ul>').on('pullup', function(e, refresh) {
pullupRefresh(refresh)
}).on('pulldown', function(e, refresh) {
pulldownRefresh(refresh)
}).refresh().pullupLoading()
});
/**
* 下拉加载具体业务实现
*/
function pulldownRefresh(refresh) {
var self = refresh;
setTimeout(function() {
var ul = $('.ui-list-block ul');
var len = ul.children().length
for (var i = 1; i < 5; i++) {
ul.prepend('<li><div class="ui-list-item-link ui-list-item-content">' +
'<div class="ui-item-media"><img src="img/dmbj.jpg" width="80"/></div>' +
'<div class="ui-list-item-inner">' +
'<div class="ui-list-item-title-row">' +
'<div class="ui-list-item-title">盗墓笔记 NO.' + (len + i) + '</div>' +
'<div class="ui-list-item-after">￥150</div>' +
'</div>' +
'<div class="ui-media-item-subtitle">南派三叔</div>' +
'<div class="ui-media-item-text">出身“老九门”世家的吴邪，因身为考古学家的父母在某次保护国家文物行动时被国外盗墓团伙杀害，吴家为保护吴邪安全将他送去德国读书，因而吴邪对“考古”事业有着与生俱来的兴趣，在一次护宝过程中他偶然获得一张记载着古墓秘密的战国帛书，为赶在不明势力之前解开帛书秘密，保护古墓中文物不受侵害，按照帛书的指引吴邪跟随三叔吴三省、潘子以及神秘小哥张起灵来到鲁殇王墓探究七星鲁王宫的秘密。 在古墓中，吴邪结识了前来探秘的王胖子并救下身份不明的阿宁，经过一系列惊险刺激匪夷所思的事件之后，众人又发现了更多未解的谜团。吴邪等人在和不明势力斗智斗勇的同时又踏上了新的探秘之旅。</div>' +
'</div></div></li>');
}
self.endPulldownToRefresh(); //refresh completed
}, 1500);
}
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh(refresh) {
var self = refresh;
setTimeout(function() {
var ul = $('.ui-list-block ul');
var len = ul.children().length
for (var i = 1; i < 15; i++) {
ul.prepend('<li><div class="ui-list-item-link ui-list-item-content">' +
'<div class="ui-item-media"><img src="img/dmbj.jpg" width="80"/></div>' +
'<div class="ui-list-item-inner">' +
'<div class="ui-list-item-title-row">' +
'<div class="ui-list-item-title">盗墓笔记 NO.' + (len + i) + '</div>' +
'<div class="ui-list-item-after">￥150</div>' +
'</div>' +
'<div class="ui-media-item-subtitle">南派三叔</div>' +
'<div class="ui-media-item-text">出身“老九门”世家的吴邪，因身为考古学家的父母在某次保护国家文物行动时被国外盗墓团伙杀害，吴家为保护吴邪安全将他送去德国读书，因而吴邪对“考古”事业有着与生俱来的兴趣，在一次护宝过程中他偶然获得一张记载着古墓秘密的战国帛书，为赶在不明势力之前解开帛书秘密，保护古墓中文物不受侵害，按照帛书的指引吴邪跟随三叔吴三省、潘子以及神秘小哥张起灵来到鲁殇王墓探究七星鲁王宫的秘密。 在古墓中，吴邪结识了前来探秘的王胖子并救下身份不明的阿宁，经过一系列惊险刺激匪夷所思的事件之后，众人又发现了更多未解的谜团。吴邪等人在和不明势力斗智斗勇的同时又踏上了新的探秘之旅。</div>' +
'</div></div></li>');
}
self.endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
}, 1500);
}
通过refresh方法返回一个或多个列表刷新对象的数组（根据选择器选到的dom对象个数）
var rf = $('.ui-list-block').refresh(); //单个
var rfs = $('.ui-list-block').refresh(); //数组
属性
| 属性 |
取值范围 |
默认值 |
说明 |
| down |
JSON
|
down:{
height: 50,
contentdown:'下拉可以刷新',
contentover:'释放立即刷新',
contentrefresh:'正在刷新...'
}
|
下拉配置项 |
| up |
JSON
|
up:{
height:40,
contentdown:'上拉显示更多',
contentover:'释放立即刷新',
contentrefresh:'正在加载...',
contentnomore:'没有更多数据了'
}
|
上拉配置项 |
| enablePulldown |
true
/
false
|
true
|
是否可以下拉 |
| enablePullup |
true
/
false
|
true
|
是否可以上拉 |
事件
在操作过程中可以通过以下事件来控制列表刷新的操作。
| 事件 |
参数 |
说明 |
| pulldown |
event, refresh
，其中
refresh
是当前操作的列表刷新对象，可通过该对象调用列表刷新的方法
|
执行下拉刷新时触发 |
| pullup |
event, refresh
，其中
refresh
是当前操作的列表刷新对象，可通过该对象调用列表刷新的方法
|
执行上拉加载时触发 |
方法
在操作过程中可以通过以下方法来控制列表刷新的操作。
| 方法 |
参数 |
说明 |
| pulldownLoading |
无
|
执行下拉刷新 |
| pullupLoading |
无
|
执行上拉加载 |
| endPulldownToRefresh |
无
|
结束下拉刷新 |
| endPullupToRefresh |
boolean类型，
可选，为true时标志无更多数据
|
结束上拉加载 |
| disablePulldown |
无
|
禁止下拉刷新 |
| disablePullup |
无
|
禁止上拉加载 |
| enablePulldown |
无
|
启用下拉刷新 |
| enablePullup |
无
|
启用上拉加载 |
轮播图（Slider）
<div class="ui-slider">
<div class="ui-slider-group">
<div class="ui-slider-item">
<img class="ui-slider-img" src="../img/1.png"></div>
<div class="ui-slider-item">
<img class="ui-slider-img" src="../img/2.png"></div>
<div class="ui-slider-item">
<img class="ui-slider-img" src="../img/3.png"></div>
<div class="ui-slider-item">
<img class="ui-slider-img" src="../img/4.png"></div>
</div>
</div>
JS 部分
domReady(function(require){
$('.ui-slider').on('slide',function(e,index){
console.log(index);
}).on('moveend',function(e){
console.log('moveend');
}).slider({
autoPlay:true,
loop:true,
dots:true,
gestur:true,
guide:true,
mulViewNum:1,
fullPage:true
});
});
通过slider方法返回一个或多个轮播图对象的数组（根据选择器选到的dom对象个数）
var sl = $('.ui-slider').slider(); //单个
var sls = $('.ui-slider').slider(); //数组
样式说明
-
ui-slider
- 轮播图组件标示。 必选
元素。
-
ui-slider-group
- 手轮播图容器对象样式
必选
元素。
-
ui-slider-item
- 轮播图对象样式。
必选
元素。
-
ui-slider-img
- 轮播图内容样式。
必选
元素。
属性
| 属性 |
取值范围 |
默认值 |
说明 |
| loop |
true/false |
false |
是否循环播放 |
| speed |
Number（毫秒） |
500 |
轮播图切换速度（毫秒） |
| index |
Number |
0 |
默认打开图片的下标 |
| autoPlay |
true/false |
false |
是否自动播放 |
| interval |
Number（毫秒） |
4000 |
自动播放的间隔时间（毫秒） |
| dots |
true/false |
false |
是否显示轮播点 |
| touch |
true/false |
true |
是否支持触摸切换 |
| mulViewNum |
Number |
1 |
一页显示的图片数量 |
| space |
Number |
0 |
图片之间的间隔 |
| fullPage |
true/false |
false |
是否全屏显示 |
| heightTarget |
'self'/'img'/'parent' |
self |
当fullPage为false时，轮播图高度取决于自身（self）、图片（img）、父对象（parent）三者 |
事件
在操作过程中可以通过以下事件来控制轮播图的操作。
| 事件 |
参数 |
说明 |
| slide |
event, to, from
，其中
to
目标图片的下标，
from
来源图片的下标
|
图片切换时触发 |
| slideend |
event, index
，其中
index
是当前图片的下标
|
执行上拉加载时触发 |
| moveend |
event, index, dir
，其中
index
是当前图片的下标，
dir
滑动方向（1为向右滑动到头，-1为向左滑动到头）
|
当loop为false时，通过手势触摸滑动到尽头时触发 |
方法
在操作过程中可以通过以下方法来控制轮播图的操作。
| 方法 |
参数 |
说明 |
| play |
无
|
使轮播图处于自动播放状态 |
| stop |
无
|
停止自动播放 |
| next |
无
|
切换到下一个 |
| prev |
无
|
切换到上一个 |
| slideTo |
to, [speed]其中to为目标图片的下标，speed为切换速度（可选）
|
切换到指定下标的图片 |
| getIndex |
无
|
获取当前显示图片的下标 |
开关（Switche）
<div class="ui-switch ui-active">
<div class="ui-switch-handle"></div>
</div>
<div class="ui-switch">
<div class="ui-switch-handle"></div>
</div>
<div class="ui-switch ui-switch-mini ui-active">
<div class="ui-switch-handle"></div>
</div>
<div class="ui-switch ui-switch-mini">
<div class="ui-switch-handle"></div>
</div>
<div class="ui-switch ui-switch-blue ui-active">
<div class="ui-switch-handle"></div>
</div>
<div class="ui-switch ui-switch-blue">
<div class="ui-switch-handle"></div>
</div>
<div class="ui-switch ui-switch-blue ui-switch-mini ui-active">
<div class="ui-switch-handle"></div>
</div>
<div class="ui-switch ui-switch-blue ui-switch-mini">
<div class="ui-switch-handle"></div>
</div>
JS 部分
domReady(function(require) {
$('.ui-switch').on('toggle', function(e,active) {
console.log(active);
}).switch();
});
通过switch方法返回一个或多个开关对象的数组（根据选择器选到的dom对象个数）
var sw = $('.ui-switch').switch(); //单个
var sws = $('.ui-switch').switch(); //数组
样式说明
-
ui-switch
- 开关组件标示。 必选
元素。
-
ui-switch-handle
- 开关按钮样式 必选
元素。
-
ui-active
- 开关按钮默认打开样式。
可选
元素。
-
ui-switch-mini
- 小型开关组件样式。
可选
元素。
-
ui-switch-blue
- 开关组件蓝底色样式。
可选
元素。
-
ui-switch-blue
- 开关组件蓝底色样式。
可选
元素。
事件
在操作过程中可以通过以下事件来控制开关对象的操作。
| 事件 |
参数 |
说明 |
| toggle |
event, active
，其中
active
开关的状态，true为打开，false为关闭
|
开关切换时触发 |
方法
在操作过程中可以通过以下方法来控制轮播图的操作。
| 方法 |
参数 |
说明 |
| toggle |
无
|
切换开关组件的状态 |
文本框
普通输入框：
<div class="ui-input-group">
<div class="ui-input-row">
<label>text</label>
<input type="text" required="required" placeholder="text"></div>
</div>
带清除按钮的输入框：
<div class="ui-input-group">
<div class="ui-input-row">
<label>清除按钮</label>
<input type="text" class="ui-input-clear" placeholder="带清除按钮的输入框"></div>
</div>
语音输入输入框：
<div class="ui-input-group">
<div class="ui-input-row">
<label>语音输入</label>
<input type="text" class="ui-input-speech ui-input-clear" placeholder="语音输入">
<span class="ui-icon ui-icon-speech"></span>
</div>
</div>
搜索框：
<div class="ui-input-row ui-search">
<input type="search" class="ui-input-clear" placeholder=""></div>
语音输入搜索框：
<div class="ui-input-row ui-search">
<input type="search" class="ui-input-speech ui-input-clear" placeholder="带语音输入的搜索框">
<span class="ui-icon ui-icon-speech"></span>
</div>
下拉：
<div class="ui-input-group">
<div class="ui-input-row">
<label>请选择</label>
<select>
<option value=0>选项一</option>
<option value=1>选项二</option>
<option value=2>选项三</option>
<option value=3>选项四</option>
</select>
</div>
</div>
多选框：
<div class="ui-input-group">
<div class="ui-input-row ui-checkbox ui-left">
<label>left checkbox</label>
<input name="checkbox" type="checkbox" value="0"></div>
<div class="ui-input-row ui-checkbox">
<label>right checkbox</label>
<input name="checkbox1" type="checkbox" checked></div>
<div id="discheck" class="ui-input-row ui-checkbox ui-left">
<label>disabled checkbox</label>
<input name="checkbox" type="checkbox" value="2" disabled="disabled"></div>
</div>
单选框：
<div class="ui-input-group">
<div class="ui-input-row ui-radio ui-left" >
<label>radio</label>
<input name="radio1" type="radio" value="0"></div>
<div class="ui-input-row ui-radio">
<label>radio</label>
<input name="radio1" type="radio" value="1" checked></div>
<div class="ui-input-row ui-radio ui-left" >
<label>disabled radio</label>
<input name="radio1" type="radio" value="2" disabled="disabled"></div>
</div>
card-input
<div class="ui-card">
<div class="ui-input-group">
<div class="ui-input-row">
<label>普通</label>
<input type="email" required="required" placeholder="email"></div>
</div>
</div>
账户、密码
<div class="ui-group-card">
<div class="ui-input-row">
<input type="text" class="ui-input-clear ui-input" placeholder="账号"></div>
<div class="ui-input-row">
<input type="password" class="ui-input-clear ui-input" placeholder="密码"></div>
</div>
文本域
<div class="ui-input-row ui-input-textarea">
<textarea rows="5" placeholder="多行文本框"></textarea>
</div>
样式说明
-
ui-input-group
- 输入框组件外层容器。 必选
元素。
-
ui-input-row
- 输入框组件行容器。 必选
元素。
-
ui-input-clear
- 清除图标样式。
可选
元素。
-
ui-input-speech
- 语音录入样式。
必选
元素。
-
ui-icon ui-icon-speech
- 语音录入图标样式。
必选
元素。
-
ui-checkbox ui-left
- 左侧多选框样式。
可选
元素。
-
ui-radio ui-left
- 左侧单选框样式。
可选
元素。
-
ui-input-textarea
- 文本域样式。
可选
元素。