CSSrainbow.cn

Sharing what I know and learn about (X)HTML,CSS,JavaScript,MooTools,Dojo,jQuery,PHP,ASP,Java,Python and ∞.

Demos & Downloads \ Tutorials \ MooTools

MooTabs plugin ,基于MooTools »

Posted on: in Demos & Downloads, MooTools By:
Rainbow
0

我今天提供的教程是以Chris Coyier 写的 Organic Tabs jQuery plugin为原型改写的MooTabs MooTools plugin 。

Organic Tabs,非常酷，可以展现大量的信息。它使你的标签不再那么“傻乎乎”，当我点击相应的标签对象，它对应的内容是富有动感的，平滑过渡的。同时也保持了清洁和富有语义的标记。

在这儿我就不多说了，想了解更多请看CSS-TRICKS提供的教程(Organic Tabs)。

 

Download Files »

 

View Demo »

 

直接进入主题，一个MooTools 版的 Organic Tabs 。

The HTML 

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

 
<div id="moo-tabs-one">
   <ul class="tab-nav">
       <li class="nav-one"><a href="#latest"  class="current">最新文章</a></li>
       <li class="nav-two"><a href="#mootoolstuts">MooTools </a></li>
       <li class="nav-three"><a href="#jquerytuts">jQuery </a></li>
       <li class="nav-four"><a href="#html5-css3">HTML5 </a></li>
       <li class="nav-five last"><a href="#popular">热门文章</a></li>
   </ul>
   <div class="list-wrap">
      <!--最新文章-->
      <ul id="latest">
         <li> Stuff in here!</li>
       </ul>
 
       <!--MooTools教程-->
       <ul id="mootoolstuts">
          <li> Stuff in here!</li>
       </ul>
 
       <!--jQuery 教程-->
       <ul id="jquerytuts"  class="hide">
          <li> Stuff in here!</li> 
       </ul>
       <!--HTML5 & CSS3 教程-->
       <ul id="html5-css3"  class="hide">
           <li> Stuff in here!</li> 
       </ul>
       <!--热门文章-->
       <ul id="popular"  class="hide">
           <li> Stuff in here!</li> 
       </ul>
  </div>
</div>

The CSS

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

/* 一般用途 */
.hide { position: absolute; top: -9999px; left: -9999px; }
 
 
/*特殊处理*/
.list-wrap ul li{
	position:relative;
}
.list-wrap ul li a{
  overflow:hidden; /*超出的部分隐藏起来。*/
  white-space:nowrap;/*不显示的地方用省略号...代替*/
  text-overflow:ellipsis;/* 支持 IE */
  -o-text-overflow: ellipsis;    /* 支持 Opera */
}
.list-wrap ul li span{
	color: #C60;text-align: right;
	display: block;
	position: absolute;
	right: 1px;
	bottom: 5px;	
}
 
/* 例子一 */
 
#moo-tabs-one { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }
 
#moo-tabs-one .tab-nav {overflow: hidden;margin: 0 0 10px 0; border-bottom:3px solid #999;}
#moo-tabs-one .tab-nav li {width: 71px;float: left; margin:0 10px 5px 0;}
#moo-tabs-one .tab-nav li.last { margin-right: 0; }
#moo-tabs-one .tab-nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#moo-tabs-one .tab-nav li a:hover { background-color: #111; }
 
#moo-tabs-one ul { list-style: none; }
#moo-tabs-one ul li a {display: block;padding: 4px;border-bottom: 1px solid #666;color: #666;}
#moo-tabs-one ul li a:hover { background: #fe4902; color: white; }
#moo-tabs-one ul li:last-child a { border:0 none; }
 
#moo-tabs-one ul li.nav-one a.current, #moo-tabs-one ul.latest li a:hover { background-color: #0575f4; color: white; }
#moo-tabs-one ul li.nav-two a.current, #moo-tabs-one ul.mootoolstuts li a:hover { background-color: #d30000; color: white; }
#moo-tabs-one ul li.nav-three a.current, #moo-tabs-one ul.jquerytuts li a:hover { background-color: #8d01b0; color: white; }
#moo-tabs-one ul li.nav-four a.current, #moo-tabs-one ul.html5-css3 li a:hover { background-color: #FE4902; color: white; }
#moo-tabs-one ul li.nav-five a.current, #moo-tabs-one ul.popular li a:hover {background-color:#690;color: white;}
 
 
/* 例子二 */
 
