CSSrainbow.cn » MooTools

MooTools TinyTooltips

Rainbow — Sun, 05 Sep 2010 15:01:50 +0000

对于超链接标记的title属性，本身的提示效果我们并不是很满意，所以我们会使用JavaScript来打造自己的Tooltips效果。

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

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

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 :

    /* 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

自己动手写MooTools Tabs Class

Rainbow — Wed, 25 Aug 2010 13:02:08 +0000

关于标签（Tabs）选项卡，jQuery版的插件众多，功能强大的也非常多，只要你Google一下，一抓一大把，但是，不是每一个都适合自己，考虑到代码的臃肿，需求的变动，得需要有一个符合自己的标签选项卡插件。

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

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

The HTML Code :

<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 :

.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 插件。

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 库。

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');
            } 
        }
	}
 
});

演示
 打包下载

9大MooTools Plugins来改善网站的用户体验

Rainbow — Sun, 08 Aug 2010 10:38:58 +0000

使用不唐突的JavaScript，只需要一些简短的代码片段就可以极大地改善你的网站，给用户带来良好的用户体验。

自从2009年12月10日，MooTools社区的 MooTools Forge 上线以来，为我们已经提供了很多的MooTools Plugins 。我想你已经从中受益了吧！

David Walsh 和 CSS-Tricks 一直是我最爱的技术网站，他们有关MooTools ,jQuery ,CSS的教程是那么的实用和经典，不论你处于什么样的技术水平都能在他们的技术博客上找到你需要的东西。

接下来，我们就认识一下改善网站用户体验的8 大MooTools Plugins 吧。

1. ScrollSpy

ScrollSpy是一个非常强大的工具，贡献者是David Walsh，ScrollSpy可以监听页面中任何元素的滚动事件，并允许您创建”virtual zones” 去监听。我网站的头部工具条就是用的ScrollSpy插件。

下载
 演示
 教程

2. LazyLoad

Lazy Load ，主要是指的图片的延迟加载。延迟加载可以推迟资源（通常是图像），减少流量，在包含很多大图片长页面中延迟加载图片可以加快页面加载速度。浏览器将会在加载可见图片之后（第一屏就跳转）即进入就绪状态。在某些情况下还可以帮助降低服务器负担。延迟加载技术，是眼下比较流行的一个技术，在淘宝（Taobao），腾讯和必应（Bing）等网站上已经应用了。MooTools 版的LazyLoad的贡献者是David Walsh。

下载
 演示
 教程

3. SlideShow

SlideShow,幻灯片插件,对于我们并不陌生，图片轮换的需求就是我们经常遇到的。

我今天说的 SlideShow 是基于MooTools开发的强大幻灯片插件，SlideShow 的贡献者是Ryan Florence 。

此插件是可以轻松扩展的，易于实现的，灵活的。不仅仅局限在图片上，可以使用任何元素，并添加到SlideShow中，还有许多的内置动画效果等待着你的使用和扩展。

你可以使用这个SlideShow 基础类来创建幻灯片，画廊，新闻滚动等等。。。。

下载
 演示
 教程

4. MooTools More class, Asset

提供在页面中动态加载和管理JavaScript, CSS和图片文件的功能。允许您动态加载样式表，图片和异步JavaScript文件。

下载
 文档说明

5. TextboxList

TextboxList的灵感来自Facebook。这个Mootools插件能够美化以逗号分隔值的普通文本输入框，转换成拥有Autocomplete功能风格类似于Facebook的文本输入框。支持任意类型的数据源（XHR、JSON）。

下载
 演示 1
演示 2
教程

6. Zoomer

Zoomer 是令人耳目一新的图像放大插件。它已经改变了以往的lightbox 模式, Zoomer放大的图像和原图像的大小是一样的。你可以通过鼠标移动来专注图像的不同部分。

下载
 演示
 教程

7. Milkbox

Milkbox基于Mootools1.2框架开发的Lightbox控件。Use Milkbox for flash video, photos, and XML galleries.

下载，演示，教程

8. FormCheck

FormCheck是一个功能强大的MooTools 表单验证，允许您执行不同的形式测试，以验证表单上他们之前提交数据的有效性。它现在版本已经是1.6了。支持通过 CSS自定义外观，将校验提示信息以Tips的方式显示。FormCheck除了支持一些常用的校验包括：必填校验，数字校验，长度校验等。还支持表达式校验包括：电话号码、Email、URL等。国际化的支持，现在支持10种不同的语言，最重要的是他们提供了完整的API使用说明和不同类型的验证实例。

演示
 文档说明
 下载

9. Mobile

Christoph Pojer 是MooTools Core 的开发者 , 他为我们的Mobile 开发也提供了MooTools Mobile, 如触摸事件处理程序，给我们的移动设备上的开发迈出了一大步！

下载

盒子（Box）中间的链接（Links）,基于MooTools or jQuery

Rainbow — Wed, 30 Jun 2010 02:40:16 +0000

盒子中间的链接,这个标题不知道如何取比较合适，说白了就是给一个Box 模块中间加一个有遮罩效果和悬停效果的超链接，当我们的鼠标移到盒子上面有一个醒目的链接按钮，反之，链接按钮消失并移除。

接下来，我们看一下效果图吧，比较直观一些。

View Demos »

我们的目标

我们这里有一些包含内容的盒子。

这个目标就是: 当我们的鼠标移到盒子上面,他们会变暗并在他们的中心位置出现一个链接按钮。

注意：

此实例的教程来自：Middle Box Links ，它是jQuery 版的，有完整的教程。我就不多说了。我在这儿只把它实现为 MooTools 版。

作者：Chris Coyier

The HTML Code :

 <div id="page-wrap">
 
		<div class="widget widget-one rounded">
             盒子一的内容。。。。。。。。。。
        </div>
        <div class="widget widget-two rounded">
             盒子二的内容。。。。。。。。。。
        </div>
        .
        .
        .
        .
        .
 </div>

The CSS Code :

/*公共样式*/
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #333; color: #eee; }
#page-wrap { width: 800px; margin: 20px auto; }
p { margin: 0 0 10px 0; }
 
