CSSrainbow.cn » Demos & Downloads http://cssrainbow.cn Sharing what I know and learn about (X)HTML,CSS,JavaScript,MooTools,Dojo,jQuery,PHP,ASP,Java,Python and ∞. Sun, 05 Sep 2010 15:08:02 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 MooTools TinyTooltips http://cssrainbow.cn/tutorials/mootools/1378.html http://cssrainbow.cn/tutorials/mootools/1378.html#comments Sun, 05 Sep 2010 15:01:50 +0000 Rainbow http://cssrainbow.cn/?p=1378 对于超链接标记的title属性，本身的提示效果我们并不是很满意，所以我们会使用JavaScript来打造自己的Tooltips效果。

MooTools More 也自带 Tips plugins ，使用起来也蛮方便的，它怎么使用不是我今天说的重点。

TinyTooltips,才是是今天的主角。我们使用到的技术有CSS border生成三角技术，CSS3圆角 和 MooTools 来实现一个 Tiny Tooltips 。

TinyTooltips

 

演示

 

The CSS Code :

1
2
3

#tooltip-container{ position:absolute; width:200px; display:inline-block; z-index:20; visibility:hidden; }
#tooltip-arrow-up{ height:0;width:0;overflow:hidden;font-size:0; line-height:0; border-color:transparent transparent #2f2f2f transparent; border-style:dashed dashed solid dashed;border-width:5px;margin:0 auto;}
#tooltip-content{ color:#fff; background:#2f2f2f; padding:5px 10px; font-size:1em; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; }

The MooTools JavaScript :

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

    /* tooltips */
	var makeTooltips = function() {
		//build elements
		var container, top, content, originalWidth;
		if(!$('tooltip-container')) {
			container = new Element('div',{ 'id': 'tooltip-container' }).inject(document.body,'top');
			top = new Element('div',{ 'id': 'tooltip-arrow-up' }).inject(container);
			content = new Element('div',{ 'id': 'tooltip-content' }).inject(container);
		}
		else {
			container = $('tooltip-container');
			top = $('tooltip-arrow-up');
			content = $('tooltip-content');
		}
		originalWidth = container.getStyle('width').toInt();
 
		$$('.tooltip').each(function(el) {
			var text = el.retrieve('tooltipText') || el.get('title');
			el.set('title','').removeClass('tooltip').store('tooltipText',text).addEvents({																			
				mouseenter: function() { 
					//width?
					container.setStyle('width',(el.get('tooltipWidth') || originalWidth) + 'px');
					//position it
					var coords = el.getCoordinates();
					container.setStyles({
						left: coords.left - (container.getSize().x / 2) + (coords.width / 2),
						top: coords.top  + coords.height + 5
					});
					//set content
					content.set('text',text);
					container.fade(0.9); 
				},
				mouseleave: function() { container.fade(0); }
			});
		});
	};
	document.addEvent('domready', function() {
	/*	$('tip1').store('tooltipText', '提示内容一。');  
		$('tip2').store('tooltipText', '提示内容一。');  	
		$('tip3').store('tooltipText', '提示内容一。');  */	
	    makeTooltips();															  
	});

TinyTooltips 也支持”合元素存储机制”,可以通过Element Storage来指定提示信息。

 

演示

 

参考资料：

CSS Border使用小分享

David Walsh Blog

相关日志 »

]]> http://cssrainbow.cn/tutorials/mootools/1378.html/feed 0 自己动手写MooTools Tabs Class http://cssrainbow.cn/tutorials/mootools/1365.html http://cssrainbow.cn/tutorials/mootools/1365.html#comments Wed, 25 Aug 2010 13:02:08 +0000 Rainbow http://cssrainbow.cn/?p=1365 关于标签（Tabs）选项卡，jQuery版的插件众多，功能强大的也非常多，只要你Google一下，一抓一大把，但是，不是每一个都适合自己，考虑到代码的臃肿，需求的变动，得需要有一个符合自己的标签选项卡插件。

关于jQuery Tabs 我还是喜欢Karry的《自己动手做jquery Tab标签插件》，简单，高效，实用。

MooTools Tabs ,一直没有找到合适的，得花时间自己搞一个出来！既然，jQuery Tabs 有那么多好用的Tabs，何不模仿一个就行了，这样岂不是两全其美，jQuery 和 MooTools 都学习了。

MooTools-Tabs

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div id="demo" class="box">
      <div class="hd">
            <ul class="tab-holder">
                <li class="selected"><a href="#">HTML5 </a></li>
                <li><a href="#">MooTools </a></li>
                <li><a href="#">Dojo </a></li>
                <li><a href="#">jQuery </a></li>
            </ul>
      </div>
      <div class="bd">
            <div class="tab-panel">
                内容1.........
            </div>
            <div class="tab-panel hide">
                内容2.........
            </div>
            <div class="tab-panel hide">
                内容3.........
            </div>
            <div class="tab-panel hide">
                内容4.........
            </div>
      </div>
</div>

The CSS Code :

1
2
3
4
5
6
7
8
9
10
11

