网络编程
位置:首页>> 网络编程>> JavaScript>> Mootools 1.2教程(16)——排序类和方法简介(4)

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

作者:Fdream 来源:Fdream博客 发布时间:2008-12-10 14:18:00 

标签:mootools,排序,类,教程,javascript

代码示例

下面的示例使用了一些选项,全部的事件和上面描述的全部方法。希望这个代码有自解释性,不多注释里又更多说明。记住,下面所有的事情都必需在domready事件里面。

参考代码: 

var sortableListsArray = $$('#numberlist, #letterlist'); 
var sortableLists = new Sortables(sortableListsArray, { 
        // 当我移动的时候,复制一个副本跟随鼠标移动 
    clone: true, 
        // 定义拖动控制器(柄,把手)的css类名 
    handle: '.handle', 
        // 在拖动之后,允许你使用特效让它回到某个位置 
    revert: { 
        // 接受Fx选项 
        duration: 50 
    }, 
        // 决定拖动元素的不透明度,而不是跟随鼠标的副本 
    opacity: .5, 

    onStart: function(el){ 
        // 传递的是你正在拖动的元素 
        $('start_ind').highlight('#F3F865'); 
        el.highlight('#F3F865'); 
    }, 
    onSort: function(el) { 
        // 传递的是你正在拖动的元素 
        $('sort_ind').highlight('#F3F865'); 
    }, 
    onComplete: function(el) { 
        // 传递的是你正在拖动的元素 
        $('complete_ind').highlight('#F3F865'); 
        var listOne = sortableLists.serialize(0); 
        var listTwo = sortableLists.serialize(1); 
        $('numberOrder').set('text', listOne).highlight('#F3F865');    ; 
        $('letterOrder').set('text', listTwo).highlight('#F3F865');    ; 
    } 
}).detach(); // 禁用控制器,因此你必需点击按钮才能让它们可以拖动 

var addListoSort = $('addListTest'); 

$('addListButton').addEvent('click', function(){ 
        sortableLists.addLists(addListoSort); 
}); 

$('removeListButton').addEvent('click', function(){ 
    sortableLists.removeLists(addListoSort); 
}); 

$('enable_handles').addEvent('click', function(){ 
    sortableLists.attach(); 
}); 

$('disable_handles').addEvent('click', function(){ 
    sortableLists.detach(); 
}); 

var itemOne = $('one'); 

$('add_item').addEvent('click', function(){ 
    sortableLists.addItems(itemOne); 
}); 

$('remove_item').addEvent('click', function(){ 
    sortableLists.removeItems(itemOne); 
});


控制器默认是没有启用的(仔细看一下上面的代码)。要开始拖动排序,你需要点击“启用排序”按钮。

更多学习

参考阅读文档中有关sortable的这一节

下载一个包含你开始所需要的所有东西的zip包

包括MooTools 1.2的核心库和扩展(更多)库,上面的示例,一个外部的JavaScript文件,一个简单的HTML页面和一个CSS文件。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com