首页 > 移动平台 > 详细

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

时间:2016-06-18 02:13:23      阅读:276      评论:0      收藏:0      [点我收藏+]

可排序列表是列表的扩展,可以对列表进行排序.

让我们来看一下可排序列表元素的布局结构:

  1. <!--?加在列表区上额外的“sortable”类?-->
  2. <div?class="list-block?sortable">
  3. ????<li>
  4. ????????<div?class="item-content">
  5. ????????????<div?class="item-media">...</div>
  6. ????????????<div?class="item-inner">...</div>
  7. ????????</div>
  8. ????????<!--?可排序句柄元素?-->
  9. ????????<div?class="sortable-handler"></div>
  10. ????</li>
  11. </div>
复制

其中:

  • sortable-handler?- 可拖拽元素("draggable" element)(默认隐藏),允许你通过它来调整列表顺序

使列表变成可排序列表视图十分简单,只需要给列表区加上“sortable”类,并在列表元素<li>中加入“sortable-handler”元素作为其直接子元素

开启和关闭排序功能

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

通过HTML标签控制

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

  • "open-sortable"类加入到任意HTML元素中(推荐链接元素),点击该元素实现开启排序功能

  • "close-sortable"类加入到任意HTML元素中(推荐链接元素),点击该元素实现关闭排序功能

  • "toggle-sortable"类加入到任意HTML元素中(推荐链接元素),点击该元素实现切换(开启/关闭)排序功能

  • 如果在应用中有多个可排序列表,你需要在以上元素中加入data-sortable=".sortable"属性,以CSS选择器对应相应的可排序列表

  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. });
复制

实例预览

Sortable Events

事件(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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!