/*核心样式*/
.rounded { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
 
.widget { width: 300px; padding: 20px; border: 1px solid #999;
          margin: 0 20px 20px 0; float: left; position: relative; }
 
.overlay { 
    position: absolute;top: 0; left: 0; right: 0; bottom: 0;
	background-color:#333;
    background: rgba(0,0,0,0.6);
    text-align: center; 
 
}
 
.widget-button { 
    position: relative;
    padding: 4px 16px; background: black; border: 2px solid white; 
    color: white; text-decoration: none; 
    text-transform: uppercase; -moz-box-shadow: 0 0 20px white; 
    -webkit-box-shadow: 0 0 20px white; box-shadow: 0 0 20px white; 
}
 
.widget-button:hover { color: #fe4902; }

The MooTools JavaScript :

//实现
var tempBox=new Class({
	Implements: [Options,Events],
	//选项参数
	options: {
		container: false,
		text:"",
		url:""
	},
	//初始化构造函数
	initialize: function(options) {
		//set options
		this.setOptions(options);
		this.init(this.options.text,this.options.url);
	},
	//自定义的js方法
	init: function(text, url) {
		var $el, $tempDiv, $tempButton, divHeight = 0;
 
        this.options.container.addEvents({
			 mouseenter: function() {
			  $el=this.setStyle("border-color", "white");
			  divHeight = $el.getSize().y;
			  $tempDiv =new Element('div',{'class': 'overlay rounded'});
			  $tempButton=new Element('a',{
				 'href': url,
				 'html': text,
				 'class': "widget-button rounded",
				 'styles': {
					'top': (divHeight / 2) - 7 + 'px'
				 }					 					 
			  }).inject($tempDiv);
		      $tempDiv.inject(this);
			 },
			 mouseleave: function() {
			  $el = this.setStyle("border-color", "#999");
              $$('.overlay').fade('out').dispose();
			}
	   });
 
	}
 
});

使用方法：

 
window.addEvent('domready',function(){
	 new tempBox({		 
		container:$$('.widget-one'),
		text:'Continue Reading »',
		url:'http://cssrainbow.cn/code-snippets/mootools-code-snippets/1338.html'
	 });
 
	 new tempBox({		 
		container:$$('.widget-two'),
		text:'View Demos »',
		url:'http://cssrainbow.cn/tutorials/jquery/1331.html'
	 });
 
	 new tempBox({		 
		container:$$('.widget-three'),
		text:'Download Files »',
		url:'http://cssrainbow.cn/tutorials/mootools/1327.html'
	 });
 
	 new tempBox({		 
		container:$$('.widget-four'),
		text:'Read More »',
		url:'http://cssrainbow.cn/tutorials/jquery/1321.html'
	 });
});

View Demos »

打破重复的动画效果,基于CSS,MooTools or jQuery

Rainbow — Thu, 24 Jun 2010 05:35:24 +0000

也许您看到此文章的标题，有点怪，不好理解。其实我想表达的应用场景是网页上的视频，图片和在线的文档阅读器等，在初始状态下是一种默认效果，当我们的鼠标移到目标上时是还是没有变化的，还是默认的效果。面对这样重复的默认动画效果。是否我们能改善一下用户的体验，增加一个不一样的动画效果或提示。

说是那么多，还是有点不明白！哈哈，那我们还是先看一下实例吧，你就知道我想说啥！

MooTools View Demo »

jQuery View Demo »

我举的例子，实际上就是图像交叉淡入淡出过渡的效果。

The Html Cood :

 <div id="video-preview">
    <ul>
         <li>
             <a class="quicktime_video" href="http://cssrainbow.cn">
                <img alt="QuickTime version" src="video_quicktime.png">
                Play QuickTime version <span class="download">Right click to download</span>
             </a>
         </li>
         <li>
             <a class="flash_video" href="http://cssrainbow.cn">
                 <img alt="Flash version" src="video_flash.png">
                 Play Flash version <span class="download">Right click to download</span>
             </a>
         </li>
    </ul>
    <img src="image-fade.png" alt="Image Cross Fade Transition" />
 </div>

The CSS Code:

body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; font-size: 16px; line-height: 20px; padding: 20px; }
a { margin:0;padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent;}
a img { border: 0; background: none; }
img	{ vertical-align: middle; }
a:link, a:active, a:visited {color: #fff;text-decoration: none;}
a:hover{color: #C60;}
 
/*CSS Core*/
#video-preview { 
    border: 5px solid #000; 
    width:600px;
	margin: 0 auto;
	position: relative;
    overflow: hidden; 
}
 
#video-preview ul {
	display: block;
	margin: 0; 
	position: absolute;
    width: 600px;
    height: 325px;
/*   width: 100%;
     height: 100%;*/ 
	background:#000;
	top: 0px;
	left: 0px;	
    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0); 
 
}
#video-preview ul li {
	float: left;
	width: 50%;
	margin-top: 65px;
	list-style-type: none;
}
#video-preview ul li a {
	display: block;
	font-size: 20px;
	text-align: center;
	overflow:hidden;/*ie 去掉虚线*/
	outline:0;/*ff 去掉虚线*/
}
#video-preview ul li a img {
	display: block;
	margin: 0 auto 18px auto;
}
#video-preview ul li a.download {
	font-size: 12px;
}
 
