10款对设计者有用的MooTools实例

本文启发来自“jQuery Tutorials for Designers“.
它包含了许多有用的例子,非常适合初学者。我们把所有的例子都用MooTools 来实现一遍。

1. Basics(基础知识)

 

好了,我估计你已经下载了最新版的MooTools 库文件了。现在,您需要将它添加到您的网页中。最好的地方是<head>标签里。

1
2
3
4
5
6
7
8
<html>
  <head>
    ...
	<script type="text/javascript" src="mootools.js"></script>
    ...
  </head>
  ...
</html>

一旦DOM就绪了,MooTools就该进行 ‘domready’事件了,这意味着 “是时候来运行我们的代码了”。

1
2
3
4
5
window.addEvent('domready', function() {
 
  ...  
 
});

$函数,你可以通过它来根据一个ID选择DOM元素。

要获得一个元素,id =’someID’ 的元素对象。

1
$('someID');

$$ 函数,可以可以让你快速选择多个元素,并组成一个数组(一种你可以操作、获取和以任何方式重新排序的列表)。

要获得元素的集合,div 内部的一些是超链接的元素。

1
$$('#someID a'));

如果你想你的函数执行某个事件 ,例如点击.

1
$('someID').addEvent('click', function(e) {});

以上就是需要你知道,如何使用mootools。

2.Show/hide panel(显示/隐藏面板)

演示:demo

我们有2的div ,一个是使用id =“top2”的 div -包含面板,第二个是id=”top2“的div -含有链接,当做切换面板。

The HTML

1
2
3
4
5
<div class="maincontent">
    <h2>Show/Hide top  block</h2>
    <div id="top">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ultrices scelerisque erat. Etiam porttitor lectus sit amet est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sed augue. Suspendisse id pede ac neque pulvinar ultrices. In fermentum adipiscing elit. Suspendisse rhoncus tellus eget pede aliquam ultrices. Morbi luctus felis eget odio. Proin est. Etiam commodo. Curabitur ante. Maecenas fringilla libero id elit. Nulla libero. Ut eleifend aliquet pede. Donec rhoncus pharetra lacus. Sed nunc nisl, aliquet nec, eleifend quis, gravida quis, nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eu augue.</div>
    <div id="top2"><a href="">Push me</a></div>
</div>

我们需要MooTools “Slide” effect,再加上Fx.Slide 方法: toggle。

1
2
3
4
5
6
7
window.addEvent('domready', function() {
	var myHeight = new Fx.Slide('top').hide();
	$$('#top2 a').addEvent('click', function(e) {
		e.stop();
		myHeight.toggle();
	});
});

e.stop();-使用它,停止事件传播和中止执行事件的默认行为,我们只想使用链接来打开/关闭面板,别无其它。

3.Smooth scroll to some place on page(平滑移动到页面的某个位置)

演示: Demo

但我们的页面上有许多段落或表格数据很多的时候,需要滚动才能看得到,我们首先想到的是锚点链接,它能马上定位到某一个位置或返回到TOP。不过我们还需要的是通过点击相应的链接马上滚动到页面的相应段落。

我们应用到的是MooTools “SmoothScroll” effect ; 自动管理页面中的所有锚点, 并当点击跳转到目标锚点的过程中使用平滑移动的特效。

代码做很简单。

1
2
3
window.addEvent('domready', function() {
  	var mySmoothScroll = new SmoothScroll();  
});

4.Delete some block from webpage(从网页上删除一些块)

演示:Demo

要删除一些块( p, div, etc ),我们添加一个class=”delete” 到链接”。当您点击链接时块就会消失,然后从DOM里删除后,延迟1秒。

The HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="maincontent" id="delete">
  <h2>Delete Blocks example</h2>
  <p><a href="#" class="delete">delete Paragraph 1</a><br>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse lectus nibh, hendrerit sed, mollis ullamcorper, ultrices luctus, quam. Maecenas interdum. Fusce tincidunt iaculis mi. Praesent at metus. Vivamus sed est. Suspendisse adipiscing lobortis felis. Etiam sodales libero et metus. Donec porttitor luctus turpis. Duis purus diam, mollis sit amet, tincidunt et, hendrerit eget, nibh. Cras euismod sapien quis nisl. Donec at felis eu ipsum volutpat aliquet. Maecenas facilisis. Nam erat. Vivamus tortor massa, semper non, laoreet ut, cursus sed, metus. Donec sapien felis, lacinia at, vestibulum sit amet, placerat in, nulla.</p>
  <p><a href="#" class="delete">delete Paragraph 2</a><br>
      Nam nunc quam, facilisis non, tristique ac, porta a, velit. Fusce magna. Morbi auctor varius urna. Vivamus vel nulla. Ut nulla. Aliquam augue metus, convallis sollicitudin, imperdiet sit amet, molestie eu, risus. Donec eu velit. Proin ac elit quis justo pharetra pretium. Aenean vestibulum quam sit amet lacus. Nulla ornare urna et pede.</p>
  <p><a href="#" class="delete">delete Paragraph 3</a><br>
      In vel risus. Nulla laoreet. Curabitur sagittis urna ut ante. Sed quis dolor. Aliquam erat volutpat. Etiam ligula. Ut nunc enim, pretium eu, porttitor sit amet, ultricies ut, tortor. Aliquam erat volutpat. Nulla commodo auctor lacus. Aenean eu tortor. Maecenas dictum pharetra ante. Cras sollicitudin eros in nunc. Phasellus commodo scelerisque nulla. Maecenas at lectus. Duis feugiat ornare quam. Nam feugiat velit et dui. Fusce dapibus odio vitae lectus.</p>
  <p><a href="#" class="delete">delete Paragraph 4</a><br>
      Sed turpis. Nunc tempor purus ac lacus convallis sollicitudin. Donec feugiat. Cras ipsum lectus, ullamcorper consequat, vehicula non, elementum vel, lacus. Quisque sed ante quis purus suscipit congue. Integer eros tortor, fringilla quis, rutrum eu, placerat quis, quam. Morbi sed magna et dui elementum fermentum. Sed sed est. Proin ornare posuere nulla. Aliquam erat volutpat. Integer porttitor enim nec elit. Aliquam pellentesque nunc nec nulla luctus aliquet. Vestibulum lacus dolor, tristique eu, aliquet eget, laoreet ut, felis. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam fringilla lobortis dui. Morbi auctor orci nec nunc. Integer eu sem vitae arcu rhoncus fringilla. Sed quis nunc id dui vulputate semper. Donec nec leo at odio ultrices iaculis.</p>
  <p><a href="#" class="delete">delete Paragraph 5</a><br>
      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ultrices scelerisque erat. Etiam porttitor lectus sit amet est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sed augue. Suspendisse id pede ac neque pulvinar ultrices. In fermentum adipiscing elit. Suspendisse rhoncus tellus eget pede aliquam ultrices. Morbi luctus felis eget odio. Proin est. Etiam commodo. Curabitur ante. Maecenas fringilla libero id elit. Nulla libero. Ut eleifend aliquet pede. Donec rhoncus pharetra lacus. Sed nunc nisl, aliquet nec, eleifend quis, gravida quis, nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eu augue.</p>
</div>

The MooTools

1
2
3
4
5
6
7
8
9
10
window.addEvent('domready', function() {
   $$('a.delete').addEvent('click', function(e) {
       e.stop();////阻止链接的默认行为
       var p = this.getParent();//找到链接的父类元素
       p.fade(0);//将p对象淡入淡出到不透明度(opacity)为0%  
       (function(){ p.destroy(); }).delay(1000);
       //p.destroy();删除元素自身及其所有子元素(并进行内存垃圾收集).
       //delay(1000);延迟1秒
   });
});

5.Add/remove field(s) to form(从 form里添加/删除field(s) )

演示: Demo

想象一下,当你的表单上传的文件。你不知道有多少文件要上传,所以你希望有能力能添加/删除额外的字段。

要做到这一点,我们添加两个按钮:

  • 按钮名称为“加号” – 增加字段
  • 按钮名称为“减号” – 增加字段

Block that we will clone

1
2
3
4
5
6
7
8
9
10
11
<div id="uploadButtons">
   <input type="button" value="+" name="plus" class="noresize" />
   <input type="button" value="-" name="minus" class="noresize" />
</div>
<div id="uploadBlock">
  <label for="upload">File to upload: 
  <br />
  </label>
  <input name="upload[]" />
   <br />
</div>

We mark block we will clone with id=”uploadBlock”

1
2
3
4
5
6
7
8
9
10
11
window.addEvent('domready', function() {
	$('uploadForm').getElement('input[name=plus]').addEvent('click', function(){
		var clone = $('uploadBlock').clone().injectAfter('uploadBlock');
	});
	$('uploadForm').getElement('input[name=minus]').addEvent('click', function(){
		if ( $('uploadForm').getElements('input[name^=upload]').length == 1 )
			return false
		else
			$('uploadBlock').getNext().destroy();
	});
});
  • 当你点击 ‘+’ 时, 关于 input 块 被克隆 ,并插入到 第一个input 下方。
  • 当你点击 ‘-’ 时,我们检查,如果我们有一个以上的input时,我们可以 删除一个input。