.tab-holder {height:30px;overflow:hidden;}
.tab-holder li {background:#EFF6FA url(../images/tabs_bg.png) repeat-x 0 0;border:1px solid #cfdae4;border-right:none;cursor:pointer;color:#666!important;float:left;height:28px;	text-align:center;line-height:28px;margin-left:-1px;width:102px;}
.tab-holder .selected a{font-weight:bold;color:#000!important;}
.tab-holder .selected{background:url(../images/tabs_bg.png) repeat-x 0 -28px;border-top:1px solid #eea63a;border-bottom:1px solid #fff;}
.tab-holder li,
.tab-holder li a,
.tab-holder li a:hover{color:#15377e!important;font-weight:bold;}
.tab-panel { margin-left:8px; padding:3px 0; }
.tab-panel li {background:url(../images/point.gif) no-repeat 2px center;height:22px;line-height:22px;padding-left:10px;}
.tab-panel li a { color:#3e3e3e; }
.tab-panel li a:hover { color:#f60; }

简单的标签选项卡，实现方法一 ：

需要 MooTools More 的 Element.Delegation 插件。

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

var TabPane = new Class({
 
    Implements: [Events, Options],
 
    options: {
        tabSelector: '.tab-holder li',
        contentSelector: '.tab-panel',
        activeClass: 'selected',
		eventType:"mouseover"			
    },
 
    container: null,
 
    initialize: function(container, options) {
        this.setOptions(options);
 
        this.container = document.id(container);
 
		//获得所有的选项面板，并设置为display:none
        this.container.getElements(this.options.contentSelector).setStyle('display', 'none');
 
		//Element.Delegates 给所有当前元素绑定事件
        this.container.addEvent(this.options.eventType+':relay(' + this.options.tabSelector + ')', function(event, tab) {																            //调用当前标签对应的面板
            this.showTab(this.container.getElements(this.options.tabSelector).indexOf(tab), tab);
        }.bind(this));
 
        //获得第一个选项卡，并添加 active 类样式
        this.container.getElement(this.options.tabSelector).addClass(this.options.activeClass);
	    //获得第一个选项面板，并设置为display:block
        this.container.getElement(this.options.contentSelector).setStyle('display', 'block');
    },
 
    showTab: function(index, tab) {
 
        var content = this.container.getElements(this.options.contentSelector)[index];
 
        if (!tab) {
            tab = this.container.getElements(this.options.tabSelector)[index];
        }
 
        if (content) {
            this.container.getElements(this.options.tabSelector).removeClass(this.options.activeClass);
            this.container.getElements(this.options.contentSelector).setStyle('display', 'none');
            tab.addClass(this.options.activeClass);
            content.setStyle('display', 'block');
 
            this.fireEvent('change', index);
        } 
    }
 
 
});

以上代码就是一个完整的标签选项卡类，此类不限标签个数，支持 click 和 mouseover事件,自定义当前选中标签的样式类。

演示
打包下载

简单的标签选项卡，实现方法二 ：

无需任何插件，只需 MooTools Core 库 。

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

var MooTabs=new Class({			  
    Implements: [Events, Options],
	options: {
       tabSelector:".tab-holder li",
	   contentSelector:".tab-panel",
       tabActiveClass:"active",
	   eventType:"mouseover"
	},
	initialize: function(options) {
        this.setOptions(options);
	    this._init();
		this.disableArr=[];
 
	},
	_init:function(){
	        var _this = this;
			if($$(_this.options.tabSelector).length>0){
			   $$(_this.options.tabSelector).each(function(item, index){
                    item.addEvent(_this.options.eventType,function(){
						//判断是否禁用，是否在当前选中的按钮上
						if(_this.disableArr.indexOf(item)==-1&&this.get("class").indexOf(_this.options.tabActiveClass)==-1){
 
							$$(_this.options.tabSelector).removeClass(_this.options.tabActiveClass);
							this.addClass(_this.options.tabActiveClass);
							_this._showContent(index);	
 
						}
 
					});				  
			   }); 	
		    }
 
	},
	_showContent:function(index){
		var _this = this;
        _showContent:function(index){
            var _this = this;
            var content = $$(_this.options.contentSelector)[index];
            if (content) {
               $$(_this.options.contentSelector).setStyle('display', 'none');
               content.setStyle('display', 'block');
            } 
        }
	}
 
});

演示
打包下载

相关日志 »

]]> http://cssrainbow.cn/tutorials/mootools/1365.html/feed 0 MooTabs plugin ,基于MooTools http://cssrainbow.cn/tutorials/mootools/1293.html http://cssrainbow.cn/tutorials/mootools/1293.html#comments Tue, 25 May 2010 05:35:29 +0000 Rainbow http://cssrainbow.cn/?p=1293 我今天提供的教程是以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 –

相关日志 »

]]> http://cssrainbow.cn/tutorials/mootools/1293.html/feed 0 网站功能列表插件，基于MooTools or jQuery http://cssrainbow.cn/tutorials/jquery/1251.html http://cssrainbow.cn/tutorials/jquery/1251.html#comments Wed, 28 Apr 2010 07:05:30 +0000 Rainbow http://cssrainbow.cn/?p=1251 对于网站的功能列表模块，有许多的网站都有应用，它能够快速了解网站提供的服务或功能，准确的引导用户进入相关服务模块，以免用户进入迷宫，简单方便的互动了用户。

以前用Flash 实现 “特色项目” 或 “功能列表”的网站居多，自从jQuery的出现 ，给我们带来了简洁和强大的动画效果，有些方面完全可以取代Flash的动画效果。

接下来，我给大家推荐的东西是 SiteFeature 和 Feature List 两大插件，它们分别使用MooTools 和 jQuery 实现的。不多说了，马上进入正题。

MooTools Plugin – SiteFeature

SiteFeature

SiteFeature 定制

 

View Demo »

 

Download Files »

jQuery Plugin – Feature List

Feature-List

Download Files »

 

View Demo »

– The End –

相关日志 »

]]> http://cssrainbow.cn/tutorials/jquery/1251.html/feed 0 MooColorPicker 颜色选择器插件 http://cssrainbow.cn/demos/1236.html http://cssrainbow.cn/demos/1236.html#comments Tue, 20 Apr 2010 01:19:57 +0000 Rainbow http://cssrainbow.cn/?p=1236 MooColorPicker 插件 是基于MooTools 开发的，它的作用是从颜色列表方块中选择颜色。我在以前的一篇的 《简单的颜色选项卡,基于CSS and MooTools 》文章中，介绍过类似的效果，功能无法与MooColorPicker 插件相比。不过它的有些思想和部分代码可用应用到“网页换肤” 中，这样写出来的程序更有可移植性。

