<![CDATA[Rainweb前端开发技术博客-专注于web前端开发，专注于用户体验]]> http://www.rainweb.cn/ zh-cn PBlog2 v2.4 Rainweb前端开发技术博客-专注于web前端开发，专注于用户体验 http://www.rainweb.cn/images/logos.gif http://www.rainweb.cn/ Rainweb前端开发技术博客-专注于web前端开发，专注于用户体验 http://www.rainweb.cn/article/CSS3-radius.html <![CDATA[CSS3—圆形遮罩效果]]> Rainweb@163.com(rainweb) Tue,27 Dec 2011 14:32:11 +0800 http://www.rainweb.cn/default.asp?id=342 一、效果直击

CSS3下的圆形遮罩效果demo

因为是使用纯洁的CSS3实现，因此，IE6~8浏览器又一次光荣获得“打酱油”的称号！

鼠标经过年轻的张含韵小姐身体的任一部位，然后——

在Chrome浏览器下，或许是受到“菊花”的感应，其圆形呈开放的菊花状，效果很闪那！！

二、小小原理

虽说效果离不开CSS3，但，最最关键的核心属性是CSS border属性，偌大的半透明边框属性（demo中边框宽度512像素），边框颜色为rgba黑色半透明，然后50%圆角。

相关CSS代码如下：

CSS代码
  1. .test_cover {  
  2.     width: 100px;  
  3.     height: 100px;  
  4.     border: 512px solid rgba(0, 0, 0, .35);  
  5.     border-radius: 50%;  
  6.     /* 定位 */  
  7.     position: absolute;  
  8.     left: -325px;  
  9.     top: -465px;  
  10. }  

 

很简单吧，然后父标签来个尺寸限制，溢出隐藏就完事大吉了。具体细节可参见demo页面的代码展示。

三、实际应用

由于本效果是CSS驱动的，因此对于PC浏览器，目前还无法投入实际应用，但是，如果针对Android或是iphone、ipad等设备开发页面，该技术就可以有实际的应用了。

应用背景如下：
当我们退出一款新的产品的时候，所有的用户都是new user，他们面对一个新颖陌生的产品，肯定会有一些不熟悉的地方，此时，一个善意的引导与说明就很有必要。既可以展示产品的优点，又方便用户上手操作。

此时，我们可以尝试使用遮罩效果（可以将用户的注意力focus在一点上）来做引导提示，体验会很舒服。

]]> http://www.rainweb.cn/article/json-4.html <![CDATA[记录json点滴（四）]]> Rainweb@163.com(rainweb) Wed,16 Nov 2011 13:27:35 +0800 http://www.rainweb.cn/default.asp?id=341 将后台程序(如php)发送过来的json数据转化为javascript的数组或者对象的方法十分简单，代码如下：

JavaScript代码
  1. // 假设后台发送的json数据为 '{a:2,b:1}' 存储于str中  
  2. var data = eval( '(' + str + ')' );  

然而想将一个javascript对象转化为json格式的字符串却并不那么简单，特别是对象的属性值递归包含一个对象时(如 var obj={a:[2,3],b:{m:[3,4],n:2} } ),那么有没有什么方法将obj转化为json格式的字符串呢？

当然你可以自己写一个函数，递归遍历一个对象并将其转化为json格式的字符串，对于大部分人来说这有些困难并容易出错。幸好已经有人做好了这件事情，你只用包含一段javascript代码即可。

json2.js

使用方法：

XML/HTML代码
  1. <!doctype html>  
  2. <html>  
  3. <body>  
  4. <script src="json2.js"></script>  
  5. <script>  
  6. var obj={a:[2,3],b:{m:[3,4],n:2} };  
  7. var jsonStr = JSON.stringify( obj );  
  8. alert(jsonStr);  
  9. //将显示 {"a":[2,3],"b":{"m":[3,4],"n":2}}  
  10. </script>  
  11. </body>  
  12. </html>  

假如有两个变量，我要将a转换成字符串，将b转换成JSON对象：

JavaScript代码
  1. var a={"name":"tom","sex":"男","age":"24"};  
  2. var b='{"name":"Mike","sex":"女","age":"29"}';  

在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify()和 parse()方法。JSON.stringify(obj)将JSON转为字符串。JSON.parse(string)将字符串转为JSON格式；

上面的转换可以这么写：

JavaScript代码
  1. var a={"name":"tom","sex":"男","age":"24"};  
  2. var b='{"name":"Mike","sex":"女","age":"29"}';  
  3. var aToStr=JSON.stringify(a);  
  4. var bToObj=JSON.parse(b);  
  5. alert(typeof(aToStr));  //string  
  6. alert(typeof(bToObj));  //object  