#video-preview ul li .download {
	font-size: 12px;
	display: block;
}

The MooTools JavaScript:

window.addEvent('domready',function(){
      $('video-preview').addEvents({
	        mouseenter: function() {
			  this.getElement('ul').setStyle('display','block').fade('0.8');
			},
			mouseleave: function() {
			  this.getElement('ul').setStyle('display','none').fade('0'); 
			}
 
     });										
});

MooTools View Demo »

The jQuery JavaScript:

$(document).ready(function () {
	 $('#video-preview').hover(function () {
		 $(this).find('ul').stop().fadeTo('normal', 0.8);
		 }, function () {
		 $(this).find('ul').stop().fadeTo('normal', 0);
	 });
});

jQuery View Demo »

MooTools FormCheck 功能完善的表单验证插件

Rainbow — Thu, 17 Jun 2010 02:06:20 +0000

FormCheck是一个MooTools类，允许您执行不同的形式测试，以验证表单上他们之前提交数据的有效性。它现在版本已经是1.6了。支持通过CSS自定义外观，将校验提示信息以Tips的方式显示。FormCheck除了支持一些常用的校验包括：必填校验，数字校验，长度校验等。还支持表达式校验包括：电话号码、Email、URL等。国际化的支持，现在支持10种不同的语言
，最重要的是他们提供了完整的API使用说明和不同类型的验证实例 (Forum registration， Registration， User login，Support，Post comment，Simple check，Number range
)。

