Mootools 1.2教程(23)——滑动效果(Slide)(4)
作者:Fanhp 来源:Fdream博客 发布时间:2009-03-04 12:33:00
标签:Mootools,教程,滑动,slide,JavaScript
代码示例
上面所讲的这些基本涵盖了全部基本用法。下面的示例将使用我们上面学到的大部分知识,显示一些不同的滑动元素,并提供一些div作为指示器,以便你可以清楚地看到这些事件。
首先,创建HTML文件。
参考代码:
<div id="start" class="ind">Start</div>
<div id="cancel" class="ind">Cancel</div>
<div id="complete" class="ind">Complete</div>
<br /><br />
<button id="openA">open A</button>
<button id="closeA">close A</button>
<div id="slideA" class="slide">Here is some content - A. Notice the delay before onComplete fires. This is due to the transition effect, the onComplete will not fire until the slide element stops "elasticing." Also, notice that if you click back and forth, it will "cancel" the previous call and give the new one priority.</div>
<button id="openB">open B</button>
<button id="closeB">close B</button>
<div id="slideB" class="slide">Here is some content - B. Notice how if you click me multiple times quickly I "chain" the events. This slide is set up with the option "link: 'chain'"</div>
<button id="openC">toggle C</button>
<div id="slideC" class="slide">Here is some content - C</div>
<button id="openD">toggle D</button>
<div id="slideD" class="slide">Here is some content - D. Notice how I am not hooked into any events. This was done with the .slide shortcut.</div>
<button id="openE">toggle E</button>
<div id="slide_wrap">
<div id="slideE" class="slide">Here is some content - E</div>
</div>
接下来是CSS文件。我们让它尽量保持简单。
参考代码:
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}
#slide_wrap {
padding: 30px;
background-color: #D47000;
0
投稿
猜你喜欢
- 一、两层结构的ASP应用有何缺点 在Browser/Server 应用程序开发领域,微软公司的IIS/ASP以其强大的功能,良好的扩展能力,
- 在Asp中如何得到所有表单的名称跟对应的值。其实,这个问题很简单,但是可能还是有很多人不知道该怎么做,所以特地写下来,仅供参考。在Asp程序
- 对于xml2ddl项目,Freshmeat.org提供了一整套基于GNU或者GPL通用公共许可证下的Python程序。在一个运行的Pytho
- 描述返回表达式,此表达式已被格式化为日期或时间。语法FormatDateTime(Date[, NamedFormat])FormatDat
- ASP+javascript实现可显示和隐藏的树型菜单实例:<script language=&qu
- Douglas Crockford是JavaScript开发社区最知名的权威,是JSON、JSLint、JSMin和ADSafe之父,是《J
- 设计方法曾经是个很尴尬的话题,因为经常看上去很美。专业人士们动手动脚折腾一大圈,出来的结果令人大跌眼镜。也有些设计师总喜欢把方法、概念吹的特
- 思想:4个数字的排列,加上3个运算符的排列,使用后缀表达式的表现如下:情形一:1,2,3,4,+,-,* => 24*24*4情形二:
- MySQL安全性指南(2) 作 者: 晏子2.1.3 数据库和表权限下列权限运用于数据库和表上的操作。ALTER允许你使用ALTER TAB
- MYSQL数据库安装完成后,默认最大连接数是100,一般流量稍微大一点的论坛或网站这个连接数是远远不够的,增加默认MYSQL连接数的方法有两
- 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图
- 最近在做个大数据量的录入,为了方便客户输入,需要通过方向键来移动到输入框中,本代码仅供学习、研究,请勿用于其它用途:D下面贴的代码只是贴出来
- 若对于同一数据库实例中的两个数据库进行同步则直接对数据库表创建Trigger。SQL Server 2005的联机帮助:Trigger on
- 代码如下:<% myDSN="DSN=xur;uid=xur;pwd=xur"mySQL="s
- 首先说明,伪造访问来路不是什么光明正大的事情,目的就是为了欺骗服务器。原本以为给 XMLHTTP 对象增加一个 Referer 的heade
- Oracle 背景资料 在介绍 Oracle9i 之前我们先介绍一些关于Oracle 公司的资料,让各位朋友更多了解 Oracle。 197
- 1.彻底弄懂CSS盒子模式一(DIV布局快速入门) 2.彻底弄懂CSS盒子模式二(导航栏实例) 4.彻底弄懂CSS盒子模式四(绝对定位和相对
- 一、概述公司新购了一批PC,准备把几个性能较优的PC升级为数据库服务器,替换老旧的机器。公司有套POS终端软件,后台数据存储是 MySQL
- SQLserver 2000中出现“指定的服务并未以已安装的服务存在" 解决方案一、将计算机名改成大写。二、将sql server
- 这篇是Nicholas讨论如果防止脚本失控的第二篇,主要讨论了如何重构嵌套循环、递归,以及那些在函数内部同时执行很多子操作的函数。基本的思想