JSON.stringify()

ie8(兼容模式),ie7和ie6没有JSON对象，不过http://www.json.org/提供了一个json.js,这样ie8(兼 容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；你可以在https://github.com /douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。ie8(兼容模式),ie7和ie6可以使用 eval()将字符串转为JSON对象：

JavaScript代码
  1. var c='{"name":"Mike","sex":"女","age":"29"}';  
  2. var cToObj=eval("("+c+")");  
  3. alert(typeof(cToObj));  

jQuery中也有将字符串转为JSON格式的方法jQuery.parseJSON( json )，接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript （JSON）对象。当然如果有兴趣可以自己封装一个jQuery扩展，jQuery.stringifyJSON(obj)将JSON转为字符串。

JSON.stringify(jsonobj)，本来是最简便的方法，可是存在浏览器兼容问题（仅适用于IE8+，Chrome 1+，FF 3+）。下面再介绍一个方法：

JavaScript代码
  1. var O2String = function (O) {  
  2.        //return JSON.stringify(jsonobj);  
  3.   
  4.        var S = [];  
  5.        var J = "";  
  6.        if (Object.prototype.toString.apply(O) === '[object Array]') {  
  7.            for (var i = 0; i < O.length; i++)  
  8.                S.push(O2String(O[i]));  
  9.            J = '[' + S.join(',') + ']';  
  10.        }  
  11.        else if (Object.prototype.toString.apply(O) === '[object Date]') {  
  12.            J = "new Date(" + O.getTime() + ")";  
  13.        }  
  14.        else if (Object.prototype.toString.apply(O) === '[object RegExp]' || Object.prototype.toString.apply(O) === '[object Function]') {  
  15.            J = O.toString();  
  16.        }  
  17.        else if (Object.prototype.toString.apply(O) === '[object Object]') {  
  18.            for (var i in O) {  
  19.                O[i] = typeof (O[i]) == 'string' ? '"' + O[i] + '"' : (typeof (O[i]) === 'object' ? O2String(O[i]) : O[i]);  
  20.                S.push(i + ':' + O[i]);  
  21.            }  
  22.            J = '{' + S.join(',') + '}';  
  23.        }  
  24.   
  25.        return J;  
  26. };  

使用方法也很简单：

JavaScript代码
  1. var jsonStr = O2String(  
  2.              [  
  3.                  {  
  4.                      "Page": "plan",  
  5.                      "Custom":  
  6.                      [  
  7.                          {  
  8.                              "ItemName": "CustomLabel1",  
  9.                              "ItemContent": 1,   
  10.                              "IsItem": true,  
  11.                              "ItemDate": new Date(1320774905467),  
  12.                              "ItemReg": /[\w]*?/gi,  
  13.                              "ItemFunc": function () { alert("ItemFunc"); }  
  14.                          },  
  15.                          {  
  16.                              "ItemName": "CustomLabel1",  
  17.                              "ItemContent": 1,  
  18.                              "IsItem": true,  
  19.                              "ItemDate": new Date(1320774905467),  
  20.                              "ItemReg": /[\w]*?/gi,  
  21.                              "ItemFunc": function () { alert("ItemFunc"); }  
  22.                          }  
  23.                      ]  
  24.                  },  
  25.                  {  
  26.                      "Page": "project",  
  27.                      "Custom":  
  28.                      [  
  29.                          {  
  30.                              "ItemName": "CustomLabel2",  
  31.                              "ItemContent": 2,  
  32.                              "IsItem": false,  
  33.                              "ItemDate": new Date(1320774905467),  
  34.                              "ItemReg": /[\w]*?/gi,  
  35.                              "ItemFunc": function () { alert("ItemFunc"); }  
  36.                          },  
  37.                          {  
  38.                              "ItemName": "CustomLabel2",  
  39.                              "ItemContent": 2,  
  40.                              "IsItem": false,  
  41.                              "ItemDate": new Date(1320774905467),  
  42.                              "ItemReg": /[\w]*?/gi,  
  43.                              "ItemFunc": function () { alert("ItemFunc"); }  
  44.                          }  
  45.                      ]  
  46.                  }  
  47.              ]  
  48.          );  
  49.          alert(jsonStr);  
  50.          var jsonObj = eval("(" + jsonStr + ")");  
  51. alert(jsonObj.length);  

 

]]> http://www.rainweb.cn/article/transparent-bg.html <![CDATA[层的半透明实现方案]]> Rainweb@163.com(rainweb) Mon,31 Oct 2011 16:15:15 +0800 http://www.rainweb.cn/default.asp?id=340 一、使用 opacity + Alpha Filter