如何使用

The MooTools JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Create the color picker with some colors
var cp = new MooColorPicker($('cp'), {
    colors: [
        "#001B2E", "#479096", "#4A7390",
        "#036564", "#4F2634", "#B6BFAD", "#2D0D10"],
    defaultColor: 3 // Select #4A7390
});
 
<span id="more-1236"></span>
 
// Display current color
$('current_color').set('html', 'Current color is: ' + cp.getCurrentColor());
cp.addEvent('change', function(col, box) {
    $('current_color').set('html', 'Current color is: ' + col);
});

The HTML :

1
2
3

 
<div id="cp">Color picker container</div>
<div id="current_color">No color selected</div>

The CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

div.moocolorcheckbox {
    width: 24px;
    height: 24px;
    margin: 4px 2px 4px 0px;
    border: 1px solid white;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cccccc;
    overflow: hidden; }
 
div.moocolorcheckbox_selected {
    width: 32px;
    height: 32px;
    margin: 0px 2px 0px 0px;
}

 

Download Files »

View Demo »

 

MooColorPicker DOCS

Implements:

Options, Events

Syntax and options:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var cp = new MooColorPicker(container, options);
 
container: 
    The &lt;div&gt; container (will be empty).
 
options (object, optional): 
    Initial options for the class. Options are:
        colors: An array of strings, like ["#0123456", "#789ABC"].
        defaultColor: Index of preselected color 
            (default -1, none).
        className: CSS class for single color &lt;div&gt; boxes 
            (default 'moocolorcheckbox').
        selectedClassName: CSS class for selected color &lt;div&gt; box 
            (default 'moocolorcheckbox_selected').

Events:

1
2
3
4
5
6

change(color, item): 
    Fires when selected color is changed. Color is selected color, 
    item is the selected color &lt;div&gt; box.
 
mouseenter(div), mouseleave(div):
    Fires when mouse over or leave a color &lt;div&gt; box.

Methods:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

addColor(color): 
    Adds a color to the list.
 
removeColor(color): 
    Removes a color from the list.
 
selectColor(color): 
    Select a color if it is in the list.
 
getCurrentColor():
    Returs current color as "#HHHHHH" string.
 
getContainer():
    Return container &lt;div&gt;.

相关日志 »

]]> http://cssrainbow.cn/demos/1236.html/feed 0 网页随机换肤 http://cssrainbow.cn/tutorials/jquery/1111.html http://cssrainbow.cn/tutorials/jquery/1111.html#comments Tue, 23 Feb 2010 23:43:57 +0000 Rainbow http://cssrainbow.cn/?p=1111 我在上一篇《网页换肤, 基于MooTools or jQuery 》文章中，通过一个完整的实例讲解了一下网页换肤的原理。即，通过调用不同的样式表文件来实现不同的皮肤切换，并且需要将换好的皮肤记入Cookie中，这样用户下次访问时，就可以显示用户自定义的 皮肤了。

在 CSS9.NET博客上，IIduce写了一篇关于随机加载样式的文章，他给自己的微博客制作多个样式，然后用户每次访问时随机载入样式。如果想了解更多请看IIduce写的《保持新鲜感：网页每次加载不同样式的实现方法》文章。

使用JavaScript实现的网页随机换肤

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

var Init = {
 
    //样式表文件目录路径
	baseSkinUrl : "/blog/css/skin/",
 
	//样式表文件名称列表
	styles : ["default", "skin1", "skin2", "skin3"],
 
	//样式cookie的key值
	cookieKey : "css9_blog_random_css",
 
	//定义方法，获取min至max间的随机数，包含min及max
	getRandomNum : function(min, max){
		return min + Math.floor(Math.random() * (max - min + 1));  
	},
 
	//定义方法，获取cookie值
	getCookie : function(name) {
		var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
		if (arr != null) {
			return unescape(arr[2]);
		}
		return null;
	},
 
	//定义方法，设置cookie值
	setCookie : function(sName,sValue,objHours,sPath,sDomain,bSecure){
		var sCookie = sName + "=" + encodeURIComponent(sValue);
		if (objHours) {
			var date = new Date();
			var ms = objHours * 3600 * 1000;
			date.setTime(date.getTime() + ms);
			sCookie += ";expires=" + date.toGMTString();
		}
		if (sPath) {
			sCookie += ";path=" + sPath;
		}
		if (sDomain) {
			sCookie += ";domain=" + sDomain;
		}
		if (bSecure) {
			sCookie += ";secure";
		}
		document.cookie=sCookie;
	},
 
   //定义方法，通过获取随机数随机加载CSS
	loadCSS : function(){
		var length = this.styles.length,
		     random = this.getRandomNum(0, length-1),
		     cookieStyle = this.getCookie(this.cookieKey),
		     currentStyle = "default";
 
		//如果当前随机取到的样式与cookie中样式相同，则重新计算随机数
                while(this.styles[random] == cookieStyle)
		{
			random = this.getRandomNum(0, length-1)
		}
 
		currentStyle = this.styles[random];
 
		//将新样式存入cookie，cookie有效时间为24小时
                this.setCookie(this.cookieKey, currentStyle, 24, "/", "css9.net", false);
 
		//若样式名称不为"default"默认样式，则向<head />标签中写入定制样式
                if(currentStyle != "default")
		{
			document.write('<link rel="stylesheet" type="text/css" 
                  href="' + this.baseSkinUrl + this.styles[random] + '.css" />');
		}		
	}
}
//执行随机加载CSS方法
Init.loadCSS();

关于笔者写的Cookies操作方法，可以优化一下，我建议使用PPK写的Cookies操作方法。

一个比较通用的Cookies操作方法

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

 /*以下操作Cookies的方法，来自PPK的文章http://www.quirksmode.org/js/cookies.html#script*/
//创建Cookie记录		
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
}
//读取Cookie记录			
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
}
//清除Cookie记录		
function eraseCookie(name) {
	createCookie(name,"",-1);
}

