CSSrainbow.cn http://cssrainbow.cn Sharing what I know and learn about (X)HTML,CSS,JavaScript,MooTools,Dojo,jQuery,PHP,ASP,Java,Python and ∞. Tue, 27 Jul 2010 13:57:55 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 本地图片预览二三事 http://cssrainbow.cn/tutorials/javascript/1354.html http://cssrainbow.cn/tutorials/javascript/1354.html#comments Tue, 27 Jul 2010 13:55:47 +0000 Rainbow http://cssrainbow.cn/?p=1354 到目前为止，只有IE和FF可以预览本地图片。IE下可以直接浏览本地图片，通过input[type=file]的value属性就可以取到本地图片的路径。而在FF下，有getAsDataURL()方法可以生成图片的DataURL，然后赋值给img标签。]]> 上传图片是我们Web开发经常用到的一个功能，那当然少不了文件域标签的使用，如果是上传的是图片文件能够提前预览就好了。

1

<input type="file"/>

到目前为止，只有IE和FF可以预览本地图片。IE下可以直接浏览本地图片，通过input[type=file]的value属性就可以取到本地图片的路径。
而在FF下，有getAsDataURL()方法可以生成图片的DataURL，然后赋值给img标签。

各种浏览器的支持情况

Internet Explorer & Opera

这两种浏览器返回的值是一样，如果把此站点添加到IE “受信任的站点”列表中，是一个完整的文件的路径。否则就是它：

1

C:\fakepath\image.png

如果还是不理解的话，请看这篇文章《揭露 c:\fakepath 的秘密》。

WebKit (Safari / Chrome)

返回该文件的输入值没有任何价值。

Firefox

Firefox是独特的，它的返回值仅是文件名。不过Firefox提供了一个函数’getAsDataURL（）’方法可以获得图片文件的完整路径。

IE 下效果的JavaScript Code：

1
2
3

document.getElementById("upload").onchange = function() {
	 document.getElementById("image").src = this.value;
}

FF 下效果的JavaScript Code:

1
2
3

document.getElementById("upload").onchange = function() {
	 document.getElementById("image").src = this.files[0].getAsDataURL();
}

IE and FF 的JavaScript Code:

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

/*
   var ie=!-[1,]
   最短的IE浏览器判断
*/
 
if(-[1,]){
		 document.getElementById("upload").onchange = function() {
	          document.getElementById("image").src = this.files[0].getAsDataURL();
         }
	}else{
		document.getElementById("upload").onchange = function() {
			  document.getElementById("image").src = this.value;
		}
}

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

 
  // File target is a <input type="file" />
  $("#file-upload").change(function() {
 
    // Browser supports `files` as part of DOM
    if (this.files) {
 
      //  This works in Firefox, #image-preview is an <img src="" />
      $("#image-preview").attr("src", this.files[0].getAsDataURL());
 
    } else {
 
      // This is just wishful thinking, but it's a security issue so the value of the input is never
      // a true local file path
      $("#image-preview").attr("src", $("#file-upload").val());
 
    }
 
    // Firefox gives you a file name 
    // Safari / Chrome gives you nothing
    // IE / Opera gives you a weird /fakepath/filename.ext
 
    $("#file-upload-area").append($("#file-upload").val());
 
    $("#preview-area").show();
 
  });

Ajax 图片上传

http://www.zurb.com/playground/ajax_upload

图片上传预览，基于JavaScript

相关日志 »

]]> http://cssrainbow.cn/tutorials/javascript/1354.html/feed 0 Element.highlight扩展方法，基于MooTools http://cssrainbow.cn/code-snippets/mootools-code-snippets/1349.html http://cssrainbow.cn/code-snippets/mootools-code-snippets/1349.html#comments Mon, 05 Jul 2010 08:59:11 +0000 Rainbow http://cssrainbow.cn/?p=1349 Element Highlight 是一个强调或突出元素的一个动画效果插件，默认情况下所有的同类元素都是不透明的，当我们的鼠标移动到某一个元素上时，就会与其它剩下的元素有区别，就会突出显示。