看起来手挺简单的吧？嗯。挺简单的… 希望你能很方便实现这个方案！其实见到这个的时候，我们的第一想法当然是 background + opacity，在不支持 opacity 的 IE 使用 filter 的 alpha 滤镜来实现。然后，我们得到这样的效果：

 

 

 

CSS代码
  1. .opacity{  
  2.     background:#000;  
  3.     opacity:0.3;  
  4.     filter: alpha(opacity=30);  
  5. }  

 

无一例外，最外层，最内层和文字，都被设置了 opacity（alpha 也是使用 opacity ） 。当然，我们可以给各层设置 opacity 变回来。但这是多麻烦的事(不信试一下)。

二、最佳实践：rgba色彩 + Gradient Filter

其实我们可以选用 background-color: rgba() 来实现，同样可以实现透明效果，并且只应用于当前元素，不继承。而 IE 的 filter 有很多滤镜效果。其中的渐变滤镜，只要变通一下，就可以实现我们想要的效果，并且这个滤镜不会被下级元素继承，这样元素的内容就不会被虚化。代码如下：

CSS代码
  1. /* 
  2.  * filter 渐变滤镜详细用法，[参见这里] 
  3.  * StartColorStr 和 EndColorStr: 
  4.  *    #4c000000 是 30% 透明度的 #000000 的意思 
  5.  *    组成: # + 透明度 + 颜色 
  6.  *    算法: Math.floor(0.6 * 255).toString(16); 
  7.  */  
  8. .rgba{  
  9.     background:rgba(0, 0, 0, 0.3);  
  10.     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');  
  11. }  

 不过，我们得到的效果是这样的，IE9 的透明度竟然有 60%!! 这显然不是我们想法的。原因是：IE9 也支持 filter，使得 filter 的结果和 background-color 叠加，所以是 60%。具体参见 DEMO 和示例图:

那么我们可以利用IE HACK，单独把 IE9 的 filter 变成透明度为 0 即可。高级浏览器大部分支持 :root 伪类，但不支持 filter 属性，而 IE 只有 IE9 支持，所以我们可以这样写。代码如下：

CSS代码
  1. :root .rgba{    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');  
  2. }  

 当然，第二种方法可以应用于 background，也可应用于 border 上。

整体的代码可参见DEMO。

 

 

]]> http://www.rainweb.cn/article/javascript-tag-could.html <![CDATA[javascript实现标签云]]> Rainweb@163.com(rainweb) Fri,21 Oct 2011 23:15:55 +0800 http://www.rainweb.cn/default.asp?id=339 这是一个效果图

原理：随机取色，随机字体大小

实现：

1、随机方法：

JavaScript代码
  1. function rand(num){  
  2.        return parseInt(Math.random()*num+1);  
  3.       }  

2、随机取色：

JavaScript代码
  1. function randomcolor(){  
  2.         var str=Math.ceil(Math.random()*16777215).toString(16);  
  3.         if(str.length<6){  
  4.           str="0"+str;  
  5.         }  
  6.         return str;  
  7.       }  

3、循环dom

XML/HTML代码
  1. for( len=obj.length,i=len;i--;){  
  2.         obj[i].style.left=rand(600)+"px";  
  3.         obj[i].style.top=rand(400)+"px";  
  4.         obj[i].className="color"+rand(5);  
  5.         obj[i].style.zIndex=rand(5);  
  6.         obj[i].style.fontSize=rand(12)+12+"px";  
  7.        // obj[i].style.background="#"+randomcolor();  
  8.         obj[i].style.color="#"+randomcolor();  
  9.         obj[i].onmouseover=function(){  
  10.           this.style.background="#"+randomcolor();  
  11.         }  
  12.         obj[i].onmouseout=function(){  
  13.           this.style.background="none";  
  14.         }  
  15.       }  

4、dom结构

XML/HTML代码
  1. <div id="wrap">  
  2.    <a href="#">web标准学习</a><a href="#">css</a>  
  3.    <a href="#">javascript</a><a href="#">html5</a>  
  4.    <a href="#">canvas</a><a href="#">video</a>  
  5.    <a href="#">audio</a><a href="#">jQuery</a>  
  6.    <a href="#">jQuerymobile</a><a href="#">flash</a>  
  7.    <a href="#">firefox</a><a href="#">chrome</a>  
  8.    <a href="#">opera</a><a href="#">IE9</a>  
  9.    <a href="#">css3.0</a><a href="#">andriod</a>  
  10.    <a href="#">apple</a><a href="#">google</a><a href="#">jobs</a>  
  11.   </div>  

 