使用jQuery实现的网页随机换肤

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

//创建Cookie记录		
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
}
//读取Cookie记录			
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
}
//清除Cookie记录		
function eraseCookie(name) {
	createCookie(name,"",-1);
}
 
function getRandomNum (min, max){
	return min + Math.floor(Math.random() * (max - min + 1));  
}
 
function randomCss(){
	var styles = ["skin_0", "skin_1", "skin_2", "skin_3", "skin_4","skin_5"];
	var random= getRandomNum(0, 5);	
	var cookie_skin = readCookie("CssSkin"),skinName="default";
 
	while(styles[random] == cookie_skin)
	{
				random = getRandomNum(0, 5)
	}
	skinName =styles[random];
	if(skinName != "default"){
		    $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤	
	}	
	createCookie("CssSkin",skinName,10);		
 
}
$(function(){
	randomCss();
});

 

jQuery Demo 1

 

使用jQuery的cookie插件实现的网页随机换肤

首先引入jQuery的cookie插件：

1

<script src="jquery.cookie.js" type="text/javascript"></script>

具体代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function getRandomNum (min, max){
	return min + Math.floor(Math.random() * (max - min + 1));  
}
function randomCss(){
	var styles = ["skin_0", "skin_1", "skin_2", "skin_3", "skin_4","skin_5"];
	var random= getRandomNum(0, 5);
	var cookie_skin = $.cookie("CssSkin"),
    skinName="default";
	while(styles[random] == cookie_skin)
	{
		random = getRandomNum(0, 5);
	}
	skinName =styles[random];
	if(skinName != "default"){
		$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤	
	}
	$.cookie( "CssSkin" , skinName , { path: '/', expires: 10 });
 
}	
$(function(){		
	randomCss();
});

 

jQuery Demo 2

 

到此结束。

相关日志 »

]]> http://cssrainbow.cn/tutorials/jquery/1111.html/feed 0 网页换肤,基于MooTools or jQuery http://cssrainbow.cn/tutorials/mootools/1104.html http://cssrainbow.cn/tutorials/mootools/1104.html#comments Fri, 05 Feb 2010 02:33:43 +0000 Rainbow http://cssrainbow.cn/?p=1104 我们都知道WEB2.0是以人为核心线索的网，为了更好的增强用户体验，一些比较流行的SNS社会网络，非常重视用户自定义功能，例如自定义新闻内容，可以任意拖动新闻内容，还可以选择网页皮肤，例如：谷歌，雅虎，腾讯等都类似的功能。

网页换肤的原理是通过调用不同的样式表文件来实现不同的皮肤切换，并且需要将换好的皮肤记入Cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。

options-style-file

 

MooTools Demo  jQuery Demo

 

首先设置HTML的结构，在网页中添加皮肤选择按钮和基本内容，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    <ul id="skin">
		<li id="skin_0" title="灰色" class="selected">灰色</li>
		<li id="skin_1" title="紫色">紫色</li>
		<li id="skin_2" title="红色">红色</li>
		<li id="skin_3" title="天蓝色">天蓝色</li>
		<li id="skin_4" title="橙色">橙色</li>
		<li id="skin_5" title="淡绿色">淡绿色</li>
	</ul>
 
    <div id="div_side_0">
		<div id="news">
		    <h1 class="title">时事新闻</h1>
		</div>
    </div>
 
    <div id="div_side_1">
		<div id="game">
			<h1 class="title">娱乐新闻</h1>
		</div>
    </div>

然后根据HTML代码预定义几套换肤用的样式，分别有灰色，紫色，红色等6套，默认是灰色。

在设计HTML代码时，有一个小技巧，就是将皮肤选择按钮<li>元素的id与网页皮肤的样式文件名称设置的相同，这样就可以使完成换肤操作简化许多。

然后为HTML代码添加样式，注意HTML结构要有一个带id的样式表链接，通过操作该链接的href属性的值，从而实现换肤。代码如下：

默认的样式换肤文件

1

<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />

皮肤选择按钮美化代码：

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

 
*{
    margin:0px;
    padding:0px;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#div_side_0,#div_side_1
{
    float:left;
    width:120px;
    height:450px;
    }
#skin
{
    margin:10px;
    padding:5px;
	width:210px;
    padding-right:0px;
	list-style:none;
    border: 1px solid #CCCCCC;
	overflow:hidden;
    }
#skin li{
	float:left;
    margin-right:5px;
    width:15px;
    height:15px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	cursor:pointer;
	background-image:url(theme.gif);
}
#skin_0{
	background-position:0px 0px;
}
#skin_1{
	background-position:15px 0px;
}
#skin_2{
	background-position:35px 0px;
}
#skin_3{
	background-position:55px 0px;
}
#skin_4{
	background-position:75px 0px;
}
#skin_5{
	background-position:95px 0px;
}
#skin_0.selected{
	background-position:0px 15px !important;
}
#skin_1.selected{
	background-position:15px 15px !important;
}
#skin_2.selected{
	background-position:35px 15px !important;
}
#skin_3.selected{
	background-position:55px 15px !important;
}
#skin_4.selected{
	background-position:75px 15px !important;
}
#skin_5.selected{
	background-position:95px 15px !important;
}
.title
{
    cursor:pointer;}
h1{
   margin:10px;
   padding:10px 20px;
   width:60px;
   color:#ffffff;
   font-size:14px;
}
a:link {
	text-decoration: none;
	color: #333333;
}
a:visited {
	color: #333333;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}

最后为皮肤选择按钮添加单击事件，有如下两个步骤：

  1. 当皮肤选择按钮被单击后，当前皮肤就被勾选。
  2. 将网页内容换肤。

首先完成第一步。

1
2
3
4
5
6
7
8
9
10
11
12

 var $li =$$('#skin li');
 
 $li.addEvent('click',function(){
    var liname=$(this.id);
	liname.addClass('selected');//当前<li>元素选中
 
	var siblings = liname.getParent().getChildren().erase(liname);
 
	siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
 
 
  });

然后完成第二步，设置网页内容皮肤。根据<link>标签元素的id，此时可以通过set()方法来设置<link>标签元素的href属性设置不同的值，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

 var $li =$$('#skin li');
 
 $li.addEvent('click',function(){
    var liname=$(this.id);
	liname.addClass('selected');//当前<li>元素选中
 
	var siblings = liname.getParent().getChildren().erase(liname);
 
	siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
 
	$('cssfile').set('href','css/'+this.id+'.css'); //设置不同皮肤
 
  });

使用MooTools的Cookie方法的Cookie.write()方法，把当前选择的皮肤保存进Cookie中，在mootools中支持两种Cookie的读写方式，一种是普通方式（Object: Cookie ），即键值对方式，而另一种是Hash表方式（Hash.Cookie ），具体用法我们不作解释，请查看MooTools Doc。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

 var $li =$$('#skin li'); 
 $li.addEvent('click',function(){
    var liname=$(this.id);
	liname.addClass('selected');//当前<li>元素选中
 
	var siblings = liname.getParent().getChildren().erase(liname);
 
	siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
 
	$('cssfile').set('href','css/'+this.id+'.css'); //设置不同皮肤
	//使用MooTools的Cookie插件
	Cookie.write('MyCssSkin', this.id, {path: '/',duration: 10});
 });

保存进Cookie后，就可以通过Cookie来获取当前的皮肤了。如果Cookie的确存在的话，则将当前皮肤设置为Cookie记录的值，代码如下:

1
2
3
4
5
6
7
8
9
10

   var cookie_skin  = Cookie.read('MyCssSkin');
   // alert(cookie_skin);
   if(cookie_skin){
	    var liname=$(cookie_skin);
	  liname.addClass('selected');
	   var siblings = liname.getParent().getChildren().erase(liname); 
	   siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
	   $('cssfile').set('href','css/'+cookie_skin+'.css'); //设置不同皮肤
	   Cookie.write('MyCssSkin',cookie_skin, {path: '/',duration: 10});
   }

完整的代码如下：

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

window.addEvent('domready', function() {
 var $li =$$('#skin li');
 $li.addEvent('click',function(){
    var liname=$(this.id);
	liname.addClass('selected');//当前<li>元素选中
 
	var siblings = liname.getParent().getChildren().erase(liname);
 
	siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
 
	$('cssfile').set('href','css/'+this.id+'.css'); //设置不同皮肤
 
	Cookie.write('MyCssSkin', this.id, {path: '/',duration: 10});
	//$.cookie( "MyCssSkin" ,  this.id , { path: '/', expires: 10 });
  });
 
  var cookie_skin  = Cookie.read('MyCssSkin');
   // alert(cookie_skin);
  if(cookie_skin){
	    var liname=$(cookie_skin);
	  liname.addClass('selected');
	   var siblings = liname.getParent().getChildren().erase(liname); 
	   siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
	   $('cssfile').set('href','css/'+cookie_skin+'.css'); //设置不同皮肤
	   Cookie.write('MyCssSkin',cookie_skin, {path: '/',duration: 10});
  }						 
 
});

此时，网页换肤功能不仅能正常换肤，而且也能够保存到Cookie中，当前用户刷新网页后依然是当前的皮肤。

我们回头再看一下代码，发现有许多的代码是重复的，并且很有规律，为了提高我们的代码复用率，我们把代码的公共部分放入一个公共函数里，方便多次调用。

优化后的代码如下：

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

//MooTools方法扩展，类似于jQuery 的siblings()方法
Element.implement({
	getSiblings: function(match) {
		return this.getParent().getChildren(match).erase(this);
	}
});
 
window.addEvent('domready', function() {
	var $li =$$('#skin li');
	$li.addEvent('click',function(){
		switchSkin( this.id );
	});
	var cookie_skin = Cookie.read('MyCssSkin');
	if (cookie_skin) {
		switchSkin( cookie_skin );
	}								 
});
function switchSkin(cookie_skin){
	 var liname=$(cookie_skin);
	 liname.addClass('selected');
	 /*var siblings = liname.getParent().getChildren().erase(liname)*/
	 var siblings = liname.getSiblings(); 
	 siblings.removeClass('selected');//去掉其它同辈<li>元素的选中
	 $('cssfile').set('href','css/'+cookie_skin+'.css'); //设置不同皮肤
	 Cookie.write('MyCssSkin',cookie_skin, {path: '/',duration: 10});
}

我们的网页换肤，到此就完成了，效果如下：

我这里，我也提供jQuery实现的网页换肤，不过还需要 Klaus Hart l写的jQuery Cookie 插件。

The jQuery JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(function(){
	var $li =$("#skin li");
	$li.click(function(){
		switchSkin( this.id );
	});
	var cookie_skin = $.cookie( "MyCssSkin");
	if (cookie_skin) {
		switchSkin( cookie_skin );
	}
});
function switchSkin(skinName){
	$("#"+skinName).addClass("selected")      //当前<li>元素选中
	    .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
	$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
	$.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
}

 

MooTools Demo  jQuery Demo

 

参考文献:《锋利的jQuery》第五章，作者：CssRain

相关日志 »

]]> http://cssrainbow.cn/tutorials/mootools/1104.html/feed 1 灵活的等比例缩放图像类，基于MooTools http://cssrainbow.cn/tutorials/mootools/1088.html http://cssrainbow.cn/tutorials/mootools/1088.html#comments Thu, 04 Feb 2010 03:17:01 +0000 Rainbow http://cssrainbow.cn/?p=1088 在本教程中，我们将解释如何按比例调整图像。

