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的这一节。
包括MooTools 1.2的核心库和扩展(更多)库,上面的示例,一个外部的JavaScript文件,一个简单的HTML页面和一个CSS文件。
0
投稿
猜你喜欢
- python实现猫捉老鼠小游戏首界面开始游戏界面然后键盘操作小老鼠上下左右移动,猫自己去追,当猫追上老鼠则游戏结束这里用时3.2秒,最后将游
- 八月的UCDChina书友会主题是“信息分类和方法”,在会场中的内容是不足以简单的概述的,而这次交流至少对于分类、属性、关键词与Tag的定义
- 需求:因需要将一json文件中大量的信息填入一固定格式的Excel表格,单纯的复制粘贴肯定也能完成,但是想偷懒一下,于是借助Python解决
- 案例一 导入图片思路: 1.导入库 2.加载图片 3.创建窗口 4.显示图片 5.暂停窗口 6.关闭窗口# 1.导入库import cv2#
- 1 配置 Python3 环境单击 工具 > 编译系统 > 新建编译系统...弹出:替换里面的内容为:{ &nbs
- 实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect。 官
- 先看map()函数底层封装介绍:注释中翻译为:map(func, *iterables)——> map对象创建一个迭代器,使用来自的参
- LoadRunner监控MySQLhttp://www.docin.com/p-92272846.htmlAdvanced MySQL Pe
- 概述基于Swoole的websocket服务,再之前的消息系统系列的第4篇,实现了更加复杂的业务场景,是对消息推送的完善和优化,代码本身就是
- 本文目标:使用selenium3.0+python3操纵浏览器,打开百度网站。(相当于selenium的hello world)环境基础:p
- .xls格式 Office2003及以下版本 .xlsx格式Offi
- 1.表结构 2.表数据 3.查询teacher_name字段不能等于空并且也不能等于空字符SELECT * FROM s
- 如何修改NT的登录密码? 代码见下:<%Sub ChangeUserPassword(C
- 本文实例讲述了JS简单模拟触发按钮点击功能的方法。分享给大家供大家参考,具体如下:<html> <head&g
- 概况在开发过程中,我们一般直接用Python命令直接运行Flask程序。这样的运行只适合我们开发,方便我们调试。一旦程序部署到线上,这样运行
- 本文实例讲述了PHP abstract 抽象类定义与用法。分享给大家供大家参考,具体如下:PHP抽象类应用要点:1.定义一些方法,子类必须完
- random随机模块包括返回随机数的函数,可以用于模拟或者任何产生随机输出的程序。一.random模块常用函数介绍random.random
- 一、Python 矩阵基本运算引入 numpy 库import numpy as np1. python矩阵操作1)使用
- 今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI。所有代码的源码可以再github上下载的到:
- 用的pytorch来训练deeplabv3+在做deeplabv3+的过程中,我的训练图片是8位的,如下图:8位的:24位的:这样虽然在训练