6.Tips(提示条)

演示:Demo

当您想要显示一些元素的更多信息时,提示是一个不错的解决方案,但我们如何在网页上展现那?

Tip is showed on rollover event。MooTools已经为为我们提供了本地化的提示插件。这里你可以看到一个标准的例子,例如使用自定义的CSS和固定Tip。

1
2
3
4
5
6
7
8
9
10
window.addEvent('domready', function() {
	var tip_img = new Tips($$('.img'));
	var tip_link = new Tips($$('.link'), {
		className: 'custom'
	});
	var tip_link_fixed = new Tips($$('.link_fixed'), {
		className: 'custom',
		fixed:true
	});
});

7.Accordion(手风琴组件)

演示:Demo

Accordion 手风琴组件(对一组内容区域进行折叠/展开).

The HTML

1
2
3
4
<h3 class="title">Title</h3>
<div class="content">
	Content
</div>

The MooTools

1
2
3
window.addEvent('domready', function() {
	var myAccordion = new Accordion($('accordion'), 'h3.title', 'div.content');
});

8.Morph

演示: Demo

Morph is one of Effects. 提供一次对多个CSS属性进行动画特效变换的功能.

您可以设置CSS属性在指定class上。把它传递给morph方法。

1
2
3
4
5
6
7
8
9
window.addEvent('domready', function() {
	$('morphForm').addEvent('submit', function(e) {
		e.stop();
		if ( $('username').get('value') == 'elpaso' && $('password').get('value') == 'password' )
			$('loginMsg').set('text','Successful login').morph('.success');
		else
			$('loginMsg').set('text','Wrong Data').morph('.error');
	});
});

9.Make all links external(外部链接)

演示:Demo

在网页链接可以是内部的或外部的。在这个例子中,我们加上“rel=’nofollow’” 的所有外部链接,使他们在新的窗口打开。

1
2
3
4
5
6
7
8
9
window.addEvent('domready', function() {
	$$('a').each( function(item, index){
		if ( !( (/^http://(?:www.)?site.com/i).test(item.href) ) )
			item.setProperties({
				rel: 'nofollow',
				target: '_blank'
			});
	});
});

10.Image gallery(图片画廊)

演示:Demo

我们有两个div – ‘frame’ -这是我们用来加载大照片&’photos’ -包含小视图预览。

首先,我们 load images 使用Asset plugin,你可以看到在frame上,一些照片将被加载,我们可以根据小的图片视图来预览大的图片。

The THML

1
2
3
4
5
6
7
8
9
10
11
12
<div class="maincontent">
    <h2>Image Gallery</h2>
    <div id="frame"></div>
    <div id="photos">
 
    	<a href="#" rel="img/img1.jpg"><img src="img/img1.thumb.jpg" alt="img 1" /></a>
    	<a href="#" rel="img/img2.jpg"><img src="img/img2.thumb.jpg" alt="img 2" /></a>
    	<a href="#" rel="img/img3.jpg"><img src="img/img3.thumb.jpg" alt="img 3" /></a>
    	<a href="#" rel="img/img4.jpg"><img src="img/img4.thumb.jpg" alt="img 4" /></a>
    	<a href="#" rel="img/img5.jpg" class="last"><img src="img/img5.thumb.jpg" alt="img 5" /></a>
    </div>
</div>

The MooTools

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
window.addEvent('domready', function() {
 
	var images = [];
 
	var img_paths = ['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg'];
	var loader = new Asset.images(img_paths, {
		onProgress: function(counter,index) {
			$('frame').set('html','loaded '+ (counter + 1) * (100 / img_paths.length) + '%');
		},
		onComplete: function() {
			//fill our img array
			img_paths.each(function(im) {
				images[im] = new Element('img', {
				    'src': im,
				    'styles': {
						'visibility': 'hidden',
						'opacity': '0',
						'border': 'none'
				    }
				});
			});
			//assign click events
			$$('#photos a').addEvent('click', function(e) {
				e.stop();
				$('frame').empty();
				images[this.rel].set('opacity','0').inject($('frame')).fade(1);
			});
			//show first img in frame
			$('frame').empty();
			images[ img_paths[0] ].set('opacity','0').inject($('frame')).fade(1);
		}
	});
 
});

原英文来自:MooTools Tutorial for Designers

站点统计