当前流行的就是使用JavaScript 库（MooTools,jQuery,ExtJS, script.aculo.us,YUI）来实现一些效果，
当然我今天的例子也是使用当前流行的MooTools来实现的。我把它写成MooTools Class形式是为了程序的灵活性和可扩展性。

Resize-Images

实现思路

我们将使用一<img />标签来调整图像。图像的大小按比例调整是很简单的任务，但最重要的是如何正确的计算图像大小。

首先，你应该定义bounding box的大小（图片的最大尺寸），比方说，这将是200 × 200像素：

bounding-box

我们实际图片的大小是(size 500×313 pixels):

picture

我们调整后的效果，应该是这样的：

resized-image

如图所示的等比例调整图像以后，我们看到的图片依然好看。

现在让我们来讨论如何实现这一点。为了保证代码的可移植，我们最好是创建一个独立的函数。

我们需要认真考虑函数的需求，函数的输入参数是：maxW，maxH（这些参数设置边框大小）和currW，currH（这些参数包含当前或者是原始图像的大小。我们的样本图片是500 × 313像素）。

该函数将计算大小和返回一个数组，其中包含两个值。函数的用法是：

1
2

var newSize = scaleSize(200, 200, 500, 313);
alert('New Width: ' + newSize[0] + ', New Height: ' + newSize[1]);

现在让我们来实现scaleSize函数的算法。道理很简单:

For width: currH / currH / currW;

For height: currW * currH / currW;

你会发现currH / currW 在公式中重复计算了两次。这是一个高宽比。所以，下面这个函数才是的实际执行情况： 

1
2
3
4
5
6
7
8
9
10
11

function scaleSize(maxW, maxH, currW, currH){
      var ratio = currH / currW;
      if(currW >= maxW){
            currW = maxW;
            currH = currW * ratio;
      } else >if(currH >= maxH){
            currH = maxH;
            currW = currH / ratio;
      }
      return [currW, currH];
}

关键问题已成功解决，那我们看一下完整的例子和代码吧.

Demo 演示

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13

<h2>Resize Images Proportionally</h2>
	<div class="controls">
		<ul>
			<li><a href="#" rel="zoomOut" title="图片缩小">-</a></li>
			<li><a href="#" rel="zoomIn" title="图片放大">+</a></li>
			<li><a href="#" rel="reset" title="恢复到原图大小">重置</a></li>
            <li><a href="#" rel="resizeProportionally" title="按比例把图片调整到200x200">按比例调整到200x200</a></li>
		</ul>
	</div>
    <div class="clear"></div>
    <div class="picture-frame">
      <img src="picture-1.jpg" id="image" alt="Sample Image" height="313" width="500">
    </div>

The Css Code:

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

.clear {
	height: 1px;
	clear: both;
	font-size: 0;
	line-height: 0;
}
 
.picture-frame {
	background: #FFFFFF;
	border: 1px solid #DEDBD2;
	padding: 5px;
	float: left;
}
.picture-frame img { float: left; }
.controls {
	clear: both;
	float: left;
	margin: 20px 0;
 
}
.controls ul, .controls ul li{
	margin: 0;
	padding: 0;
	list-style: none;
}
.controls ul, .controls ul li, .controls ul li a {
	float: left;
	display: inline;
}
.controls ul li {
	margin-right: 3px;
}	
.controls ul li a {
	padding: 4px 8px;
	background: #0a8ECC;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 15px; 
	text-decoration: none;
}
.controls ul li a:hover {
	background: #8FCB2F;
 
}

The MooTools JavaScript 

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