MooTools Element Highlight

View Demo »

  

Download Files »

此实例用到了MooTools More 中的一个插件是Element.Delegation

Element.Delegation

Delegates events for child elements to their parents for greater efficiency。

MooTools 的 Element.Delegation 类似于 jQuery1.3 中live()方法，后来在jQuery1.4中也引入了Delegate，Delegate补救了live的很多不足，他将事件直接绑定到了context，而不是document。不过MooTools 的 Element.Delegates 更好用！

哎，不多说了，要想使用MooTools 的Element.highlight扩展方法，必须得用 MooTools More 中的 Element.Delegation插件。

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

/*
---
description: Sets full opacity to element that is moused over while dimming all other elements of same class.
license: MIT-style
authors: [Michael Russell]
provides: [Element.highlight]
requires: 
  core/1.2.4: [Element, Fx.Tween]
  more/1.2.4.4: [Element.Delegation]
...
*/
 
Element.implement({
 
	highlight: function( linkClass, opacity ) {
 
		opacity = ( opacity ) ? opacity : .3;
		linkClass = ( linkClass.charAt( 0 ) == '.' ) ? linkClass : '.' + linkClass;
 
		this.addEvent( 'mouseover:relay('+ linkClass +')', function( e, elem ) {
 
			$$( linkClass ).each( function( link ) {
 
				if( elem != link ) {
 
					link.tween( 'opacity', opacity );
				}
			});
		});
 
		this.addEvent( 'mouseout:relay('+ linkClass +')', function( e, elem ) {
 
			$$( linkClass ).each( function( link ) {
 
				link.tween( 'opacity', 1 );
			});
		});
	}
});

View Demo »

  

Download Files »

相关日志 »

]]> http://cssrainbow.cn/code-snippets/mootools-code-snippets/1349.html/feed 11 盒子（Box）中间的链接（Links）,基于MooTools or jQuery http://cssrainbow.cn/tutorials/jquery/1347.html http://cssrainbow.cn/tutorials/jquery/1347.html#comments Wed, 30 Jun 2010 02:40:16 +0000 Rainbow http://cssrainbow.cn/?p=1347 盒子中间的链接,这个标题不知道如何取比较合适，说白了就是给一个Box 模块中间加一个有遮罩效果和悬停效果的超链接，当我们的鼠标移到盒子上面有一个醒目的链接按钮，反之，链接按钮消失并移除。

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


middle box links

 

View Demos »

 

我们的目标

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

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

注意：

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

作者：Chris Coyier

The HTML Code :

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

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

/*公共样式*/
* { 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 :

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

//实现
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();
			}
	   });
 
	}
 
});

使用方法：

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

 
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 »

相关日志 »

]]> http://cssrainbow.cn/tutorials/jquery/1347.html/feed 5 使用MooTools, jQuery, and Dojo 来完成常见任务的语法归类 http://cssrainbow.cn/code-snippets/mootools-code-snippets/1342.html http://cssrainbow.cn/code-snippets/mootools-code-snippets/1342.html#comments Tue, 29 Jun 2010 02:23:58 +0000 Rainbow http://cssrainbow.cn/?p=1342 最近，我开始关注Dojo了，Dojo是一个强大的面向对象JavaScript框架,既然我那么喜欢MooTools,也没理由不喜欢Dojo。与Dojo相比我对MooTools 和 jQuery 是比较熟的。这并不重要，不管使用什么样的语言，我们完成的任务是相同的，本质上的区别是使用的语法不同罢了。


JavaScript-Framework-Matrix

接下来，我就来看一些不同JavaScript框架，如何使用一些基本的语法，来完成共同任务。

Execute Code when the DOM is Ready / window.load注册事件的替代方法