这里是实际效果【刷新当前页面，查看变化】

 

   web标准学习    css    javascript    html5    canvas    video    audio    jQuery    jQuerymobile    flash    firefox    chrome    opera    IE9    css3.0    andriod    apple    google    jobs   

  

 

 

]]> http://www.rainweb.cn/article/align-middle.html <![CDATA[有关垂直居中]]> Rainweb@163.com(rainweb) Thu,13 Oct 2011 22:04:02 +0800 http://www.rainweb.cn/default.asp?id=338 前端实现页面垂直居中的几种思路：

一、利用 position 和负边距

利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明：

CSS代码
  1. /* 代码实现： 
  2.  * 设定宽度和高度，父节点为 position:relative; CSS是这样写的: 
  3.  */  
  4. .selector {  
  5.      position:absolute;top:50%;。  
  6.      margin-top:-元素自身高度的一半;  
  7. }  

 

二、使用 <table />

<table /> 真是各种好用，她是各种布局、居中的法宝。垂直居中对其来说，也是非常简单的事。table cells 的 vertical-align:middle 就可以直接解决。所以实现起也来只要这样一行代码：

CSS代码
  1. td{ vertical-align:middle; }  

 

三、通用解决方案

使用第一方案的问题是，通常我们需要垂直居中的元素高度都是不确实的。这里我们需要用 JS 来实现高度的计算，再实现负边；而第二种方案的局限在于只应用于 <table />。其实是，我们可能综合这两种方法，来做一个 Hack。

像我们知道的，在 CSS2.1 中，任何元素都可以使用 display:table / display:table-cell来实现与 table 一样的功能。那么，只要支持 display:table 的浏览器，已经可以轻松解决，只要这样写代码：

XML/HTML代码
  1. <!-- DOM 结构 -->  
  2. <div>  
  3.     <p>content</p>  
  4. </div>  
  5.   
  6. /* CSS 实现 */  
  7. div { display:table; }  
  8. p{ display:table-cell; vertical-align:middle; }  

 

但问题是，这种方法在 IE6/7 是不能实现的，因为他们不支持 display:table 这个特性。那有没有办法不计算高度，利用第一种方案来实现垂直居中呢？其实也未尝不可。看看下面这个 DOM 结构和图示：

XML/HTML代码
  1. <div class="wrap">  
  2.     <div class="hack">  
  3.         <div class="cnt">  
  4.             content  
  5.         </div>  
  6.     </div>  
  7. </div>  

 

其实我们只要加多一层。内 .hack 层 top:50%; 再让 .cnt 层相对自身向上提50%。如上图所示。

 

CSS代码
  1. /* CSS 部分的代码实现：整体代码参见上述 demo*/  
  2. .wrap{  
  3.     width:500px;height:300px;border:3px solid #ddd;margin:0 auto;padding:20px;display:table;  
  4.     *position:relative;  
  5. }  
  6. .hack{  
  7.     display:table-cell;vertical-align:middle;  
  8.     *position:absolute;*top:50%;  
  9. }  
  10. .cnt{  
  11.     *position:relative;*top:-50%;  
  12. }  

 

查看demo演示查看demo演示查看demo演示


]]> http://www.rainweb.cn/article/js-template-mustache.html <![CDATA[javascript 模板系统—mustache]]> Rainweb@163.com(rainweb) Mon,26 Sep 2011 22:21:52 +0800 http://www.rainweb.cn/default.asp?id=337 最近在做一个自定义表单的项目，由于各种原因，需使用前台javascript模板，上网google了一下，javascript模板方面的介绍不是很多，不像extjs等框架已经有很成熟的模板系统了，最近微软也发布了一个基于jquery的模板插件（http://github.com/nje/jquery-tmpl），基本用法类似，这些模板都定义了自己专用的模板语言。同事介绍了一个mustache.js的模板类，与大家分享下。

据作者写道Twitter也使用了这个模板类，国内腾讯也有自己的js模板类，请看QQ群空间源码。

下面介绍一下最基本的使用方法：

JavaScript代码
  1. var view = {  
  2.   title: "Joe",  
  3.   calc: function() {  
  4.     return 2 + 4;  
  5.   }  
  6. }  
  7.   
  8. var template = "{{title}} spends {{calc}}";  
  9.   
  10. var html = Mustache.to_html(template, view);  

 

template 是一串带有mustache专属标签的字符串，html是通过模板引擎转化后输出的字符串（这里的输出结果是：Joe spends 6），view就是想要输出的模版的一些属性。

 

接下来讲一个比较通用的例子：