var ResizeImage=new Class({
	Implements: [Options],
	//these are the default options
    options: {
		maxW:200,
		maxH:200       
    },					   
	initialize: function(img,z,options) {
        this.setOptions(options);
	    this.img = $(img);
	    this.z =$$(z);
 
	    this.setResize(this.z,this.img);
    },
	setResize:function(z,img){
	    //获取原始图片大小的参数
	    var initW = img.width, initH = img.height;
		//zoomOut,zoomIn
	    var newW = initW, newH = 0;
		//图片比例初始化参数
	    var maxW=this.options.maxW,maxH=this.options.maxH;
		//调用比例函数
	    var newSize = this.scaleSize(maxW,maxH,initW,initH);
	    //执行相应的动作
        $each(z, function(el, i){
            el.addEvent('click', function(e){
                e = new Event(e).stop();
				switch(el.rel){
					case 'zoomOut':
						newW -= 20; 
						break;
					case 'zoomIn':
						newW += 20;
						break;
					case 'resizeProportionally':
						img.width = newSize[0];
						img.height = newSize[1];
						return;
					default:
						newW = initW;		            
				}	
				var ratio = initH / initW;
				newH = newW * ratio;
				img.width = newW;
				img.height = newH;
            });
        });						
	},
	//比例函数
	scaleSize: function(maxW,maxH,currW,currH){
		var ratio = currH / currW;
		if(currW >= maxW){
			currW = maxW;
			currH = currW * ratio;
		} else if(currH >= maxH){
			currH = maxH;
			currW = currH / ratio;
		}
		return [currW, currH];
    }
 
});
 
window.addEvent('domready', function() {
 
		new ResizeImage('image','.controls li a');							  
 
});

 

Demo 演示

 

相关日志 »

]]> http://cssrainbow.cn/tutorials/mootools/1088.html/feed 0 Google-Style之元素褪色（Element Fading），基于MooTools or jQuery http://cssrainbow.cn/tutorials/jquery/1078.html http://cssrainbow.cn/tutorials/jquery/1078.html#comments Wed, 03 Feb 2010 01:06:32 +0000 Rainbow http://cssrainbow.cn/?p=1078 google-style-element-fade

如图所示：Google-Style——元素褪色（Element Fading）

谷歌最近在他们的网页上推出了一个有趣的效果：左上角和右上角的导航条不显示了，直到您移动鼠标或离开search term box。为什么？我猜测，他们是希望自己的网页，尽可能的简单;
这样的好处就是搜索框立即给予关注，至少有一半的用户可能只需输入关键字，按下回车键——没有更多的杂乱无章的需要。
Google-Style 处处体现以用户为核心的设计。

以下是如何实现这样的效果，基于MooTools or jQuery。

 

MooTools Demo jQuery Demo

The HTML Code

1
2
3
4

<div id="fade1" class="fadein">{ fade area 1 }</div>
<div id="fade2" class="fadein">{ fade area 2 }</div>
<div id="fade3" class="fadein">{ fade area 3 }</div>
<!-- other stuff here -->

放置您喜欢的HTML,我们不需要每一个元素都加入效果，只给那些需要的元素加上淡入的CSS class.

The CSS Code 

1
2
3
4
5
6
7
8
9

@media all {
	.fadein	{ visibility:hidden; }
	#fade1	{ /* place wherever on the page */ }
	#fade2	{ /* place wherever on the page */ }
	#fade3	{ /* place wherever on the page */ }
}
@media handheld {
	.fadein	{ visibility:visible; }
}

将需要Fading效果的元素， visibility 设置为 hidden。还有我们将容纳 no-javascript的用户。

The MooTools Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* 
via @appden, Scott Kyle,
http://appden.com/javascript/fun-with-custom-events-on-elements-in-mootools/ 
*/
Native.implement([Element, Window, Document, Events], {
	oneEvent: function(type, fn) {
		return this.addEvent(type, function() {
			this.removeEvent(type, arguments.callee);
			return fn.apply(this, arguments);
		});
	}
});
 
/* make it happen! */
window.addEvent('domready',function() {
	var fades = $$('.fadein').setStyle('opacity',0);
	var doFadeIn = function(e) {
		if(!e.key || e.key == 'tab') {
			fades.fade('in');
		}
	};
	$(document.body).oneEvent('mousemove',doFadeIn);
	$('s').oneEvent('blur',doFadeIn);
});

The jQuery Javascript

1
2
3
4
5
6
7

$(document).ready(function() {
	var doFadeIn = function() {
		$('.fadein').css({ opacity:0, visibility:'visible'}).fadeTo(250,1);
	};
	$('body').one('mousemove',doFadeIn);
	$('#s').one('blur',doFadeIn);
});

Accommodating for No-Javascript Users

1
2
3
4
5

<noscript>
	<style type="text/css">
		.fadein	{ visibility:visible; }
	</style>
</noscript>

这是一个微妙的作用，但在谷歌的一部分，是个好主意。

 

MooTools Demo jQuery Demo

 

原文来自：Google-Style Element Fading Using MooTools or jQuery ，作者：David Walsh

 

相关日志 »

]]> http://cssrainbow.cn/tutorials/jquery/1078.html/feed 0 表单设计与滑动的标签（Labels），基于MooTools or jQuery http://cssrainbow.cn/tutorials/mootools/1045.html http://cssrainbow.cn/tutorials/mootools/1045.html#comments Fri, 29 Jan 2010 04:39:06 +0000 Rainbow http://cssrainbow.cn/?p=1045 对于表单的可用性设计，一直是Web设计人员研究的课题，如果你想了解更多关于Form Design的知识，我建议你看一下Yahoo的Luke Wroblewski 写的书《Web Form Design》,
人家是这方面的大牛，有许多的专题论文。