The Dojo Toolkit :

1
2
3

dojo.ready(function() {
	//do stuff
});

The jQuery :

1
2
3

jQuery(document).ready(function() {
	//do stuff
});

The MooTools :

1
2
3

window.addEvent('domready',function() {
	//do stuff
});

Elements Style / 设置元素的样式

The Dojo Toolkit ：

1
2

dojo.byId('myElement').style('background', 'blue');
dojo.query('#id, .class, div').style('background', 'blue');

The jQuery ：

1
2
3

jQuery('#myElement').css('background', 'blue'); 
jQuery('#id, .class, div').css('background', 'blue'); 
jQuery("div p").css("background", "blue");

The MooTools ：

1
2
3

document.id('id').setStyle('background', 'blue');
$$('#id', '.class', 'div').setStyle('background', 'blue'); 
$$("div p").setStyle('background', 'blue');

Collect Elements / 搜集元素

The Dojo Toolkit ：

1
2

var myElement = dojo.byId('myElement');
var divs = dojo.query('div');

The jQuery ：

1
2

var myElement = jQuery('#myElement');
var divs = jQuery('div');

The MooTools ：

1
2

var myElement = document.id('myElement');
var divs = $$('div');

Create Event Listeners / 创建事件监听器

The Dojo Toolkit ：

1
2
3

dojo.connect(dojo.byId('myElement'),'onclick',function() {
	alert('You clicked me!');
});

The jQuery ：

1
2
3
4
5
6
7

jQuery('#myElement').click(function() {
	alert('You clicked me!');
});
// or 
jQuery('#myElement').bind("click", function(){
 	alert('You clicked me!');
});

The MooTools ：

1
2
3

document.id('myElement').addEvent('click',function() {
	alert('You clicked me!');
});

Create a New Element, Inject Into Document.Body / 元素的创建和添加

The Dojo Toolkit ：

1
2
3
4

dojo.create('div',{
	innerHTML: 'This is a new element',
	id: 'myElement'
},dojo.body());

The jQuery ：

1

jQuery('<div id="myElement">This is a new element</div>').appendTo('body');

The MooTools ：

1
2
3
4

new Element('div',{
	id: 'myElement',
	text: 'This is a new element'
}).inject(document.body);

Execute AJAX Requests / 执行Ajax请求

The Dojo Toolkit ：

1
2
3
4
5
6
7
8
9

dojo.xhrPost({
	url: 'save.php',
	content: {
		id: dojo.byId('user-id').value
	}
	load: function(response) {
		alert('Received the following response:  ' + response);
	}
});

The jQuery ：

1
2
3
4
5
6
7
8
9
10

jQuery.ajax({
	url: 'save.php',
	type: 'post',
	data: {
		id: jQuery('#user-id').val()
	},
	success: function(response) {
		alert('Received the following response:  ' + response);
	}
});

The MooTools ：

1
2
3
4
5
6
7
8
9
10

new Request({
	url: 'save.php',
	method: 'post',
	data: {
		id: document.id('user-id').value
	},
	onSuccess: function(response) {
		alert('Received the following response:  ' + response);
	}
}).send();

Animate the Opacity of an Element / 动画与透明度

The Dojo Toolkit ：

1

dojo.anim('myElement',{ opacity: 0.7 }, 250);

The jQuery ：

1
2

jQuery('#myElement').fadeTo(250,0.7);
//duration first...ftl

The MooTools ：

1

document.id('myElement').set('tween',{ duration: 250 }).fade(0.7);

你想了解更多。。。主流JavaScript框架完成相同任务的语法吗？

请看：JavaScript Framework Matrix