Features:

Lightweight, shiny and fast
Skins support : customize css, fonts, …
Cross-browser compatibibility
Display errors as tips, or before/after the field
Basic validation (required, alpha, digit, alphanu, length, confirm, …)
Regex validation (phone, email, url)
Custom function based validation, to perform test that could not be handled by basic tests neither regex test.
Make easily your own custom regex and alerts
Internalization : we now support 10 different languages
Active community
A lot of options that allow you to customize this class to fit exactly as you want

如何使用

Attach FormCheck to your HTML document

1 2	<script type="text/javascript" src="/js/formcheck/lang/en.js"> </script> <script type="text/javascript" src="/js/formcheck/formcheck.js"> </script>

Link the desired theme

1	<link rel="stylesheet" href="/js/formcheck/theme/classic/formcheck.css" type="text/css" media="screen" />

Instantiate FormCheck class for the given form

<script type="text/javascript">
window.addEvent('domready', function(){
   new FormCheck('myform');
});
</script>

使用起来是如此的简单，如果想了解更多请点击如下相应链接：

FormCheck Examples

View Demos

Download Files

文本字段/文本区域的默认值自动显示和隐藏

Rainbow — Sun, 13 Jun 2010 00:55:48 +0000

昨天，我看到了张鑫旭同学写的文章是关于《文本框/域文字提示自动显示隐藏jQuery小插件》，我以前也写过这样的教程《表单的文本字段默认值插件，基于 MooTools »》，其实说的都是同样的内容。不过张鑫旭同学加了一些可定制的小效果，使原本单调的默认值，更富有生机了，例如改变
文本字段/文本区域默认值的颜色，输入值的颜色，边框的颜色及输入框的背景颜色都是有可能的。

别的话我就不多说了，直接进入正题。

View Demo »

我也就是把教程《表单的文本字段默认值插件，基于 MooTools »》这个例子完善一下。

The MooTools JavaScript

var textDefaults=new Class({
	//实现
	Implements:[Options,Events],
	//选择参数
	options:{
		collections:false,
		blurColor: "#999",
		focusColor: "#333",
		chgClass: ""
	},
	//初始化构造函数
	initialize: function(options) {
		//设置选项
		this.setOptions(options);
		//调用功能
		this.init(this.options.collections);
	},
	init: function($el) {
			var $blurColor=this.options.blurColor,
			    $focusColor=this.options.focusColor,
				$chgClass=this.options.chgClass;
 
		    $el.each(function(tag){
 
				tag.setStyle('color',$blurColor);
 
				//var $vl=getProperty('value').trim();
				var $vl=tag.value;
 
				if($vl){
				   tag.addEvents({
						focus: function() {
							 if(this.value == $vl) {
							    this.value = '';
							 }
							 this.setStyle("color",$focusColor);
							 if($chgClass){
								this.toggleClass($chgClass);
							}
						}, 
						blur: function() {
							 if(this.value == '') {
							    this.value = $vl;
							 }
							 this.setStyle("color",$blurColor);
							 if($chgClass){
								this.toggleClass($chgClass);
							}
					    }
                       /*focus:function(){
							//alert($vl);
							//alert(this.getProperty('value').trim());
							if(this.getProperty('value').trim() === $vl){
							    this.setProperty('value','');
							}
							this.setStyle("color",$focusColor);
							if($chgClass){
								this.toggleClass($chgClass);
							}
 
						},
						blur:function(){
 
							if(this.getProperty('value').trim() === ""){
							    this.setProperty('value',$vl);
							}
							this.setStyle("color",$focusColor);
							if($chgClass){
								this.toggleClass($chgClass);
							}
						}*/
 
				   });	
				}
 
		    });
 
	}
 
});

