Mootools 1.2教程(20)——选项卡效果(Tabs)
作者:Fdream 来源:Fdream博客 发布时间:2008-12-26 18:19:00
原文地址:30 Days of Mootools 1.2 Tutorials - Day 20 - A Few Mootools Tabs
项目——创建选项卡效果的几种方式
阅读上一讲:Mootools 1.2教程(19)——Tooltips
今天将不只是受限于这个库和一些基本的编程知识,我们来做一个简单的小项目。通过使用我们目前为止已经学过的一些知识,有几种方式来创建当鼠标移上去或者点击时显示相应内容的tab。
简单的“额外信息”标签(TAB)
鼠标移上去显示内容的TAB
在这第一个项目中,我们要创建一个简单的菜单,当鼠标移动到这些菜单上时显示相应的内容。首先,我们来完成HTML代码——我们就用包含四个列表项的ul好了,然后再创建四个div(每一个div对应一个列表项):
参考代码:
// 这里是我们的菜单
<ul id="tabs">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
</ul>
// 这里是我们的内容div
<div id="contentone" class="hidden">content for one</div>
<div id="contenttwo" class="hidden">content for two</div>
<div id="contentthree" class="hidden">content for three</div>
现在,我们不需要关心怎么把它们做得漂亮。在CSS中,我们要做的全部事情就是把内容区块隐藏起来:
参考代码:
.hidden {
display: none;
好了,现在开始写MooTools代码。如果我们需要当用户把鼠标移上去的时候显示内容,当鼠标离开的时候隐藏内容,我们需要完成这样两个函数:
参考代码:
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
还有一些事件:
参考代码:
window.addEvent('domready', function() {
// 这里我们可以把容器元素赋值给一个变量
var elOne = $('contentone');
$('one').addEvents({
// 当鼠标进入的时候,我们调用showFunction
// 并绑定这个元素elOne
// 因此我们需要把它作为函数参数
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
现在,我们只需要为每个tab重复这个模式,并指定对应的内容区块就可以了。下面是完整的代码:
参考代码:
// 这里是用来改变样式的函数
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
// 在这里我们把我们的内容块赋值给不同变量
var elOne = $('contentone');
var elTwo = $('contenttwo');
var elThree = $('contentthree');
var elFour = $('contentfour');
// 给tab绑定事件
$('one').addEvents({
// 设置事件类型
// 并给事件控制函数绑定相应的变量
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
$('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({
'mouseenter': showFunction.bind(elThree),
'mouseleave': hideFunction.bind(elThree)
});
$('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
正如你所看到的,这一切看起来都非常的熟悉,完成这些并不需要任何我们目前为止没有学过的东西。
借鉴上面的想法,我们可以很轻松地调整它为点击时显示内容。我们就使用上面的HTML,然后修改一下MooTools代码,以完成点击事件。
首先,我们需要调整一下我们的函数。由于我们不能在鼠标离开时把内容隐藏起来,因此,我们需要换一种方式来切换这些div。可能最容易的选择是在点击时首先把它们全部隐藏起来,然后只把this(通过click事件传递进来的对象)所指的当前的内容显示出来。
参考代码:
var showFunction = function() {
$$('.hiddenB').setStyle('display', 'none');
this.setStyle('display', 'block');
}
现在,当我们通过把元素绑定到一个函数上来传递这个变量时,它将隐藏其他的区块,并显示当前的区块。
接下来,我们还需要调整一下我们的事件。首先,我们只需要一个事件了,因此我们使用.addEvent();方法,然后还需要改变事件的类型为“click”。
参考代码:
window.addEvent('domready', function() {
var elOneB = $('contentoneB');
var elTwoB = $('contenttwoB');
var elThreeB = $('contentthreeB');
var elFourB = $('contentfourB');
$('oneB').addEvent('click', showFunction.bind(elOneB));
$('twoB').addEvent('click', showFunction.bind(elTwoB));
$('threeB').addEvent('click', showFunction.bind(elThreeB));
$('fourB').addEvent('click', showFunction.bind(elFourB));
猜你喜欢
- 这是来自于Steven D编写的WEB前端开发设计要点的内容。虽然许多设计师已非常熟练的使用了Web标准,让人遗憾的是有很多细节的排版处理仍
- 优秀的Stoyan Stefanov在他的新书中(《Javascript Patterns》)介绍了很多编写高质量代码的技巧,比如避免使用全
- 完全备份的SH文件:exp_comp.shrq=` date +"%m%d" `su - oracle -c "
- 等啊等,约会都回来了,终于等到了Google放出今年的情人节Logo,原本下午四点就可以上线的这篇文章,为了等待Google谷歌美国总部的那
- 最近没事,写了个在项目经常要取城市或省份名的方法,所以改成了一个类.方便以后调用//****************************
- 想必大家都很喜欢用Word打字,用Excel进行计算和规划,用PowerPoint作幻灯片进行展示…,但是这只用到了Office系列产品的很
- 并行查询其优势就是可以通过多个线程来处理查询作业,从而提高查询的效率。SQL Server数据库为具有多个CPU的数据库服务器提供并行查询的
- 一、“无”的哲学佛家讲究“因果报应”,有果必有应。此段看似与主题没有血缘关系,实际讲的是“因”。我个人比较喜欢老子的道家思想,并喜欢以其思想
- 一扯上文化二字,总觉虚无缥缈、漫无边际,或者老气横秋,如何有趣地利用中华文化的思想和符号,结合现代的元素,使其成为有意思的传播手法,这个问题
- MySQL数据库配置技巧用root用户启动远程服务一直是安全大忌,因为如果服务程序出现问题,远程攻击者极有可能获得主机的完全控制权。MySQ
- 利用ASP从远程服务器上接收XML数据<% dim objXML dim objRootElement dim&n
- <%'***********************************************'函数
- 以下为谷歌国际少年绘画大赛,小学1-3年级作品。看孩子们的logo创意,自愧呀! 彩色世界我们热爱温暖的阳光,“O”代表我们心中的太阳。我们
- http://validator.w3.org/#validate_by_upload 在线校验网址点浏览,上次找到自己做的页面
- Oracle数据库以其高可靠性、安全性、可兼容性,得到越来越多的企业的青睐。如何使Oracle数据库保持优良性能,这是许多数据库管理员关心的
- 本文探讨了提高MySQL数据库性能的思路,并从8个方面给出了具体的解决方法。1、选取最适用的字段属性MySQL可以很好的支持大数据量的存取,
- 下面就是我们的authenticate.asp页面,在这里,将用户的信息收集起来,连同最初的URL一起传到一个识别用户身份的页面中。我们可用
- 以前工作的时候由于Oracle8i数据库经常出现用户过多的错误,由于数据量大,经常出现ORA:12500错误,但主要原因是访问过多而引起的,
- 此BUG最初是在《前端观察》网站刊登,这里再描述一下,代码如下:<style>*{ padding:0; m
- 因为外贸网站,禁止同行抄袭,所以防止中国ip访问访问,访问的时候有密码提示,这样的代码如何写.请给一个提示.或者有好的代码,请分享下。 &n