相关日志 »

]]> http://cssrainbow.cn/code-snippets/mootools-code-snippets/1342.html/feed 0 元素等高或等宽的插件，基于MooTools http://cssrainbow.cn/code-snippets/mootools-code-snippets/1338.html http://cssrainbow.cn/code-snippets/mootools-code-snippets/1338.html#comments Mon, 28 Jun 2010 07:24:52 +0000 Rainbow http://cssrainbow.cn/?p=1338 保持同一容器中的所有元素之间具有相等的高度或相等宽度，可以使一个页面变的美观和整洁。遗憾的是，有的时候想保持同一高度或同一宽度的列或行是用CSS很难做到的。

我们就不得不借助JavaScript来实现此功能了。我这儿就给大家提供一个 ”元素等高或等宽的插件“，它的灵感来自 David Walsh (http://davidwalsh.name/mootools-equal-heights) 。

Elements.equalize

 

View Demo »

 

Download Files »

 

The MooTools JavaScript:

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

Elements.implement({
	'equalize': function(axis)
	{
		var max = 0,
			axis = axis ? axis.toLowerCase() : 'height',
			offset = 'offset' + axis.capitalize(),
			prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min-' : '') + axis;
 
		if (['height', 'width'].indexOf(axis.toLowerCase()) == -1)
		{
			axis = 'height';
		}
 
		this.each(function(element, i) {
			var calc = element[offset];
			if (calc > max) max = calc;
		}, this).each(function(element, i) {
			element.setStyle(prop, max - (element[offset] - element.getStyle(axis).toInt()));
		}, this);
	}
});

如何使用：

1
2
3

document.getElements('.height').equalize();
 ...
document.getElements('.width').equalize('width');

具体的用法，请看示例演示中源码。

 

View Demo »

 

Download Files »

相关日志 »

]]> http://cssrainbow.cn/code-snippets/mootools-code-snippets/1338.html/feed 1 在我喜欢的JavaScript Frameworks中使用匿名方法 http://cssrainbow.cn/code-snippets/mootools-code-snippets/1333.html http://cssrainbow.cn/code-snippets/mootools-code-snippets/1333.html#comments Sun, 27 Jun 2010 14:25:10 +0000 Rainbow http://cssrainbow.cn/?p=1333 我们习惯于把匿名方法应用于我们最喜爱的JavaScript框架中。这样一来，我就可以通过匿名方法的方式快速引用框架中的对象了。

Dojo1.4 and MooTools or jQuery

The following pattern within jQuery code:

1
2
3

(function($) {
	//your jQuery here, referenced by $
})(jQuery);

The following pattern within MooTools code:

1
2
3
4
5
6
7
8

(function($) {
	//your MooTools here, referenced by $
})(document.id);
 
(function($,$$){
    //your MooTools here, referenced by $
    //selector engine referenced by $$ 
}) (document.id,$$);

The following pattern within Dojo code:

在Dojo社区中，我经常看到的是以下的方式：

1
2
3

;(function(d,$) {
	//your dojo here, selector engine referenced by $
})(dojo,dojo.query);

MooTools 团队的David Walsh，已经建立了自己比较喜欢的一种方式，那就是和MooTools开发类似的方法，让MooTools的开发者也更容易使用Dojo：

1
2
3
4
5

;(function(d,$,$$) {
	//your dojo here
	//byId referenced by $
	//selector engine referenced by $$
})(dojo,dojo.byId,dojo.query);

虽然 $$ 方法是MooTools特有的, Dojo也有一个byId方法用来得到一个单一的节点和一个query方法来检索多个节点,query方法和MooTools的 $$ 方法一样的，可以使用CSS3风格的语法来实现快速查询的一种机制。

相关日志 »

]]> http://cssrainbow.cn/code-snippets/mootools-code-snippets/1333.html/feed 4 打破重复的动画效果,基于CSS,MooTools or jQuery http://cssrainbow.cn/tutorials/jquery/1331.html http://cssrainbow.cn/tutorials/jquery/1331.html#comments Thu, 24 Jun 2010 05:35:24 +0000 Rainbow http://cssrainbow.cn/?p=1331 也许您看到此文章的标题，有点怪，不好理解。其实我想表达的应用场景是网页上的视频，图片和在线的文档阅读器等，在初始状态下是一种默认效果，当我们的鼠标移到目标上时是还是没有变化的，还是默认的效果。面对这样重复的默认动画效果。是否我们能改善一下用户的体验，增加一个不一样的动画效果或提示。

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