我们的设计灵感来自 Apple 重新设计的商品结帐表单。

apple_checkout_labels

我们实现的效果就是: input 的labels 水平滑动。这个想法是有利用户体验的：简洁的 , 实用的, 不唐突的,只需要很少的jQuery代码就可以实现。幸运的是此效果也不需要太多的MooTools代码也可以实现。

banner_slidinglabel

查看Demo

The HTNL Code:

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

<form action="" method="post" id="info"> 
	<h2>Contact Information</h2> 
    <div id="name-wrap" class="slider"> 
        <label for="name">Name</label> 
        <input type="text" id="name" name="name"> 
    </div><!--/#name-wrap--> 
 
    <div id="email-wrap"  class="slider"> 
        <label for="email">E&ndash;mail</label> 
        <input type="text" id="email" name="email"> 
    </div><!--/#email-wrap--> 
 
    <div id="street-wrap"  class="slider"> 
        <label for="st">Street</label> 
        <input type="text" id="st" name="st"> 
    </div><!--/#street-wrap--> 
 
    <div id="city-wrap"  class="slider"> 
        <label for="city">City &amp; State</label> 
        <input type="text" id="city" name="city"> 
    </div><!--/#city-wrap--> 
 
    <div id="zip-wrap"  class="slider"> 
        <label for="zip">Zip code</label> 
        <input type="text" id="zip" name="zip"> 
    </div><!--/#zip-wrap--> 
 
    <input type="submit" id="btn" name="btn" value="submit"> 
</form>

这是一个简单的表单，用DIV来包装 input 和 label,也要你会想起更多富有语义的表单设计，我们这里不做讨论。

1
2
3
4
5
6
7
8
9
10
11
12

/*The most important CSS snippet is the ensuring the spacing and position value for the slider DIV*/
div.slider { clear:both; position:relative; margin:0 0 10px; }
label { cursor:pointer; display:block; }
/*input*/
input[type="text"] { width:300px; border:1px solid #999; padding:5px; -moz-border-radius:4px; }
input[type="text"]:focus { border-color:#777; }
input[name="zip"] { width:150px; }
/* submit button */
input[type="submit"] { cursor:pointer; border:1px solid #999; padding:5px; -moz-border-radius:4px; background:#eee; }
input[type="submit"]:hover,
input[type="submit"]:focus { border-color:#333; background:#ddd; }
input[type="submit"]:active{ margin-top:1px; }

The MooTools JavaScript

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

//when the dom is ready...
window.addEvent('domready',function() {
	//a few settings
	var labelColor = '#999', restingPosition = 5;
	//for every form field
	$$('form#info .slider label').each(function(label){
		//set the label enhancements into place
		label.setStyles({
			color: labelColor,
			position: 'absolute',
			top: 6,
			left: restingPosition,
			display: 'inline',
			'z-index': 99
		});
		//get input value
		var input = label.getNext('input');
		//grab label width, add resting position value
		var width = label.getSize().x;
		var move = width + restingPosition;
		//onload, check if a field is filled out, if so, move the label out of the way
		if(input.get('value') !== '') {
			label.tween('left',0 - move);
		}
		// if the input is empty on focus move the label to the left
		// if it's empty on blur, move it back
		input.addEvents({
			focus: function() {
				if(input.get('value') == '') {
					label.tween('left',0 - move);
				}
				else {
					label.setStyle('left',0 - move);
				}
			},
			blur: function() {
				if(input.get('value') == ''){
					label.tween('left',restingPosition);
				}
			}
		});
	});
});

查看Demo

The jQuery Code:

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

$(function(){
	$('form#info .slider label').each(function(){
		var labelColor = '#999';
		var restingPosition = '5px';
		// style the label with JS for progressive enhancement
		$(this).css({
				'color' : labelColor,
				 	'position' : 'absolute',
			 		'top' : '6px',
					'left' : restingPosition,
					'display' : 'inline',
		    	'z-index' : '99'
		});
 
		// grab the input value
		var inputval = $(this).next('input').val();
 
		// grab the label width, then add 5 pixels to it
		var labelwidth = $(this).width();
		var labelmove = labelwidth + 5;
 
		//onload, check if a field is filled out, if so, move the label out of the way
		if(inputval !== ''){
				$(this).stop().animate({ 'left':'-'+labelmove }, 1);
		}    	
 
		// if the input is empty on focus move the label to the left
		// if it's empty on blur, move it back
		$('input').focus(function(){
				var label = $(this).prev('label');
				var width = $(label).width();
				var adjust = width + 5;
				var value = $(this).val();
 
				if(value == ''){
					label.stop().animate({ 'left':'-'+adjust }, 'fast');
				} else {
					label.css({ 'left':'-'+adjust });
				}
		}).blur(function(){
				var label = $(this).prev('label');
				var value = $(this).val();
 
				if(value == ''){
					label.stop().animate({ 'left':restingPosition }, 'fast');
				}	
 
			});	    	
		});
});

查看Demo

实例来源：

非常感谢CSSKarma 提供的灵感，才会有如此好的Web表单设计。

原文来源一：Form Design with Sliding Labels

原文来源二：Sliding Labels Using MooTools

相关日志 »

]]> http://cssrainbow.cn/tutorials/mootools/1045.html/feed 1