XML/HTML代码
  1. <h1>{{header}}</h1>  
  2. {{#bug}}  
  3. {{/bug}}  
  4.   
  5. {{#items}}  
  6.   {{#first}}  
  7.     <li><strong>{{name}}</strong></li>  
  8.   {{/first}}  
  9.   {{#link}}  
  10.     <li><a href="{{url}}">{{name}}</a></li>  
  11.   {{/link}}  
  12. {{/items}}  
  13.   
  14. {{#empty}}  
  15.   <p>The list is empty.</p>  
  16. {{/empty}}  
JavaScript代码
  1. {  
  2.   "header": "Colors",  
  3.   "items": [  
  4.       {"name": "red", "first": true, "url": "#Red"},  
  5.       {"name": "green", "link": true, "url": "#Green"},  
  6.       {"name": "blue", "link": true, "url": "#Blue"}  
  7.   ],  
  8.   "empty": false  
  9. }  

输出的结果：

XML/HTML代码
  1. <h1>Colors</h1>  
  2. <li><strong>red</strong></li>  
  3. <li><a href="#Green">green</a></li>  
  4. <li><a href="#Blue">blue</a></li>  

 

           查看演示demo

 

]]> http://www.rainweb.cn/article/7-new-techniques-every-web-developer-should-know.html <![CDATA[Web 开发者需要了解的七项新技术]]> Rainweb@163.com(rainweb) Wed,21 Sep 2011 13:35:27 +0800 http://www.rainweb.cn/default.asp?id=335 Web 开发者需要经常更新他们的知识，学习新的技术，如果他们还想继续在 Web 开发领域混并混得还不错的话。下面将为你展示 7 项新的Web开发技术，作为一个Web开发人员，你需要了解、熟悉并学会的技术。

CSS3 media queries

目前，大量的智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对Web开发带来了前所未有的挑战，如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的 CSS 样式。

例如，下面的代码只在屏幕显示区域大小为 767px 的时候才有效：

CSS代码
  1. @media screen and (max-width:767px){  
  2.     #container{  
  3.         width:320px;  
  4.     }   
  5.   
  6.     header h1#logo a{  
  7.         width:320px;  
  8.         height:44px;  
  9.         background:url(image-small.jpg) no-repeat 0 0;  
  10.     }                             
  11.   
  12. }  

 

更详细的信息请阅读: Create an adaptable website layout with CSS3 media queries

Font resizing with REMs

CSS3 引入新的字体尺寸单位 rem (root rm)

em 单位是相对于父节点的 font-size ，会有一些组合的问题，而 rem 是相对于根节点（或者是 html 节点），意思就是说你可以在 html 节点定义一个单独的字体大小，然后所有其他元素使用 rem 相对于这个字体的百分比进行设置。

CSS代码
  1. html { font-size: 62.5%; }  
  2. body { font-size: 1.4rem; } /* =14px */  
  3. h1   { font-size: 2.4rem; } /* =24px */  

更多关于 rem 的内容请看: Font resizing with REMs

Cache pages for offline usage

HTML5 引入了一个强大的特性：离线缓存。该特性可让你告诉浏览器缓存某些页面，使得用户可以在离线的情况下再次访问该页面。

要缓存页面非常简单，首先在你网站的 .htaccess 文件中添加如下一行：

AddType text/cache-manifest .manifest

然后你可创建一个文件如 offline.manifest ，包含如下内容：

CACHE MANIFEST

CACHE
index.html
style.css
image.jpg

最后，在 html 节点中增加：

<html manifest="/offline.manifest">

就这么多。
详情阅读: How to create offline HTML5 web apps in 5 easy steps

Server-side JavaScript

JavaScript 现在已经是非常流行的Web客户端编程语言了，但JavaScript也越来越多的出现在服务器端了，通过强大的 JavaScript 服务器端环境：Jaxer, Node.js and Narwhal.

下面代码显示如何用 Node.js 创建一个简单的 Hello World 程序

var sys = require("sys");
sys.puts("Hello World!");

更详细内容请阅读: Learning Server-Side JavaScript with Node.js

HTML5 drag & drop

HTML5 让网页上的拖放变得非常简单，我们只需要简单的定义 draggable="true" 属性即可，如下所示：

XML/HTML代码
  1. <div id="columns">  
  2.   <div class="column" draggable="true"><header>A</header></div>  
  3.   <div class="column" draggable="true"><header>B</header></div>  
  4.   <div class="column" draggable="true"><header>C</header></div>  
  5. </div>  

有了这些 draggable=true 的元素，我们只需要编写一些简单的 JavaScript 代码来处理拖放，这里不再详细描述处理过程，如果你感兴趣，可以阅读这里。

提示：如果你希望阻止可拖放元素被选中，可使用以下 CSS 规则：

CSS代码
  1. [draggable] {  
  2.   -moz-user-select: none;  
  3.   -khtml-user-select: none;  
  4.   -webkit-user-select: none;  
  5.   user-select: none;  
  6. }  

More info: Cross Browser HTML5 Drag and Drop

Forms, the HTML5 way

HTML5 规范在表单定义方面引入很多新特性，包含很多新的表单组件，例如日期选择、数字调整、使用正则表达式对输入框进行验证等等（email、tel、link）

下面代码显示了一些新的表单元素：

XML/HTML代码
  1. <form>  
  2.     <label for="range-slider">Slider</label>  
  3.     <input type="range" name="range-slider" id="range-slider" class="slider" min="0" max="20" step="1" value="0">  
  4.   
  5.     <label for="numeric-spinner">Numeric spinner</label>  
  6.     <input type="number" name="numeric-spinner" id="numeric-spinner" value="2">  
  7.   
  8.     <label for="date-picker">Date picker</label>  
  9.     <input type="date" name="date-picker" id="date-picker" value="2010-10-06">  
  10.   
  11.     <label for="color-picker">Color picker</label>  
  12.     <input type="color" name="color-picker" id="color-picker" value="ff0000">  
  13.   
  14.     <label for="text-field">Text field with placeholder</label>  
  15.     <input type="text" name="text-field" id="text-field" placeholder="Insert your text here">  
  16.   
  17.     <label for="url-field">Url field</label>  
  18.     <input type="url" id="url-field" name="url-field" placeholder="http://net.tutsplus.com/" required>  
  19.   
  20.     <label for="email-field">Email field</label>  
  21.     <input type="email" id="email-field" name="email-field" placeholder="contact@ghinda.net" required>  
  22.   
  23.     <button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">  
  24.     <span class="ui-button-text">Submit form</span>  
  25.     </button>  
  26. </form>  

More info: How to Build Cross-Browser HTML5 Forms

CSS animations

很多现在的浏览器都支持 CSS 动画，是的，CSS 已经允许你创建一些简单的动画，而无需 JavaScript 的支持。

下面代码显示如何让背景色改变：

CSS代码
  1. #logo {  
  2.     margin: 15px 15px 0 15px;  
  3.     background: red;  
  4.     float: left;  
  5.   
  6.     /* Firefox 4+ */  
  7.     -moz-animation-name: colour-change;  
  8.     -moz-animation-timing-function: linear;  
  9.     -moz-animation-iteration-count: infinite;  
  10.     -moz-animation-duration: 30s;  
  11.   
  12.     /* Webkit */  
  13.     -webkit-animation-name: colour-change;  
  14.     -webkit-animation-timing-function: linear;  
  15.     -webkit-animation-iteration-count: infinite;  
  16.     -webkit-animation-duration: 30s;  
  17. }  
  18.   
  19. @-moz-keyframes colour-change {  
  20.     0% {  
  21.         background: red;  
  22.     }  
  23.     33% {  
  24.         background: green;  
  25.     }  
  26.     66% {  
  27.         background: blue;  
  28.     }  
  29. }  
  30.   
  31. @-webkit-keyframes colour-change {  
  32.     0% {  
  33.         background: red;  
  34.     }  
  35.     33% {  
  36.         background: green;  
  37.     }  
  38.     66% {  
  39.         background: blue;  
  40.     }  
  41. }  

原文地址：http://www.oschina.net/news/21533/7-new-techniques-every-web-developer-should-know

]]> http://www.rainweb.cn/article/jQuery-live-die.html <![CDATA[jQuery中的die()与live()]]> Rainweb@163.com(rainweb) Mon,19 Sep 2011 13:50:57 +0800 http://www.rainweb.cn/default.asp?id=334

原文地址：http://www.alfajango.com/blog/exploring-jquery-live-and-die/

作者和大多数的开发人员都知道jQuery的.live()函数，知道它是做什么用的，但是不知道它是怎么样工作的，使用起来也不得心应手，甚至也没听说过.die()(去掉bind事件)。即使你能熟悉这些，但你能意识到.die() 的问题所在吗？

什么是 .live()？

函数的.live()类似.bind(),除此之外,它允许你绑定事件DOM元素现在和动态生成出来的dom节点,你可以绑定的事件不存在的元素。

比方说当用户在点击链接时及想提示他们正在离开站点。

JavaScript代码
  1. $(document).ready( function() {  
  2.     $('a').click( function() {  
  3.         alert("You are now leaving this site");  
  4.         return true;  
  5.     });  
  6. });  

注意，.click()仅仅是个实现更一般.bind()的简单方法，下面和上面的代码相当于上面的实现。

JavaScript代码
  1. $(document).ready( function() {    
  2.     $('a').bind( 'click', function() {    
  3.         alert("You are now leaving this site");    
  4.         return true;    
  5.     });    
  6. });   

 

现在通过javascript添加一个链接到页面：

JavaScript代码
  1. $('body').append('<div><a href="#">Check it out!</a></div>');  

 

这时候当用户点击链接时，你的click()函数是没有被绑定的，因为当你绑定事件的时候，这个链接的dom元素还不存在，这时候你需要.live()

JavaScript代码
  1. $(document).ready( function() {  
  2.     $('a').live( 'click', function() {  
  3.         alert("You are now leaving this site");  
  4.         return true;  
  5.     });  
  6. });  

这样，你在链接上绑定的事件可以正常工作了。

.live() 如何工作的？

.live()犀利的地方就是它不是讲你的事件绑在你选择的element元素上面，而是将事件绑定在dom树的根节点上面（例子中是$(document)），通过在你的元素选择器作为一个参数。

当你点击一个元素时，click事件就会在DOM树上往上传递，直至到达根节点。这个.click()事件的触发器已经在根节点 被.live()创建。这个触发方法将首先检测被点击的目标看是否和.live()调用的选择器相匹配。所以上面的例子中，会检查点击的元素是否 和$('a').live()中的$('a')相匹配，如果匹配，那么绑定的方法就会执行了。

因为不管你在根节点内点击了什么，根节点的.click()事件都会被触发，当你点击加入到根节点的任何元素时这个检查都会发生。

所有.live() 都可以.die()

如果你知道.bind()，那么你肯定知道.unbind()。那么.die()和.live()就是类似的关系了。为了接触上面的绑定（不希望用户点击链接时弹出对话框），我们这么做：

JavaScript代码
  1.     $('a').die();  
  2.   
  3. //更具体点，如果还有其他的事件被绑定且需要保留，例如hover或其他，可以只解除click事件绑定。  
  4.     $('a').die('click');  
  5.   
  6. //再具体些，如果已经定义了方法名，可以解除绑定指定的方法。  
  7.     specialAlert = function() {  
  8.         alert("You are now leaving this site");  
  9.         return true;  
  10.     }  
  11.        
  12.     $(document).ready( function() {  
  13.         $('a').live( 'click', specialAlert );  
  14.         $('a').live( 'click', someOtherFunction );  
  15.     });  
  16.     
  17.   // then somewhere else, we could unbind only the first binding  
  18.   $('a').die( 'click', specialAlert );  

关于 .die()的问题

使用这些函数时，.die()方法会有一个缺点。只可以使用.live()方法中用到的元素选择器，例如，不可以像下面这样写：

JavaScript代码
  1. $(document).ready( function() {  
  2.    $('a').live( 'click', function() {  
  3.      alert("You are now leaving this site");  
  4.      return true;  
  5.    });  
  6.  });  
  7.    
  8. // it would be nice if we could then choose specific elements  
  9.  //   to unbind, but this will do nothing  
  10.  $('a.no-alert').die();  

.die()事件看起来好像是匹配到了目标选择权并解除了.live()的绑定，但事实上，$('a.no-alert')并不存在绑定，所以jquery找不到任何绑定去去掉，就不会起作用了。

更糟的是下面这个:

JavaScript代码
  1. $(document).ready( function() {  
  2.      $('a,form').live( 'click', function() {  
  3.          alert("You are going to a different page");  
  4.          return true;  
  5.     });  
  6. });  
  7.   
  8. // NEITHER of these will work  
  9. $('a').die();  
  10. $('form').die();  
  11.   
  12. // ONLY this will work  
  13. $('a,form').die();  

如何修复 .die()

在我下篇文章中，我将会建议一种.die()执行的新方法，它可以提供一个向后兼容的语气的行为。或许我有时间的话会去建议jQuery核心开发团 队在下一个release中接受我的建议并进行修改，希望多一点我刚写的这些方法，包括可选的context参数，允许自定义事件附加的节点，而不是根节 点。

如果想得到更多的信息和例子，可以查查jQuery .live() and .die().的文档

同时注意下 .delegate() 和.undelegate()，他们可以替代.live()和.die()，它们联系很紧密。

相关文章：jQuery中的bind()、.live()、.delegate()

]]> http://www.rainweb.cn/article/mouse-selection-weibo.html <![CDATA[鼠标选中的文字分享到微博]]> Rainweb@163.com(rainweb) Wed,14 Sep 2011 11:12:13 +0800 http://www.rainweb.cn/default.asp?id=333 腾讯新闻、新浪新闻有一个常见功能，就是当鼠标选中一段文字时会浮现一个小图片，点击这个图片可以把选中内容发送到微博，原理很简单，先获得鼠标选 中文字，然后调用博客中提供的页面，把文字作为参数传过去就OK了。【有个小问题就是，选中的文字有特殊字符会报错，需要过滤一下】

分三步走：

1、文字的选中

区分document.selection和window.getSelection();

document.selection只有IE支持，而对于window.getSelection()，查了一些资料：FireFox和  Safari支持，都不是标准语法，但我在 opera与chrom里都测试通过。原来网上的好多也不靠谱，自己测试才是王道。

其中selection 对象代表了当前激活选中区，即高亮文本块，或文档中用户可执行某些操作的其它元素。selection   对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。

监听实现文字选中代码：

JavaScript代码
  1. if (document.selection) {  
  2.      r = document.selection.createRange().text;  
  3. }  
  4. else if (window.getSelection()) {  
  5.      r = window.getSelection();  
  6. }  

 

2、tip显示

对于tip的显示不做多解释，这没什么可说的，即鼠标选中后弹出tip提示

JavaScript代码
  1. var bowen = "发送到新浪微博";  
  2. var tooltip = "<div id='tooltip' class='tooltip'><span onclick=ask('"+r+"')>" + bowen + "</span></div>";  
  3. $("body").append(tooltip);  
  4. $("#tooltip").css({  
  5.     "top": (e.pageY + y) + "px",  
  6.     "left": (e.pageX + x) + "px",  
  7.     "position": "absolute"  
  8. }).show("fast").mouseout(function(){  
  9.          $(this).remove();  
  10. });  
CSS代码
  1.      .tooltip  
  2.      {  
  3.          width:120px;  
  4.          height:23px;  
  5.          line-height:23px;  
  6.          background-color:#CCCCCC;  
  7. cursor:pointer;  
  8.      }  
  9.      .tooltip span  
  10.      {  
  11.          color: #333333;  
  12.          display: block;  
  13.          font-size: 12px;  
  14.          font-weight: bold;  
  15.          text-indent: 10px;  
  16.      }  

 

3、选中的文字作为参数提交给微博提供的接口

这里以新浪微博做例子：

XML/HTML代码
  1. function ask(r) {  
  2.         r=r.replace(/\s/g,"");  
  3.         r=r.replace(/\n/g,"");  
  4.            if (r != "") {  
  5.                window.location.href="http://v.t.sina.com.cn/share/share.php?searchPic=false&title="+r+"&url=http://www.rainweb.cn";  
  6.            }  
  7.        }  

 

查看实例

你好你好你好你好你好你好你好你好【选中我测试】【选中我测试】【选中我测试】【选中我测试】。

 

]]> http://www.rainweb.cn/article/ie6-position-fixed.html <![CDATA[IE6纯CSS实现position:fixed方案]]> Rainweb@163.com(rainweb) Thu,08 Sep 2011 10:53:28 +0800 http://www.rainweb.cn/default.asp?id=332  原文地址：http://www.hujuntao.com/archives/ie6-position-fixed.html

