移动端安卓和IOS开发框架Framework7教程-可排序列表（Sortable List）

开启和关闭排序功能

在拥有可排序列表之后，我们需要某种方法来开启或者关闭排序功能。

通过HTML标签控制

可以通过在链接中设置特定的类和data属性来开启或者关闭排序功能：

1. <div?class="content-block">
2. ????<!--?我们在data-sortable属性中指定目标可排序列表?-->
3. ????<p><a?href="#"?data-sortable=".sortable"?class="open-sortable">Enable?sortable</a></p>
4. ????<p><a?href="#"?data-sortable=".sortable"?class="close-sortable">Disable?sortable</a></p>
5. ????<p><a?href="#"?data-sortable=".sortable"?class="toggle-sortable">Toggle?sortable</a></p>
6. </div>
7. <!--?可排序列表?-->
8. <div?class="list-block?sortable">
9. ????<ul>
10. ??????<li>
11. ????????<div?class="item-content">
12. ??????????<div?class="item-media"><i?class="icon?icon-f7"></i></div>
13. ??????????<div?class="item-inner">
14. ????????????<div?class="item-title">Item?1</div>
15. ????????????<div?class="item-after">$10</div>
16. ??????????</div>
17. ????????</div>
18. ????????<!--?可排序句柄??-->
19. ????????<div?class="sortable-handler"></div>
20. ??????</li>
21. ??????<li>
22. ????????<div?class="item-content">
23. ??????????<div?class="item-media"><i?class="icon?icon-f7"></i></div>
24. ??????????<div?class="item-inner">
25. ????????????<div?class="item-title">Item?2</div>
26. ????????????<div?class="item-after">$20</div>
27. ??????????</div>
28. ????????</div>
29. ????????<div?class="sortable-handler"></div>
30. ??????</li>
31. ??????...
32. ????</ul>
33. </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">元素作为该方法目标。

1. <p><a?href="#"?class="open">Enable?sortable</a></p>
2. <p><a?href="#"?class="close">Disable?sortable</a></p>
3. <p><a?href="#"?class="toggle">Toggle?sortable</a></p>

?

1. var?myApp?=?new?Framework7();
2. ?
3. var?$$?=?Dom7;
4. ?
5. $$(‘.open‘).on(‘click‘,?function?()?{
6. ??myApp.sortableOpen(‘.sortable‘);
7. });
8. $$(‘.close‘).on(‘click‘,?function?()?{
9. ??myApp.sortableClose(‘.sortable‘);
10. });
11. $$(‘.toggle‘).on(‘click‘,?function?()?{
12. ??myApp.sortableToggle(‘.sortable‘);
13. });

实例预览

移动端安卓和IOS开发框架Framework7教程-可排序列表（Sortable List）

原文：http://zaixianshouce.iteye.com/blog/2305122