调用类，实现一些可定制的功能。

window.addEvent('domready',function(){
 
	new	textDefaults({
	    collections:$$('input','textarea'),
		chgClass: "border",/*改变边框颜色的样式类*/
	    focusColor: "red"/*改变获得焦点时的文本颜色*/	
	});							
 
});

View Demo »

简单的,流行的,可交换的图片字幕,基于CSS and MooTools

Rainbow — Thu, 10 Jun 2010 02:58:09 +0000

我在《如何自动给图片或照片加说明文字，使用 MooTools »》这篇文章中，介绍了如何给图片自动加说明文字的做法，然而，有的时候我们更喜欢比较时尚和可交换的图片说明文字。

虽然他们都说一张照片胜过千言万语，但是不是每一个形象都是不言自明的。有的时候，一句简短的说明文字或在背景上说几句话可以使图像得以区别。这就是为什么图片说明文字（图片字幕）往往是一个好的用户体验。

像图片的下方配有简单的文字说明的应用场景有点死板，虽然起到了图片说明的作用，但是有点用户觉的没有那个必要，因为他很自信，相信自己的理解能力，给图片配有相应的说明文字是多此一举。相反有些用户是希望有图片文字说明的。

既然，我们已经明白了用户的需求，接下来，就需要我们进一步去落实了。

我一直喜欢给予图片说明，但我很少这样做。为什么不呢？原因来自以下：

需要添加大量过剩的HTML标签。
老网站，难以重新设计。
图片和说明文字之间保持着某种固定的关系。
以上原因都有。

今天，我提出一个新的解决方案，解决了以前遗留下来的问题。

那就先看下一演示吧，

View Demo »

以前网页上遗留下的图片代码是类似这样写的

1	<img src="my_image.jpg" alt="替换文字" class="captioned" />

或者

1	<img src="my_image.jpg" alt="替换文字" class="captioned" title="图片说明" />

如果我们的图片标签既有一个 title 属性和 alt 属性, 我们将采取的title 属性的值，不用 alt 属性.

如果我们的标签没有设置title或alt属性，我们要提醒用户，我们需要其中的一个属性。

自动给图片加说明文字

The MooTools JavaScript

$$('img.captioned').each(function(el) {						
    var captionText = ( el.getProperty('title')!=null ) ? el.getProperty('title') : el.getProperty('alt');
    if ( captionText!=null ) {
      var figure = new Element('div', {
        'class' : 'figure',
          'styles' : {
            'width' : el.get('width').toInt()
          }
      });
      var caption = new Element('p', {
        'class' : 'caption',
        'html' : captionText
      });
      figure.wraps(el);
      caption.inject(el,'after');
    } else {
      alert('The image: "'+el.getProperty('src')+'" needs a title or alt value.');
    }
 });

所有的图片会包含在类似这样的结构中：

<div class="figure">
    <img src="my_image.jpg" alt="" class="captioned" />
	<p class="caption">This is going to be my caption!</p>
</div>

以上实现的功能已经在：

如何自动给图片或照片加说明文字，使用 MooTools »文章中具体的介绍过，我这儿就不做具体的讲解了。

可交换的图片说明文字（图片字幕）