#moo-tabs-two .list-wrap { background: #eee; padding: 10px; margin: 0 0 15px 0; }
 
#moo-tabs-two ul { list-style: none; }
#moo-tabs-two ul li a {color: #666;overflow: hidden;display: block;border-bottom: 1px solid #666;padding: 4px;}
#moo-tabs-two ul li a:hover { background: #333; color: white; }
#moo-tabs-two ul li:last-child a { border: none; }
 
#moo-tabs-two .tab-nav { overflow: hidden; }
#moo-tabs-two .tab-nav li { width: 75px; float: left; margin: 0 10px 0 0; }
#moo-tabs-two .tab-nav li.last { margin-right: 0; }
#moo-tabs-two .tab-nav li a { display: block; padding: 5px; background: #666; color: white; font-size: 10px; text-align: center; border: 0; }
 
#moo-tabs-two li a.current,#moo-tabs-two li a.current:hover { background-color: #eee !important; color: black; }
#moo-tabs-two .nav li a:hover, #moo-tabs-two .tab-nav li a:focus { background: #999;}

The MooTools 扩展方法：Element.implement.height

此扩展方法用于模仿jQuery的height()。

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

function $swap(el, options, fn){
	var old = {};
	// Remember the old values, and insert the new ones
	for (var name in options){
	old[name] = el.style[name];
	el.style[name] = options[name];
	}
 
	fn.call(el);
 
	// Revert the old values
	for(var name in options) el.style[name] = old[name];
};
 
Element.implement({
	height: function(val){
		if (val) return this.setStyle('height', val);
		var props = {position: 'absolute', visibility: 'hidden', display: 'block'};
		var value, el = this;
		var getHeight = function(){
		   value = el.getStyle('height').toInt();
		}
		if (this.getStyle('display') == 'none'){
		   $swap(el, props, getHeight);
		}
		else {
		   getHeight();
		}
	    return value;
	}
 
});

The MooTools JavaScript

第一个一个MooTabs 类，许多的细节在其中。

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

var mooTabs= new Class({
 
	//实现
	Implements: [Options,Events],
 
	//选项参数
	options: {
		$el: false
	},
 
	//初始化构造函数
	initialize: function(options) {
		//set options
		this.setOptions(options);
		this.init();
	},
 
	//自定义的js方法
	init: function() {
		var $nav=this.options.$el.getElement('.tab-nav');
		// Accessible hiding fix
        $$(".hide").setStyles({
             "position": "relative",
             "top": 0,
             "left": 0,
             "display": "none"
        }); 
 
		var el=this.options.$el,
		links = $nav.getElements('li > a');							 
	    links.each(function(link) {
	      link.addEvent('click',function() {
 
				// Figure out current list via CSS class
                var curList = el.getElement("a.current").getProperty("href").substring(1),
 
                // List moving to
                $newList = this,
 
                // Figure out ID of new list
                listID = $newList.getProperty("href").substring(1),
 
				// Set outer wrapper height to (static) height of current inner list
                $allListWrap =el.getElement(".list-wrap"),
 
			    curListHeight = $allListWrap.height();
 
			    $allListWrap.height(curListHeight);//$allListWrap.setStyle('height', curListHeight)
 
                // Remove highlighting - Add to just-clicked tab
			    $nav.getElement("a.current").removeClass("current");
                $newList.addClass("current");
 
			     if ((listID != curList)) {
 
                     var newHeight = el.getElement("#"+listID).height();
 
                     //渐变（tween），平滑的变化
                     $allListWrap.tween('height',newHeight);
 
					 // Fade out current lis
 
                     el.getElement("#"+curList).setStyles({display: 'none'}).fade('out');
                     // Fade in current lis
			         el.getElement("#"+listID).setStyles({ display: 'block'}).fade('in');
 
                }   
                // Stop propegation and bubbling
                return false;
 
		 });
 
        })
 
	}
 
});

调用该插件

1
2
3
4
5
6
7
8
9
10

window.addEvent('domready',function() {
	new mooTabs({
	   $el:$('moo-tabs-one')		   
   });
 
	new mooTabs({
	   $el:$('moo-tabs-two')		   
   });
 
});

 

Download Files »

 

View Demo »

 

作者：Chris Coyier

参考文章来自：CSS-TRICKS , Organic Tabs .

– The End –

Leave a Comment