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));
猜你喜欢
- 本文实例为大家分享了python+tkinter实现学生管理系统的具体代码,供大家参考,具体内容如下 from tkinter i
- 一、父组件向子组件传值(props)步骤:在父组件中通过 v-bind 将数据传给子组件在子组件中通过 props 接收父组件传递过来的数据
- 前言为了介绍python语言中pandas库在数据分析中的重要作用,本人打算以NBA球星勒布朗詹姆斯在2020-2021赛季常规赛个人数据为
- 本文实例讲述了Python爬虫框架Scrapy常用命令。分享给大家供大家参考,具体如下:在Scrapy中,工具命令分为两种,一种为全局命令,
- Python关于删除list中的某个元素,一般有两种方法,pop()和remove()。remove() 函数用于移除列表中某个值的第一个匹
- 本文简介前段时间,黄同学写了一篇《MySQL窗口实战》文章(文章如下),但是里面大多数是以实战练习为主,没有做详细的解释。传送门:MySQL
- 1. 引言本文重点介绍Python中的三个特殊函数Map,Filter和Reduce,以及如何使用它们进行代码编程。在开始介绍之前,我们先来
- 1.安装vscode和python3.7(安装路径在:E:\Python\Python37);2.打开vscode,在左下角点击设置图标选择
- golang常用库:gorilla/mux-http路由库使用golang常用库:配置文件解析库-viper使用golang常用库:操作数据
- (1)标准类型操作符(所有的集合类型)成员关系 (in, not in) &nbs
- 昨天下班后忽然兴起想写一个爬虫抓抓网页上的东西。花了一个钟简单学习了python的基础语法,然后参照网上的例子自己写了个爬虫。python数
- 一、Go语言下载go语言官方下载地址:https://golang.org/dl/找到适合你系统的版本下载,本人下载的是windows版本。
- 本章是前一章的延续,我们使用RSA算法逐步实现加密,并详细讨论它.用于解密密文的函数是as跟随 :def decrypt(ciph
- 本人第一次使用vue awesome。踩到的坑确实不少。官网上面的用法写的很简单,按照上面做法基本会遇到如下这个问题轮播第二次之后,首屏会自
- 本文主要研究的是Python对内存的使用(深浅拷贝)的相关问题,具体介绍如下。浅拷贝就是对引用的拷贝(只拷贝父对象) 深拷贝就是对对象的资源
- 1.什么是解构?ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。它在语法上比ES5所提供的更加简洁、紧凑、清晰。
- sysbench是一个模块化的、跨平台、多线程基准测试工具,主要用于评估测试各种不同系统参数下的数据库负载情况。目前sysbench代码托管
- 需求背景公司前端使用 Highcharts 构建图表,图表的图例支持点击显示或隐藏相应的指标。现在有需求后端需要存储用户在前端点击后显示图表
- 这一篇笔记介绍 Django 系统 model 的外键处理,ForeignKey 以及相应的处理方法。这是一种一对多的字段类型,表示两张表之
- 概要基于 golang Gin 框架开发 web 服务时, 需要时不时的 go build , 然后重启服务查看运行结果.go build