当鼠标移动到图片上时，显示相应的图片说明文字，离开图片时就隐藏说明文字，默认的情况下，图片是隐藏相应的说明文字的。

The MooTools JavaScript

$$('.figure').addEvents({
	mouseenter: function() {
   	  this.getElement('.caption').setStyle('display','block').fade('in');
	},
    mouseleave: function() {
	  this.getElement('.caption').setStyle('display','none').fade('out'); 
	}
});

完整的代码，来实现图片自动加说明文字和可交换的图片说明文字效果

The MooTools JavaScript

window.addEvent('domready', function() {
  $$('img.captioned').each(function(el) {						
    var captionText = ( el.getProperty('title')!=null ) ? el.getProperty('title') : el.getProperty('alt');
    if ( captionText!=null ) {
      var figure = new Element('div', {
        'class' : 'figure',
          'styles' : {
            'width' : el.get('width').toInt()
          }
      });
      var caption = new Element('p', {
        'class' : 'caption',
        'html' : captionText
      });
      figure.wraps(el);
      caption.inject(el,'after');
    } else {
      alert('The image: "'+el.getProperty('src')+'" needs a title or alt value.');
    }
  });
  $$('.figure').addEvents({
 
		 mouseenter: function() {
		  this.getElement('.caption').setStyle('display','block').fade('in');
		 },
		 mouseleave: function() {
		  this.getElement('.caption').setStyle('display','none').fade('out'); 
		}
   });
});

The CSS Code :

.figure {
  position: relative; 
}
.figure p.caption {
  display: none;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 94%;
  margin: 0;
  padding: 5px 3%;
  background-color: #000;
  color: #fff;
  font-weight: bold; 
}

View Demo »

jQuery 版的代码如下：

$(document).ready(function() {
	$("img.hascaption").each(function() {
		$(this).wrap('
')
		.after(''+$(this).attr("title")+'
')
		.removeAttr('title');
	});
	$(".figure").width($(this).find('img').width());
 
	$(".figure").mouseenter(function(){
		$(this).find('.caption').slideToggle();
	}).mouseleave(function(){
		$(this).find('.caption').slideToggle();
	});
});

jQuery版的效果，我认为有两点不完善的地方，图片说明文字的来源应该是 img 标签的title属性或者是alt属性，再上一些逻辑判断就是一个很好的例子，应用时最好像MooTools版那样的逻辑就好了，就会少很多的BUG。

jQuery版的作者：Rob Glazebrook

jQuery 版的原文来自：How To Create Simple, Stylish and Swappable Image Captions

GitHub-Style的按钮，基于CSS and MooTools , jQuery

Rainbow — Tue, 08 Jun 2010 06:32:05 +0000

我们都知道，GitHub是一个管理开源代码库的好地方，并且提供了非常有利于用户体验的web界面，使我们使用起来是如此的简单。然而那么好的交互效果，当然离不开 CSS 和 JavaScript。
就像GitHub中的那些基本按钮，也是我喜欢的。接下来，我们可以尝试一下使用HTML ,CSS 和 JavaScript做一个属于自己的GitHub风格的按钮。

View Demo »

The HTML Code :


Basic Button

Button With Icon

The CSS Code :

a{text-decoration: none;}
/* button basics */
a.minibutton {
 display:inline-block; height:23px; padding:0 0 0 3px; font-size:11px;
 font-weight:bold; color:#333; text-shadow:1px 1px 0 #fff;
 background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat;
 white-space:nowrap; border:none; overflow:visible; cursor:pointer;
 text-decoration:none;
}
 
a.minibutton>span{display:block;height:23px;padding:0 10px 0 8px;line-height:23px;background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat;}
a.minibutton:hover, a.minibutton:focus {color:#fff;text-decoration:none;text-shadow:-1px -1px 0 rgba(0,0,0,0.3);background-position:0 -30px;}
a.minibutton:hover>span, a.minibutton:focus>span {background-position:100% -30px;}
 
a.minibutton.mousedown{background-position:0 -60px; }
a.minibutton.mousedown>span{background-position:100% -60px; }
 
/* with icon */
a.btn-download .icon {float:left;margin-left:-4px;width:18px;height:22px;background:url(http://github.com/images/modules/buttons/minibutton_icons.png?v20100306) 0 0 no-repeat;}
a.btn-download .icon {background-position:-40px 0;}
a.btn-download:hover .icon, a.btn-download:focus .icon {background-position:-40px -25px;}

The MooTools or jQuery JavaScript

/* MooTools (FTW) */
window.addEvent('domready',function() {
	$$('a.minibutton').addEvents({
         focus: function() {
			this.addClass('mousedown');
		 },
		 mousedown: function() {
		   this.addClass('mousedown');
		 },
		 blur: function() {
		   this.removeClass('mousedown');
		 },
		 mouseup: function() {
		   this.removeClass('mousedown').blur();
		 }
	});
});
 
/* jQuery */
jQuery.ready(function() {
	jQuery('a.minibutton').bind({
        focus: function() {
			jQuery(this).addClass('mousedown');
		},
		mousedown: function() {
			jQuery(this).addClass('mousedown');
		},
		blur: function() {
			jQuery(this).removeClass('mousedown');
		},
		mouseup: function() {
			jQuery(this).removeClass('mousedown');
		}
	});
});

View Demo »

作者：David Walsh

文章来源：Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript

MooTabs plugin ,基于MooTools

Rainbow — Tue, 25 May 2010 05:35:29 +0000

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

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

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

Download Files »

View Demo »

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

The HTML

 
<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>
 
       
       <ul id="mootoolstuts">
          <li> Stuff in here!</li>
       </ul>
 
       
       <ul id="jquerytuts"  class="hide">
          <li> Stuff in here!</li> 
       </ul>
       
       <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

/* 一般用途 */
.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()。

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 类，许多的细节在其中。

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;
 
		 });
 
        })
 
	}
 
});