CSS实现固定浮动层效果，类似于QQ空间顶部的工具条。标准浏览器、IE7+只需在CSS里面设置position:fixed;top:0;就可以了。不论你怎么滚动页面，工具条都会固定在头部。那么IE6怎么实现呢？
众所周知IE6 position不支持fixed属性，下面介绍两种纯CSS模拟实现position:fixed效果。

第一种：HTML、BODY高度100%方案

CSS代码
  1. * html {  
  2.     overflow-y: hidden;  
  3. }/*只是定制垂直滚动fixed*/  
  4. * html body {  
  5.     overflow-y: auto;  
  6.     height: 100%;  
  7. }  
  8. * html #fixedbox { /*把要固定的元素position设置为absolute */  
  9.     position: absolute;  
  10. }  
  11. #fixedbox {  
  12.     position:fixed;   
  13.     width:100px;   
  14.     height:100px;  
  15.     background:#000000;  
  16.     color:#FFFFFF;  
  17. }  

第二种：CSS表达式(expression)方案

CSS代码
  1. body {  
  2.    _background-image:url(about:blank);  
  3.    _background-attachment:fixed;/*防止页面抖动*/  
  4. }  
  5. .fixed {  
  6.    position:fixed;  
  7.    _position: absolute; /*ie6 and above*/  
  8.    top: 0;  
  9.    _top:expression(documentElement.scrollTop);  
  10.    left: 0;  
  11. }  

 

]]>