Repeating Animations

 

MooTools View Demo »
  
jQuery View Demo »

 

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

The Html Cood :

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

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

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

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:

1
2
3
4
5
6
7
8
9
10
11

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:

1
2
3
4
5
6
7

$(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 »

 

相关日志 »

]]> http://cssrainbow.cn/tutorials/jquery/1331.html/feed 3 MooTools FormCheck 功能完善的表单验证插件 http://cssrainbow.cn/tutorials/mootools/1327.html http://cssrainbow.cn/tutorials/mootools/1327.html#comments Thu, 17 Jun 2010 02:06:20 +0000 Rainbow http://cssrainbow.cn/?p=1327 FormCheck是一个MooTools类，允许您执行不同的形式测试，以验证表单上他们之前提交数据的有效性。它现在版本已经是1.6了。支持通过CSS自定义外观，将校验提示信息以Tips的方式显示。FormCheck除了支持一些常用的校验包括：必填校验，数字校验，长度校验等。还支持表达式校验包括：电话号码、Email、URL等。国际化的支持，现在支持10种不同的语言
，最重要的是他们提供了完整的API使用说明和不同类型的验证实例 (Forum registration， Registration， User login，Support，Post comment，Simple check，Number range
)。

MooTools FormCheck

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

1
2
3
4
5

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

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

 

FormCheck Examples

 

View Demos

 

Download Files

相关日志 »

]]> http://cssrainbow.cn/tutorials/mootools/1327.html/feed 0 文本字段/文本区域的默认值自动显示和隐藏 http://cssrainbow.cn/tutorials/mootools/1324.html http://cssrainbow.cn/tutorials/mootools/1324.html#comments Sun, 13 Jun 2010 00:55:48 +0000 Rainbow http://cssrainbow.cn/?p=1324 昨天，我看到了张鑫旭同学写的文章是关于《文本框/域文字提示自动显示隐藏jQuery小 插件》 ，我以前也写过这样的教程《表单的文本字段默认值插件，基于 MooTools »》，其实说的都是同样的内容。不过张鑫旭同学加了一些可定制的小效果，使原本单调的默认值，更富有生机了，例如改变
文本字段/文本区域默认值的颜色，输入值的颜色，边框的颜色及输入框的背景颜色都是有可能的。

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

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

 

View Demo »

 

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

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
69
70
71
72
73
74
75
76
77
78
79
80

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

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

1
2
3
4
5
6
7
8
9

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

 

View Demo »

 

相关日志 »

]]> http://cssrainbow.cn/tutorials/mootools/1324.html/feed 0 简单的,流行的,可交换的图片字幕,基于CSS and MooTools http://cssrainbow.cn/tutorials/jquery/1321.html http://cssrainbow.cn/tutorials/jquery/1321.html#comments Thu, 10 Jun 2010 02:58:09 +0000 Rainbow http://cssrainbow.cn/?p=1321

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

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

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

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

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

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

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

Swappable-Image-Captions

 

那就先看下一演示吧，

 

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 属性.

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

自动给图片加说明文字

The MooTools JavaScript

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

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

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

1
2
3
4

<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

1
2
3
4
5
6
7
8

$$('.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

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

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 :

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

.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 版的代码如下：

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

$(document).ready(function() {
	$("img.hascaption").each(function() {
		$(this).wrap('<div class="figure"></div>')
		.after('<p class="caption">'+$(this).attr("title")+'</p>')
		.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

相关日志 »

]]> http://cssrainbow.cn/tutorials/jquery/1321.html/feed 0