调用该插件

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 –

CSSrainbow.cn » MooTools

MooTools TinyTooltips

The CSS Code :

The MooTools JavaScript :

相关日志 »

自己动手写MooTools Tabs Class

The HTML Code :

The CSS Code :

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

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

相关日志 »

9大MooTools Plugins来改善网站的用户体验

1. ScrollSpy

2. LazyLoad

3. SlideShow

4. MooTools More class, Asset

5. TextboxList

6. Zoomer

7. Milkbox

8. FormCheck

9. Mobile

相关日志 »

盒子（Box）中间的链接（Links）,基于MooTools or jQuery

我们的目标

The HTML Code :

The CSS Code :

The MooTools JavaScript :

使用方法：

相关日志 »

打破重复的动画效果,基于CSS,MooTools or jQuery

The Html Cood :

The CSS Code:

The MooTools JavaScript:

The jQuery JavaScript:

相关日志 »

MooTools FormCheck 功能完善的表单验证插件

Features:

如何使用

Attach FormCheck to your HTML document

Link the desired theme

Instantiate FormCheck class for the given form

相关日志 »

文本字段/文本区域的默认值自动显示和隐藏

The MooTools JavaScript

相关日志 »

简单的,流行的,可交换的图片字幕,基于CSS and MooTools

自动给图片加说明文字

The MooTools JavaScript

可交换的图片说明文字（图片字幕）

The MooTools JavaScript

完整的代码，来实现图片自动加说明文字和可交换的图片说明文字效果

The MooTools JavaScript

The CSS Code :

jQuery 版的代码如下：

相关日志 »

GitHub-Style的按钮 ，基于CSS and MooTools , jQuery

The HTML Code :

The CSS Code :

The MooTools or jQuery JavaScript

相关日志 »

MooTabs plugin ,基于MooTools

The HTML

The CSS

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

The MooTools JavaScript

调用该插件

相关日志 »

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

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

GitHub-Style的按钮，基于CSS and MooTools , jQuery