搜索:
首页 >> JavaScript >> Js高级编程 >> Mootools 1.2教程(16)——排序类和方法简介

Mootools 1.2教程(16)——排序类和方法简介

2008-12-10 作者:Fdream 来源:Fdream博客 投递文章

MooTools 1.2的整理排序类Sortables

原文地址:30 Days of Mootools 1.2 Tutorials - Day 16 - Sortables and Intro to Methods

阅读上一讲:Mootools 1.2教程(15)——滚动条(Slider)

从今天开始,我们将开始讲解“更多”(more)库里面的更多插件。Sortables是一个非常强大的插件,能够真正地扩大你的用户界面设计的选择面。Sortables类还提供了包括一个名叫“serialize”的优秀方法,通过这个方法你额可以把这些元素的id作为数组输出——对于服务器端的开发非常有用。接下来,我们看看如何创建一个新的排序项集合,还有一定要看一下最后的演示实例。

基本知识

创建一个新的Sortable对象

首先,我们要把我们要排序的元素赋值给变量。对于Sortables来说,如果你想要多个列表之间的元素能够在相互之间拖拽,你需要把这些元素全部都放在一个数组中,就像这样:

参考代码: 

var sortableListsArray = $$('#listA, #listB');


这样就可以把两个ul的id放到一个数组里面了。我们现在就可以从这个数组创建一个新的sortable对象了:

参考代码: 

var sortableLists = new Sortables(sortableListsArray);


我们假设使用的是下面的HTML:

参考代码: 

<ul id="listA"> 
    <li>Item A1</li> 
    <li>Item A2</li> 
    <li>Item A3</li> 
    <li>Item A4</li> 
</ul> 

<ul id="listB"> 
    <li>Item B1</li> 
    <li>Item B2</li 
    <li>Item B3</li> 
    <li>Item B4</li> 
</ul>

我们的sortable列表最后看起来大概应该是这样的:

Item A1 
Item A2 
Item A3 
Item A4 


Item B1 
Item B2 
Item B3 
Item B4 

 

1   2  3  4 下一页 尾 页
Tags:mootools  排序    教程  javascript 
相关文章
手机版 Js高级编程 Asp之家 Aspxhome.com
闽ICP备06017341号