Mootools 1.2教程(16)——排序类和方法简介
作者:Fdream 来源:Fdream博客 发布时间:2008-12-10 14:18:00
标签:mootools,排序,类,教程,javascript
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
0
投稿
猜你喜欢
- Oracle 的正规表达式的实施是以各种 SQL 函数和一个 WHERE 子句操作符的形式出现的。如果您不熟悉正规表达式,那么这篇文章可以让
- 例子:Response.Cookies("letwego")("visiter")="84
- 1005:创建表失败1006:创建数据库失败1007:数据库已存在,创建数据库失败1008:数据库不存在,删除数据库失败1009:不能删除数
- 一个什么都不懂的家伙非跟我要个sql查询器 随便写了一个,当然为了数据安全,要过滤掉一个sql关键词和系统中的一些表了 哦,对了,里面的一些
- 在Windows系统中用“Ctrl+C”和“Ctrl+V”就可以完成复制、粘贴工作,是不是很爽?其实使用a标签的accesskey属性也可以
- 在MySQL中有两种方法1、create table t_name select ...2、create table t_name like
- 一、MySQL数据库的实例管理器概述:1、MySQL数据库的实例管理器(IM)是通过TCP/IP端口运行的后台程序,用来监视和管理MySQL
- 阅读上一篇:FrontPage XP设计教程4——Css样式表的应用表单在网站的制作过程中是比较常见的,举个简单的例子,我们在申请免费电子信
- 该语句的作用是:启用或禁用错误处理程序。一般用法如下:On Error Resume NextOn Error GoTo 0如果在您的代码中
- 这篇论坛文章(赛迪网技术社区)详细讲解了SQL Server海量数据导入的最快方法,更多内容请参考下文:最近做某项目的数据库分析,要实现对海
- CacheControl 属性设置是否可缓存由 ASP 生成的输出。默认地,代理服务器不会保持缓存副本。语法:response.CacheC
- 在我做过的N多项目中,基本都有个跑不开的怪圈——首页很难设计。根据进度安排,首页必须按时出来,不然没法review,也没法测试。于是,首页只
- 概要:Oracle关系数据库系统以其卓越的性能获得了广泛的应用,而保证数据库的安全性 是数据库管理工作的重要内容。本文是笔者在总结Oracl
- 合理地扩大页面链接响应区域可以提高网页的易用性。同时还要兼顾到链接的交互一致性以及视觉上的平衡,就需要做一些特殊的处理。实例一:一张图配一个
- QQ影音至9月发布之后一直口碑很好,视觉界面和交互设计也颇受好评,这是设计师们努力的结果,也是众多用户反馈的功劳。我们希望可以提供更多价值回
- 比如说点的是图片的左边,还是右边,上边还是下边?点击图片左右显示上下张,我怎么知道?这样就可以做出像QQ空间那样,打开上一个图片和下一个图片
- MySql5.0以后均支持存储过程,最近有空,研究了一把这个。格式:以下为引用的内容:CREATE PROCEDURE
- 下面是用SA-FileUp组件上传一个HTML文件的程序:fileup.htm < HTM
- --语 句 功 能 --数据操作 SELECT --从数据库表中检索数据行和列 INSERT --向数据库表添加新数据行 DELETE --
- 今天,使用各种所见即所得工具制作主页已经是一件非常容易的事情了。但是了解HTML源代码和语法,无疑对我们制作主页有更大的帮助,也可以使用户能