可排序列表是列表的扩展,可以对列表进行排序.
让我们来看一下可排序列表元素的布局结构:
- <!--?加在列表区上额外的“sortable”类?-->
-
<div?class="list-block?sortable">
-
????<li>
-
????????<div?class="item-content">
-
????????????<div?class="item-media">...</div>
-
????????????<div?class="item-inner">...</div>
-
????????</div>
-
????????<!--?可排序句柄元素?-->
-
????????<div?class="sortable-handler"></div>
-
????</li>
- </div>
复制
其中:
-
sortable-handler
?- 可拖拽元素("draggable" element)(默认隐藏),允许你通过它来调整列表顺序
使列表变成可排序列表视图十分简单,只需要给列表区加上“sortable”类,并在列表元素<li>中加入“sortable-handler”元素作为其直接子元素
开启和关闭排序功能
在拥有可排序列表之后,我们需要某种方法来开启或者关闭排序功能。
通过HTML标签控制
可以通过在链接中设置特定的类和data属性来开启或者关闭排序功能:
-
将"open-sortable"类加入到任意HTML元素中(推荐链接元素),点击该元素实现开启排序功能
-
将"close-sortable"类加入到任意HTML元素中(推荐链接元素),点击该元素实现关闭排序功能
-
将"toggle-sortable"类加入到任意HTML元素中(推荐链接元素),点击该元素实现切换(开启/关闭)排序功能
-
如果在应用中有多个可排序列表,你需要在以上元素中加入data-sortable=".sortable"属性,以CSS选择器对应相应的可排序列表
-
<div?class="content-block">
-
????<!--?我们在data-sortable属性中指定目标可排序列表?-->
-
????<p><a?href="#"?data-sortable=".sortable"?class="open-sortable">Enable?sortable</a></p>
-
????<p><a?href="#"?data-sortable=".sortable"?class="close-sortable">Disable?sortable</a></p>
-
????<p><a?href="#"?data-sortable=".sortable"?class="toggle-sortable">Toggle?sortable</a></p>
- </div>
- <!--?可排序列表?-->
-
<div?class="list-block?sortable">
-
????<ul>
-
??????<li>
-
????????<div?class="item-content">
-
??????????<div?class="item-media"><i?class="icon?icon-f7"></i></div>
-
??????????<div?class="item-inner">
-
????????????<div?class="item-title">Item?1</div>
-
????????????<div?class="item-after">$10</div>
-
??????????</div>
-
????????</div>
-
????????<!--?可排序句柄??-->
-
????????<div?class="sortable-handler"></div>
-
??????</li>
-
??????<li>
-
????????<div?class="item-content">
-
??????????<div?class="item-media"><i?class="icon?icon-f7"></i></div>
-
??????????<div?class="item-inner">
-
????????????<div?class="item-title">Item?2</div>
-
????????????<div?class="item-after">$20</div>
-
??????????</div>
-
????????</div>
-
????????<div?class="sortable-handler"></div>
-
??????</li>
- ??????...
-
????</ul>
- </div>
复制
实例预览
通过JavaScript控制
可以通过恰当的App方法:
myApp.sortableOpen(sortableContainer) - 在指定的可排序列表开启排序功能
- sortableContainer - 可排序列表的HTML元素或CSS选择器,可选的。如果没有指定,Framework7默认将第一个<div class="list-block sortable">元素作为该方法目标。
myApp.sortableClose(sortableContainer) - 在指定的可排序列表关闭排序功能
- sortableContainer - 可排序列表的HTML元素或CSS选择器,可选的。如果没有指定,Framework7默认将第一个<div class="list-block sortable">元素作为该方法目标。
myApp.sortableToggle(sortableContainer) - 在指定的可排序列表切换(开启/关闭)排序功能
- sortableContainer - 可排序列表的HTML元素或CSS选择器,可选的。如果没有指定,Framework7默认将第一个<div class="list-block sortable">元素作为该方法目标。
-
<p><a?href="#"?class="open">Enable?sortable</a></p>
-
<p><a?href="#"?class="close">Disable?sortable</a></p>
-
<p><a?href="#"?class="toggle">Toggle?sortable</a></p>
复制
?
-
var?myApp?=?new?Framework7();
- ?
-
var?$$?=?Dom7;
- ?
-
$$(‘.open‘).on(‘click‘,?function?()?{
-
??myApp.sortableOpen(‘.sortable‘);
- });
-
$$(‘.close‘).on(‘click‘,?function?()?{
-
??myApp.sortableClose(‘.sortable‘);
- });
-
$$(‘.toggle‘).on(‘click‘,?function?()?{
-
??myApp.sortableToggle(‘.sortable‘);
- });
复制
实例预览
事件(Event)
目标(Target)
说明(Description)
open |
可排序列表<div class="list-block sortable"> |
当开启排序功能时触发 |
close |
可排序列表<div class="list-block sortable"> |
当关闭排序功能时触发 |
sort |
列表项目<li> |
当用户释放正在排序的列表项目(<li>)且该项目的顺序改变时触发
|
移动端安卓和IOS开发框架Framework7教程-可排序列表(Sortable List)
原文:http://zaixianshouce.iteye.com/blog/2305122