Hiro技术站 » 前端工程 http://www.ihiro.org Fri, 06 Jan 2012 07:58:05 +0000 en hourly 1 http://wordpress.org/?v=3.3 XSLT:通过间隔符获取英文名的First Name和Last Name http://www.ihiro.org/xslt-get-the-first-last-name http://www.ihiro.org/xslt-get-the-first-last-name#comments Fri, 06 Jan 2012 07:51:55 +0000 Hiro http://www.ihiro.org/?p=1727

本文是工作中关于XSLT和XML一个小实例的分享。

需求：XML抛出数据字段username,如Hiro xxx Zhang,需要通过XSLT获得First Name和Last Name，并填入到对应Form表单的字段中。

就XSLT来说，没有像JS中indexOf和lastIndexOf方法，所以不能够通过定位“空格”位置的方法去实现。唯一的方法只能通过“空格”反复去截取，知道剩下的字符串中没有空格。

First Name通过截取第一个“空格”前的所有字符串：substring-before($name, ' ')。

Lsat Name则通过递归的方法，方法截取“空格”后面的字符串，直到最后只剩下一个不含空格的字符串即可：xsl:template name="lastName"。

]]> 本文是工作中关于XSLT和XML一个小实例的分享。

需求：XML抛出数据字段username,如Hiro xxx Zhang,需要通过XSLT获得First Name和Last Name，并填入到对应Form表单的字段中。

就XSLT来说，没有像JS中indexOf和lastIndexOf方法，所以不能够通过定位“空格”位置的方法去实现。唯一的方法只能通过“空格”反复去截取，知道剩下的字符串中没有空格。

1. XML数据：

1
2

< ?xml version="1.0" encoding="UTF-8" ?>
<name>Hiro ODC Zhang</name>

2. XSLT代码：

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

< ?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" version="1.0" omit-xml-declaration="yes"/>
 
    <xsl:template match="/">
        <xsl:variable name="name"><xsl:value -of select="name"/></xsl:variable>
        <xsl:variable name="firstName"><xsl:value -of select="substring-before($name, ' ')"/></xsl:variable>
 
        <xsl:variable name="lastName">
            <xsl:call -template name="lastName">
                <xsl:with -param name="name"><xsl:value -of select="$name"/></xsl:with>
            </xsl:call>
        </xsl:variable>
 
        First Name: <xsl:value -of select="$firstName"/><br />
        Last Name: <xsl:value -of select="$lastName"/>
    </xsl:template>
 
    <xsl:template name="lastName">
        <xsl:param name="name"/>
 
        <xsl:choose>
            <xsl:when test="contains($name, ' ')">
                <xsl:call -template name="lastName">
                    <xsl:with -param name="name"><xsl:value -of select="substring-after($name, ' ')"/></xsl:with>
                </xsl:call>
            </xsl:when>
            <xsl:otherwise>
                <xsl:value -of select="$name"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>
 
</xsl:stylesheet>

First Name通过截取第一个“空格”前的所有字符串：substring-before($name, ‘ ‘)。

Lsat Name则通过递归的方法，方法截取“空格”后面的字符串，直到最后只剩下一个不含空格的字符串即可：xsl:template name=”lastName”。

下载XSLT代码文件

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/xslt-get-the-first-last-name/feed 3 CSS3:Transition属性详解 http://www.ihiro.org/css3-transition http://www.ihiro.org/css3-transition#comments Wed, 20 Apr 2011 06:40:44 +0000 Hiro http://www.ihiro.org/?p=1656

因博客服务器瘫痪，上周的所有数据丢失。该文为恢复后补发。

暂时不做HTML5读书笔记的更新，下一篇再继续。临时性地插入CSS3新属性的详细介绍，以便可以和HTML5的知识结合起来合理应用，这样达到两者配合。

Transition属性主要是用来对某个CSS属性的变化过程进行控制，官方的介绍是”CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.“。而我个人则简单地理解为”在某个时间段内，平滑地改变某个CSS属性。“。

Transition又包含了四个子属性，分别为property、duration、timing-function、delay。下面来一一介绍，在最后会给出一个简单的实例和使用方法说明。

]]> 因博客服务器瘫痪，上周的所有数据丢失。该文为恢复后补发。

暂时不做HTML5读书笔记的更新，下一篇再继续。临时性地插入CSS3新属性的详细介绍，以便可以和HTML5的知识结合起来合理应用，这样达到两者配合。

Transition属性主要是用来对某个CSS属性的变化过程进行控制，官方的介绍是”CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.“。而我个人则简单地理解为”在某个时间段内，平滑地改变某个CSS属性。“。

Transition又包含了四个子属性，分别为property、duration、timing-function、delay。下面来一一介绍，在最后会给出一个简单的实例和使用方法说明。

1. transition-property:

property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时，则设置property值为background。

2. transition-duration:

duration针对了过渡效果的持续时间。

3. transition-timing-function:

timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效，有多种特效展示。这里得涉及到一个学术性的话题：貝茲曲線。说实话，我也没搞的太明白，但W3C给出了一张曲线图，一看就明白了（后附图）。

介绍下预留的几个特效：
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]
其中的cubic-bezier即为貝茲曲線中的绘制方法。先来看图：图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。

参考阅读：
W3C: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
貝茲曲線：http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A

4. transition-delay:

duration针对了过渡效果的延迟执行时间。

5. 代码演示：

1). 过渡单个属性：
1
2
3
4

transition-property:opacity;
transition-duration:2s;
transition-timing-function:ease-in;
transition-delay:0;
2). 过渡多个属性：
[1]. 上下一一对应型：
1
2
3
4

transition-property:opacity left;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;

此时：opacity过渡时间为2s，left过渡时间为4s。

[2]. 循环对应型：
1
2
3
4

transition-property:opacity left width height;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;

此时：opacity和width过渡时间为2s，left和height过渡时间为4s。

3). transition简写模式：
顺序为：transition-property transition-duration transition-timing-function transition-delay

1
2
3
4

/*单个属性：*/
-moz-transition:background 0.5s ease-out 0s;
/*多个属性：*/
-moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;

6. 实例展示：

请用火狐打开，暂没添加其他浏览器支持。有兴趣的可以到Demo页面，下了源代码自行添加后测试。也可以查看我的头部导航，也用到了Transition的效果。

Demo

HTML代码：

1

<a href="http://www.ihiro.org/" target="_blank">ihiro.org</a>
CSS代码：

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

<a href="http://www.ihiro.org/" target="_blank">ihiro.org</a>
a { display:block; width:160px; height:30px; line-height:30px; text-align:center; padding:10px; background:#33589f; color:#fff; text-decoration:none; text-transform:uppercase;
    /*只有当鼠标移出后才处理*/
    -moz-transition:background 0.2s linear 0s;
}
 
a:hover { background:#263c7b; color:#f60;
    text-shadow:2px 2px 10px #f00;
    /* 只有当鼠标移入时才处理
       注：若a:hover中不写transition,则会继承a中的transition */
    /*
    1. 单个属性
        -moz-transition:background 0.5s ease-out 0s;
    2. 多个属性：
       -moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;
    */
    -moz-transition:background 0.5s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
}

更多的Transition相关请阅读：http://www.w3.org/TR/css3-transitions/

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/css3-transition/feed 82 HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas http://www.ihiro.org/html5-reading-note-chp4-canvas http://www.ihiro.org/html5-reading-note-chp4-canvas#comments Fri, 01 Apr 2011 06:11:03 +0000 Hiro http://www.ihiro.org/?p=1648

《HTML5》的第四章节主要是对Canvas标签的属性以及相应的API进行了介绍，给出实例，这样学习起来就更加地容易和生动。

今天是愚人节，特意选择今天更新一篇博文。倒不是因为文章的内容和愚人节有什么关系，只是做个纪念。同时也是纪念一下哥哥（张国荣）去世8周年。

给出五个简单的实例，通过这些实例可以对Canvas的API有一个简要的认识和了解。在代码中也附加了注释，这样可以清楚地了解该行代码的含义。

]]> 《HTML5》的第四章节主要是对Canvas标签的属性以及相应的API进行了介绍，给出实例，这样学习起来就更加地容易和生动。

今天是愚人节，特意选择今天更新一篇博文。倒不是因为文章的内容和愚人节有什么关系，只是做个纪念。同时也是纪念一下哥哥（张国荣）去世8周年。

给出五个简单的实例，通过这些实例可以对Canvas的API有一个简要的认识和了解。在代码中也附加了注释，这样可以清楚地了解该行代码的含义。

一、绘制矩形：

查看效果：1.drawRect.html

1
2
3
4
5
6
7
8
9
10
11

var rect = document.getElementById('rect').getContext('2d');
 
//画一个80x80的正方形
rect.fillStyle = '#eee';
rect.fillRect(10, 10, 90, 90);
//在80x80的正方形中间截去一个50x50的正方形
rect.clearRect(20, 20, 70, 70);
 
//画一个空心的80x80的正方形
rect.strokeStyle = '#ccc';
rect.strokeRect(100.5, 100.5, 180, 180);    //.5 for line width(two side), 2x0.5=1px

二、绘制线条：

查看效果：2.drawLine.html

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

var line = document.getElementById('line').getContext('2d');
//画一条垂直线
line.moveTo(20, 20);
line.lineTo(20, 100);
 
//画一条斜角线
line.lineTo(80, 50);
 
//再一条斜角线闭合三角形
line.lineTo(20, 20);
 
//给三角形边线着色
line.strokeStyle = '#f00';
line.stroke();

三、绘制文本：

查看效果：3.drawText.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
35
36
37
38
39
40
41
42

var context = document.getElementById('text').getContext('2d');
context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);   //预留20px的空白
context.moveTo(260, 40);
context.lineTo(500, 40);
//画右上的箭头
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);
 
context.moveTo(60, 0);
context.lineTo(60, 153);    //预留20px的空白
context.moveTo(60, 173);
context.lineTo(60, 375);
//画左下的箭头
context.moveTo(65, 370);
context.lineTo(60, 375);
context.lineTo(55, 370);
 
//着色
context.strokeStyle = "#000";
context.stroke();
 
context.font = "bold 12px sans-serif";
//标注X坐标文字
context.fillText("x", 248, 43);
//标注Y坐标文字
context.fillText("y", 58, 165);
 
context.textBaseline = "top";
//标注起始坐标文字
context.fillText("(0, 0)", 4, 4);
//画左上角的标识点
context.fillRect(0, 0, 2, 2);
 
context.textAlign = "right";
context.textBaseline = "bottom";
//标注结束坐标文字
context.fillText("(500, 375)", 492, 370);
//画右下角的标识点
context.fillRect(494, 372, 2, 2);

四、绘制渐变：

查看效果：4.drawGradients.html

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

var context = document.getElementById('gradients').getContext('2d');
 
//创建一个宽300px的线性渐变， 决定了渐变方向，仅x1为横向， 仅x2为纵向， 两者都有为对角线渐变
var my_gradients = context.createLinearGradient(0, 0, 300, 225);
//起始色：黑色
my_gradients.addColorStop(0, 'black');
//终止色： 白色
my_gradients.addColorStop(1, 'white');
//设置填充色
context.fillStyle = my_gradients;
//画300x225尺寸的线性渐变矩形
context.fillRect(0, 0, 300, 225);

五、绘制图片：

查看效果：5.drawImage.html

1
2
3
4
5
6
7
8
9
10

window.onload = function() {
    var context = document.getElementById('image').getContext('2d');
    var cat = document.getElementById('cat');
    //坐标5, 5处绘入 - 源图
    context.drawImage(cat, 5, 5);
    //坐标100, 100处绘入 - 源图缩放成80x60尺寸
    context.drawImage(cat, 120, 120, 80, 60);
    //坐标200, 200处绘入 - 源图从10,10处取160x100尺寸，缩放到80x50尺寸
    context.drawImage(cat, 10, 10, 160, 100, 200, 200, 80, 50);
}

下载本篇文章的代码压缩包：CHP4.Canvas.zip

附加信息：

开源代码，兼容主流浏览器，IE下都是通过VML实现兼容：
Google Code Canvas库：http://code.google.com/p/explorercanvas/
jQuery Maphilight 插件：http://davidlynch.org/js/maphilight/docs/

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/html5-reading-note-chp4-canvas/feed 22 HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements http://www.ihiro.org/html5-reading-note-chp3-elements http://www.ihiro.org/html5-reading-note-chp3-elements#comments Mon, 21 Mar 2011 06:17:59 +0000 Hiro http://www.ihiro.org/?p=1634

即上篇的特性章节之后，继续更新我的HTML5读书笔记。本篇主要记录一些标签方面的更新注意事项。一些普通的header、nav、article等标签的用法网上是一大堆，我只是把我觉得这方面重要的内容或者不容易记住的内容做了一个备份。

这些新的HTML5标签在IE8及以下版本中都不能支持，这就需要在页面加载之前使用JS动态地创建HTML5新标签，以实现页面的正确的渲染。当然这样处理并不是万能的，在处理一些AJAX交互时，就会出现返回的HTML5标签无法正确解析的问题。此时就需要HTML5 innerShiv来解决了。

]]> 即上篇的特性章节之后，继续更新我的HTML5读书笔记。本篇主要记录一些标签方面的更新注意事项。一些普通的header、nav、article等标签的用法网上是一大堆，我只是把我觉得这方面重要的内容或者不容易记住的内容做了一个备份。

这些新的HTML5标签在IE8及以下版本中都不能支持，这就需要在页面加载之前使用JS动态地创建HTML5新标签，以实现页面的正确的渲染。当然这样处理并不是万能的，在处理一些AJAX交互时，就会出现返回的HTML5标签无法正确解析的问题。此时就需要HTML5 innerShiv来解决了。

1. Doctype:

1

< !DOCTYPE html>

无需再去添加XHTML的框架型、过渡性或者严谨型的声明。

2. HTML

1
2

<html lang="en">
</html>

无需再添加xmlns属性来约束标签的命名空间了。

3. HEAD:

1).meta:
1

<meta charset="utf-8" />
2).link:
2.1).rel=”stylesheet”
1

<link rel="stylesheet" href="style-original.css" />
2.2).rel=”alertnate” //用在订阅
1

<link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" />
2.3).rel=”icon”
1

<link rel="shortcut icon" href="/favicon.ico"></link>

4. How to style unknown elements in IE:

1
2
3
4
5
6
7
8
9
10

     <!--[if lt IE 9]>
          <script type="text/javascript">
               var e = ("abbr,article,aside,audio,canvas,datalist,details," +
                         "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
                         "progress,section,time,video").split(',');
               for (var i = 0; i < e.length; i++) {
                    document.createElement(e[i]);
               }
          </script>
     < ![endif]--></script>

OR:

1
2
3

     <!--[if lt IE 9]>
          <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     < ![endif]-->

5. The HTML5 algorithm says that an <article> element creates a new section, that is, a new node in the document outline. And in HTML5, each section can have its own <h1> element.

6. Time and Date:

1

<time datetime="2009-10-22" pubdate="pubdate">October 22, 2009</time>

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/html5-reading-note-chp3-elements/feed 24 HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features http://www.ihiro.org/html5-reading-note-chp2-features http://www.ihiro.org/html5-reading-note-chp2-features#comments Tue, 15 Mar 2011 02:55:31 +0000 Hiro http://www.ihiro.org/?p=1626

HTML5最近确实很火，逼的我不得不继续自学下去。去年年底的时候看了一些《Pro HTML5》的章节。因为过年，后来就断掉了。除了一些练习的代码外，没留下什么笔记。

年后没多久我就开始看起了《HTML5. Up and Running》这本书，中文版《HTML5揭秘》已经上市。我到今天也看到了第六章。摘取了一些扼要的东西，做了一些简单的笔记，以便以后的翻查。Everbox这个时候就发挥到了作用，让我随时随地想翻的时候都可以翻一翻。

这篇文章只是开篇，后面会陆续有些我自己的笔记分享，很简单的文字。

]]> HTML5最近确实很火，逼的我不得不继续自学下去。去年年底的时候看了一些《Pro HTML5》的章节。因为过年，后来就断掉了。除了一些练习的代码外，没留下什么笔记。

年后没多久我就开始看起了《HTML5. Up and Running》这本书，中文版《HTML5揭秘》已经上市。我到今天也看到了第六章。摘取了一些扼要的东西，做了一些简单的笔记，以便以后的翻查。Everbox这个时候就发挥到了作用，让我随时随地想翻的时候都可以翻一翻。

这篇文章只是开篇，后面会陆续有些我自己的笔记分享，很简单的文字。

本文介绍的是HTML5特性判断：

1. Canvas:

1

!!document.createElement('canvas').getContext;

2. Video:

1

!!document.createElement('video').canPlayType;

Video Formats:

1
2

var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

3. Local Storage: 

1

return ('localStorage' in window) && window['localStorage'] !== null;

4. Web Workers:

1

!!window.Worker;

5. Offline Web Applications:

1

!!window.applicationCache;

6. Geolocation:

1

!!navigator.geolocation;

7. From:

Input:

1
2
3

var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";

Placeholder Text:

1
2

var i = document.createElement('input');
return 'placeholder' in i;

Form Autofocus:

1
2

var i = document.createElement('input');
return 'autofocus' in i;

8. Microdata:

1

return !!document.getItems;

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/html5-reading-note-chp2-features/feed 23 Javascript:根据指定日期获得星期数 http://www.ihiro.org/javascript-getweek-by-date http://www.ihiro.org/javascript-getweek-by-date#comments Thu, 30 Dec 2010 08:06:25 +0000 Hiro http://www.ihiro.org/?p=1583

今天在写一个简单的日历程序，写着写着发现没办法把日期和头部的星期数对应起来，便通过Google搜索到了这个叫做“蔡勒（Zeller）公式”。根据这个公式写了个方法，发现还是蛮管用的。

不过就这个格式描述（见内页）来说少讲了一点，就是计算出来的结果若为负数的话，就需要再加上7，这样得出来的结果才是正确的。

当然这个公式不仅仅适合与JS,其他语言也可以写出来。原理一致...

]]> 今天在写一个简单的日历程序，写着写着发现没办法把日期和头部的星期数对应起来，便通过Google搜索到了这个叫做“蔡勒（Zeller）公式”。根据这个公式写了个方法，发现还是蛮管用的。

蔡勒（Zeller）公式：w=y+[y/4]+[c/4]-2c+[26(m+1)/10]+d-1

公式中的符号含义如下，w：星期；c：世纪-1；y：年（两位数）；m：月（m 大于等于3，小于等于14，即在蔡勒公式中，某年的1、2月要看作上一年的13、14月来计算，比如2003年1月1日要看作2002年的13月1日来计算）；d：日；[ ]代表取整，即只要整数部分。(C是世纪数减一，y是年份后两位，M是月份，d是日数。1月和2月要按上一年的13月和 14月来算，这时C和y均按上一年取值。)

算出来的W除以7，余数是几就是星期几。如果余数是0，则为星期日。

以2049年10月1日（100周年国庆）为例，用蔡勒（Zeller）公式进行计算，过程如下：
蔡勒（Zeller）公式：w=y+[y/4]+[c/4]-2c+[26(m+1)/10]+d-1
=49+[49/4]+[20/4]-2×20+[26× (10+1)/10]+1-1
=49+[12.25]+5-40+[28.6]
=49+12+5-40+28
=54 (除以7余5)
即2049年10月1日（100周年国庆）是星期5。

摘自：http://www.cnblogs.com/chingho/archive/2010/03/26/1697282.html

不过就这个格式描述来说少讲了一点，就是计算出来的结果若为负数的话，就需要再加上7，这样得出来的结果才是正确的。

当然这个公式不仅仅适合与JS,其他语言也可以写出来。原理一致…

download demo

公式计算代码：

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

/*
 * 	获得指定日期的星期数，1-6为星期一到星期六，0为星期天
 *	@y 年份
 *	@m 月份
 *	@d 日
 */
function getWeek(y, m, d) {
	var _int = parseInt,
		c = _int(y/100);
	y = y.toString().substring(2, 4);
	y = _int(y, 10);
	if(m === 1) {
		m = 13;
		y--;
	} else if(m === 2) {
		m = 14;
		y--;
	};
 
	var w = y + _int(y/4) + _int(c/4) - 2*c + _int(26*(m+1)/10) + d - 1;
	w = w%7;
 
	return w >= 0 ? w : w+7;
}

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/javascript-getweek-by-date/feed 23 CSS:position属性定位总结 http://www.ihiro.org/css-position-hack http://www.ihiro.org/css-position-hack#comments Thu, 25 Nov 2010 03:37:42 +0000 Hiro http://www.ihiro.org/?p=1568

在写这篇文章之前，我一直以为css中position定位时一直是读取最后出现两个方位属性的值。昨天给一同事演示jQuery的animate特效时，我试图通过js来控制已经设置过top和left的DIV的right属性为0，以达到滑动到最右边的效果。结果没有效果，很是郁闷。

早上写了一些关于postion的样式做测试，发现不论给某个DIV设置了多少个方位（当然最多到4个），也不管存放的顺序是如何颠倒，它的读取顺序依旧是top-bottom-left-right.很符合日常所说的“上下左右”规则。这与我之前理解的不相符合。

]]> 在写这篇文章之前，我一直以为css中position定位时一直是读取最后出现两个方位属性的值。昨天给一同事演示jQuery的animate特效时，我试图通过js来控制已经设置过top和left的DIV的right属性为0，以达到滑动到最右边的效果。结果没有效果，很是郁闷。

早上写了一些关于postion的样式做测试，发现不论给某个DIV设置了多少个方位（当然最多到4个），也不管存放的顺序是如何颠倒，它的读取顺序依旧是top-bottom-left-right.很符合日常所说的“上下左右”规则。这与我之前理解的不相符合。

另外我们也知道给一个标签设置magin、padding、border等时，它的顺序是“上右下左”，这个顺序和方位读取顺序也没有类似的关系。为此我总结了一份Demo页面，供大家对比方位读取顺序，也算是一个总结笔记吧。

download demo

附文中jQuery的animate示例：

Html代码：

1
2
3
4
5

<button id="trigger">Click To Animate</button>
<div id="box">
	<div class="box" id="box1"></div>
	<div class="box" id="box2"></div>
</div>

CSS代码：

1
2
3
4

#box { width:800px; height:200px; position:relative; padding:10px 0; border:1px dashed #eee;}
.box { width:120px; height:40px; border:1px solid #f60; background:#390; position:absolute;}
#box1 { top:10px; left:0;}
#box2 { top:62px; left:0;}

jQuery代码：

1
2
3

$('#trigger').click(function() {
	$('.box').animate({'right': '0'});
});

结果执行JS后，Firebug中实时Html代码为：而通过Cssviewer观察到的代码不变：

所以，不要试图用JS来改变已设定top和left的DIV的right和bottom值，当然改变top和left值还是会有效果出来的。

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/css-position-hack/feed 27 Range:文本框选区学习笔记 http://www.ihiro.org/text-range http://www.ihiro.org/text-range#comments Mon, 22 Nov 2010 05:38:30 +0000 Hiro http://www.ihiro.org/?p=1556

有一段时间没有看《Javascript高级程序设计》了，最近重新接着看起，发现新的两个勘误，已经提交给为之漫笔了。

昨晚看到了文本框选区跨浏览器处理的部分。之前参加的交流会上，Taobao的前端分享过他们的Editor，主要的技术也是Range的应用。Range主要还是用在即见即所得Editor中，本文纯粹是做笔记之用，为避免以后自己遇到这样的需求而到处搜索，不如在自己的Blog上做个标记。

也做了个Demo页面，有兴趣的可以点击了查看效果。

]]> 有一段时间没有看《Javascript高级程序设计》了，最近重新接着看起，发现新的两个勘误，已经提交给为之漫笔了。

昨晚看到了文本框选区跨浏览器处理的部分。之前参加的交流会上，Taobao的前端分享过他们的Editor，主要的技术也是Range的应用。Range主要还是用在即见即所得Editor中，本文纯粹是做笔记之用，为避免以后自己遇到这样的需求而到处搜索，不如在自己的Blog上做个标记。

也做了个Demo页面，有兴趣的可以点击了查看效果。

download demo

一、Html代码：

1
2
3
4
5
6
7
8
9

<ul>
	<li><input type="text" value="Hello World!" id="textbox" name="textbox" size="50" /></li>
 
    <li><input type="button" id="getSelectedBtn" value="getSelectedText" /></li>
 
    <li><label for="startIndex">开始位置：</label><input type="text" size="5" id="startIndex" name="startIndex" />&nbsp;&nbsp;&nbsp;&nbsp;<label for="stopIndex">结束位置：</label><input type="text" size="5" id="stopIndex" name="endIndex" /></li>
 
	<li><input type="button" id="selectBtn" value="selectText" /></li>
</ul>

二、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

var textbox = document.getElementById('textbox'),
	getSelectedBtn = document.getElementById('getSelectedBtn'),
	selectBtn = document.getElementById('selectBtn');
 
function getSelectedText(textbox) {
	if(document.selection) {
		return document.selection.createRange().text;
	} else { //IE
		return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
	};
}
 
function selectText(textbox) {
	var startIndex = document.getElementById('startIndex').value, 
		stopIndex = document.getElementById('stopIndex').value;
	if(textbox.setSelectionRange) {
		textbox.setSelectionRange(startIndex, stopIndex);
	} else if(textbox.createTextRange) { //IE
		var range = textbox.createTextRange();		//创建范围
		range.collapse(true);				//折叠预选取范围到开始位置
		range.moveStart('character', startIndex);		//将预选取范围的起点和终点移动到相同的位置
		range.moveEnd('character', stopIndex - startIndex);		//选取字符长度
		range.select();			//选取范围
	alert(stopIndex);
	}
	textbox.focus();
}
 
getSelectedBtn.onclick = function() {
	alert(getSelectedText(textbox));
};
selectBtn.onclick = function() {
	selectText(textbox);
};

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/text-range/feed 16 HTML5:《Pro HTML5 Programming》英文电子书推荐 http://www.ihiro.org/html5-pro-ebook-recommendations http://www.ihiro.org/html5-pro-ebook-recommendations#comments Wed, 03 Nov 2010 08:52:55 +0000 Hiro http://www.ihiro.org/?p=1552

介于上一篇文章：jQuery:热区高亮maphighlight插件推荐，特向大家推荐一本HTML5的学习书籍。

现在国内关于HTML5的书籍几乎没有，即使有也还在翻译或编写中，没出版。这段时间在新公司或许英文文档看的多了，现在阅读器英文的书籍也相对轻松了许多。上上周的时候看完了Canvas API的相关，上周忙于工作，到现在也没在继续往下看。等时间空了继续看下去。

并不指望在实际的项目开发中用到，纯粹是兴趣爱好，或者是以后可能个人做些手机终端的开发。毕竟手机终端对HTML5的支持还是蛮多的。

]]> 介于上一篇文章：jQuery:热区高亮maphighlight插件推荐，特向大家推荐一本HTML5的学习书籍。

现在国内关于HTML5的书籍几乎没有，即使有也还在翻译或编写中，没出版。这段时间在新公司或许英文文档看的多了，现在阅读器英文的书籍也相对轻松了许多。上上周的时候看完了Canvas API的相关，上周忙于工作，到现在也没在继续往下看。等时间空了继续看下去。

并不指望在实际的项目开发中用到，纯粹是兴趣爱好，或者是以后可能个人做些手机终端的开发。毕竟手机终端对HTML5的支持还是蛮多的。

上篇的插件推荐其实漏掉了一部分内容，虽然该插件使用了HTML5的Canvas标签实现了绘图功能，但其实在IE下是不支持的。那么在IE下它是如何实现兼容的呢？原来它是使用了IE下特有的VML API，更多的参考可以访问：VML教程 (Thinking in VML)，我这就不做什么解释了，因为我也没去研究。(略图：)

最后附上《Pro HTML5 Programming》的下载地址：http://www.fileserve.com/file/vy9367V/Pro.HTML5.Programming.pdf

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/html5-pro-ebook-recommendations/feed 21 读书:《高性能网站建设进阶指南:Web开发者性能优化最佳实践 》 http://www.ihiro.org/perforomance-best-pritices-for-web-developers http://www.ihiro.org/perforomance-best-pritices-for-web-developers#comments Sun, 04 Jul 2010 14:47:42 +0000 Hiro http://www.ihiro.org/?p=1477

相信关注互联网或者做前端的朋友一定阅读过《高性能网站建设指南》这本前端惊世之作，我也读过，读得不够详细，但从中也学到了一些前端性能优化的技术，并在实际的项目应用于其中。

今天推荐的这本书是《高性能网站建设指南》进阶版，原作者从更加详细的细节方面全面地介绍Web性能优化的知识。该书是今年4月的时候才出版，我也是近两天无意间发现有新书出版，便急切的在亚马逊购买了阅读起来。看了一些，发觉很是不错，便写篇文章推荐给大家。

购买链接：http://www.amazon.cn/gp/product/product-description/B003FO0MEC/ref=dp_proddesc_0?ie=UTF8&s=books

]]> 相信关注互联网或者做前端的朋友一定阅读过《高性能网站建设指南》这本前端惊世之作，我也读过，读得不够详细，但从中也学到了一些前端性能优化的技术，并在实际的项目应用于其中。

今天推荐的这本书是《高性能网站建设指南》进阶版，原作者从更加详细的细节方面全面地介绍Web性能优化的知识。该书是今年4月的时候才出版，我也是近两天无意间发现有新书出版，便急切的在亚马逊购买了阅读起来。看了一些，发觉很是不错，便写篇文章推荐给大家。

下面部分介绍来自卓越亚马逊。

内容简介

《高性能网站建设进阶指南:Web开发者性能优化最佳实践》是《高性能网站建设指南》姊妹篇。作者Steve Souders是Google Web性能布道者和Yahoo！前首席性能工程师。在《高性能网站建设进阶指南：Web开发者性能优化最佳实践》中，Souders与8位专家分享了提升网站性能的最佳实践和实用建议，主要包括：理解Ajax性能，编写高效的JavaScript，创建快速响应的应用程序、无阻塞加载脚本，跨域共享资源，无损压缩图片大小，使用块编码加快网页渲染；避免或取代iframe的方法，简化CSS选择符，以及其他技术。

章节介绍

第1章：理解Ajax性能
第2章：创建快速响应的Web应用
第 3章：拆分初始化负载
第4章：无阻塞加载脚本
第5章：整合异步脚本
第6章：布置行内脚本
第7章：编写高效的JavaScript
第8章：可伸缩的Comet
第9章：超越Gzip压缩
第10章：图像优化
第11章：划分主域
第12章：尽早刷新文档的输出
第 13章：少用iframe
第14章：简化CSS选择符

《高性能网站建设进阶指南:Web开发者性能优化最佳实践 》购买链接：http://www.amazon.cn/gp/product/product-description/B003FO0MEC/ref=dp_proddesc_0?ie=UTF8&s=books

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/perforomance-best-pritices-for-web-developers/feed 10 jQuery:揭露jQuery的隐藏功能 http://www.ihiro.org/uncovering-jquerys-hidden-features http://www.ihiro.org/uncovering-jquerys-hidden-features#comments Mon, 15 Mar 2010 05:43:30 +0000 Hiro http://www.ihiro.org/?p=1158

jQuery并不像他表面显示的那样，只有那些额定的方法供我们使用。其他在他库的代码内有着很多很酷很便捷的潜在方法，等待被我们发现。在本文中，我将带领你去领略一些我在jQuery库中发现的那些不怎么常见的方法。

jQuery中的隐藏功能远远不止文章提到的这些，在以后的文章中会再总结一些我自己发现的功能与大家分享。

本文翻译自：Uncovering jQuery’s Hidden Features

]]> jQuery并不像他表面显示的那样，只有那些额定的方法供我们使用。其他在他库的代码内有着很多很酷很便捷的潜在方法，等待被我们发现。在本文中，我将带领你去领略一些我在jQuery库中发现的那些不怎么常见的方法。

1.理解jQuery方法：

当你调用jQuery方法时会发生什么呢？看看jQuery的方法体，非常地简单。

1
2
3
4

jQuery = function (selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context);
};

在表层的代码之下，jQuery方法（通常称之为“包装”方法）将返回一个实例化后的jQuery对象，即’jQuery.fn.init’构造函数的一个实例。

理解了这一点非常有用，当我们每次调用jQuery方法时，都会返回一个带有一组属性的完全独立的对象。而jQuery的聪明之处在于返回的这个对象是以数组的方式返回的。该对象中的所有元素（通称”集合“）都是由一个数字索引所指向，就像数组中的下标一样。而且jQuery还返回了一个对象的length属性，就像数组中的长度一样。这种思想给jQuery方法提供了无限的想象空间。比如，我们可以从’Array.prototype’中借用一些功能性方法。jQuery中的slice方法就是一个典型的例子：

1
2
3
4
5
6
7
8
9
10

/* ... jQuery.fn.extend({ ... */
slice: function() {
    return this.pushStack(
        Array.prototype.slice.apply( this, arguments ),
        "slice",
        Array.prototype.slice.call(<wbr>arguments).join(",")
    );
},
/* ... */
</wbr>

在该slice方法不管this是否是一个真实的数组，它和其他的元素会和睦地相处，因为有着”length“这么一个属性。

jQuery中还有一些其他有趣的属性，比如”selector”—选择器，”context”—-上下文等。大部分的时候，只需给jQuery方法传递对象参数即可：

1
2

var jqObject = jQuery('a');
jqObject.selector; // => "a"

一个重要的提示是，jQuery有时会返回一个全新的对象供你使用。比如你试图通过执行一段代码来改变一个集合，如”parent()”方法，但是此时jQuery将不会修改当前的对象，它会返回给你一个全新的对象。

1
2
3
4

var originalObject = jQuery('a');
var anotherObject = originalObject.parents();
 
originalObject === anotherObject; // => false

所有试图改变集合的方法都会返回一个新的jQuery对象，你可以通过”.end()”方法或”.prevObject”属性来访问之前的那个对象。

2.面包、奶油元素的建立：

jQuery创建DOM的能力，是其核心功能之一。jQuery1.4新版本带来了一个全新的便捷地创建DOM对象的方法，如：

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

var myDiv = jQuery('<div />', {
    id: 'my-new-element',
    class: 'foo',
    css: {
        color: 'red',
        backgrondColor: '#FFF',
        border: '1px solid #CCC'
    },
    click: function() {
        alert('Clicked!');
    },
    html: jQuery('<a />', {
        href: '#',
        click: function() {
            // do something
            return false;
        }
    })
});

在1.4版本中，当你创建一个元素对象时，可以再传入第二参数，该第二参宿可以作为该元素对象的属性设置，也可以理解会调用了.attr()方法。当然，jQuery会自行匹配传入的参数们，如’click’对应了jQuery库中的.click方法，以及’css’、’html’分别对应了jQuery库中的.css()、.html()方法，等等…

3.序列化表单中的input元素：

jQuery提供了一个方法可以将1个或多个表单中的所有input元素进行序列化，这在Ajax提交数据时非常有用。其实该方法在jQuery库中已经存在很长的时间了，但一直很少谈及，所以很多的程序员都忽略了它。通过jQuery中的Ajax方法提交整个表单将变得非常简单。

1
2
3
4

var myForm = $('#my-form');
jQuery.post('submit.php', myForm.serialize(), function(){
    alert('Data has been sent!');
});

jQuery同样也通过了一个’serializeArray’方法，他通常用在多个form表单存在，需要自行收集数据的情况。在jQuery的命名空间下有一个’param’辅助方法可以将一个数组对象处理后返回成一个查询字符串。

1
2
3
4
5
6
7
8

var data = {
    name: 'Joe',
    age: 44,
    profession: 'Web Developer'
};
 
jQuery.param(data); // => "name=Joe&age=44&profession=<wbr>Web+Developer"
</wbr>

4.任何元素都可以动画方式展现：

jQuery中的’animate’方法也许是最灵活的jQuery的方法。它可以用几乎任何东西来制作动画，而不仅仅是CSS属性，或者是DOM元素。通常会这样使用’动画’：

1
2
3
4

jQuery('#box').animate({
    left: 300,
    top: 300
});

当您给.animate()方法指定一个属性时（例如’top’），jQuery会检查你是否是想通过某个css属性来控制动画风格。首先jQuery会检查css样式中是否存在该top属性，若不存在，则jQuery会自行地给对应元素加上该属性。下面是一个例子：

1
2
3
4

jQuery('#box').animate({
    top: 123,
    foo: 456
});

上面的代码中’top’是一个可用的css属性，则jQuery就会改变’element.style.top’,但是’foo’不是一个可用的css属性，所以jQuery将只更新’element.foo’。

我们可以利用这个优点来实现一些有趣的效果。比方说，例如，您要在一个画布上使一个正方形动画起来。首先让我们定义一个简单的构造和一个在每一步都会调用的’drwa’的方法：

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

function Square(cnvs, width, height, color) {
 
    this.x = 0;
    this.y = 0;
    this.width = width;
    this.height = height;
    this.color = color;
 
    this.cHeight = cnvs.height;
    this.cWidth = cnvs.width;
    this.cntxt = cnvs.getContext('2d');
 
}
 
Square.prototype.draw = function() {
 
    this.cntxt.clearRect(0, 0, this.cWidth, this.cHeight);
    this.cntxt.fillStyle = this.color;
    this.cntxt.fillRect(this.x, this.y, this.width, this.height);
 
};

通过jQuery方法创建一个canvas画布元素（需要html5支持），再实例化一个正方形对象，通过调用.animate()方法在动画的每一步过程中调用.draw()方法，这样就可以轻易地使该正方形动画起来：

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

// Create a <canvas /> element
var canvas = $('<canvas />').appendTo('body'<wbr>)[0];
canvas.height = 400;
canvas.width = 600;
 
// Instantiate Square
var square = new Square(canvas, 70, 70, 'rgb(255,0,0)');
 
jQuery(square).animate({
    x: 300,
    y: 200
}, {
    // 'draw' should be called on every step
    // of the animation:
    step: jQuery.proxy(square, 'draw'),
    duration: 1000
});
</wbr>

这是一个非常简单的效果，但它清楚地表明了jQuery的无限可能性。你可以通过下面的链接看到具体的效果（需要浏览器支持html5）：Demo

5.jQuery.ajax方法返回XHR对象：

jQuery的 Ajax方法是一个多功能的方法，它包含了’jQuery.ajax’, ‘jQuery.get’, ‘jQuery.post’等多个方法，这些方法在调用后都会返回一个’XMLHttpRequest’ 对象，从而来实现请求完成后的后续操作。如：

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

var curRequest;
 
jQuery('button.makeRequest').click(function(){
    curRequest = jQuery.get('foo.php', function(response){
        alert('Data: ' + response.responseText);
    });
});
 
jQuery('button.cancelRequest').click(function(){
    if (curRequest) {
        curRequest.abort(); // abort() is a method of XMLHttpRequest
    }
});

上面的代码中当我们点击’makeRequest’按钮时，Ajax请求将会被触发。而当我们点击’cancelRequest’按钮时，该请求则会被取消。

另一个潜在的用途是同步请求：

1
2
3
4
5
6

var myRequest = jQuery.ajax({
    url: 'foo.txt',
    async: false
});
 
console.log(myRequest.responseText);

请多的资料可以阅读‘XMLHttpRequest’，也可以阅读Ajax的API文档jQuery’s Ajax utilities

6.自定义队列：

jQuery的有一个内置的队列机制，一般都是有.animate等动画方法使用的（如：.fadeOut()、.fadeIn()等，实质都是有.animate()方法实现）。这种队列机制可以用一个简单的动画就可以说明：

1
2
3
4
5

jQuery('a').hover(function(){
    jQuery(this).animate({paddingLeft:'+=15px'});
}, function(){
    jQuery(this).animate({paddingLeft:'-=15px'});
});

快速地在一个链接标记上鼠标移入、移出，当再次移入时，会导致动画的效果反复执行。不信你可以到这里试试：Demo

‘queue’方法和大家熟知的’each’方法比较相似，你通过给方法传递一个函数参数，则该函数将被匹配集合中的每个元素所调用：

1
2
3

jQuery('a').queue(function(){
    jQuery(this).addClass('all-done').dequeue();
});

给’queue’方法只传入一个函数参数的话会导致该函数被添加到默认的’fx’队列中。若刚好该队列会被jQuery中的所有动画对象所调用，那么只有等前面的这些对象都调用后，才会轮到自己。
鉴于该点，在上面的代码中我给对象添加了一个名为’all-done’的class，根据协议，这个class只有在当前所有的动画都执行完成后才会添加。在代码中我们也调用了.dequeue()方法。这一点很重要，它将使jQuery的继续进行队列。jQuery1.4版本提供了另一个可以继续队列的方法nextItemInQueue()，它可以用来取代调用.dequeue()方法。它的调用只需将第一个参数传递给方法即可：

1
2
3
4
5

jQuery('a').queue(function(<wbr>nextItemInQueue){
    // Continue queue:
    nextItemInQueue();
});
</wbr>

当然两个方法也不完全相同，nextItemInQueue()可以在方法体内部的任何地方都可以调用，即使在一团糟的匿名函数内（典型情况是’this’对象被破坏）。当然在1.4版本前，你可以尽可能地保存一个对’this’对象的引用，但这样使用起来有点累。

要想向自定义队列中添加方法，只需将你自定义的队列名称作为第一参数，而将方法体作为第二参数传入即可：

1
2
3
4

jQuery('a').queue('customQueueName', function(){
    // Do stuff
    jQuery(this).dequeue('customQueueName');
});

需要认识的一点，为了不将该队列添加到默认的’fx’队列中，我们需要将自定义的队列名传入.dequeue()方法中，这样在队列结束后，可以保证jQuery队列可以继续执行下去。

更多的资料可以阅读‘queue’,‘dequeue’,‘jQuery.queue’

7.事件命名空间：

jQuery提供了一个命名时间名称的方法，这在编写插件或第三方组件时非常有用。当需要时，您的插件用户可以通过取消绑定这些你注册事件名称即可。

向命名空间中添加注册一个事件处理名称，只需在事件名称后添加自定义的后缀名（如：.fooPlugin):

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

jQuery.fn.foo = function() {
 
    this.bind('click.fooPlugin', function() {
        // do stuff
    });
 
    this.bind('mouseover.fooPlugin', function() {
        // do stuff
    });
 
    return this;
};
 
// Use the plugin:
jQuery('a').foo();
 
// Destroy its event handlers:
jQuery('a').unbind('.fooPlugin');

取消绑定是只需调用.unbind()方法，并传入自定义事件名称即可实现。

总结：

jQuery中的隐藏功能远远不止这些，在以后的文章中会再总结一些我自己发现的功能与大家分享。

本文翻译自：Uncovering jQuery’s Hidden Features

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/uncovering-jquerys-hidden-features/feed 5 CSS:CSS3基础（附图） http://www.ihiro.org/css3-basic http://www.ihiro.org/css3-basic#comments Mon, 08 Mar 2010 02:41:14 +0000 Hiro http://www.ihiro.org/css-css3-based-with-photos

今日在Web Designer Wall博客上看到这篇介绍css3基础的博文，文章其实很普通，关键喜欢他配上了截图，看起来就更加明了。便花了点时间整理后发表出来与大家分享一下！

文中主要介绍了四个css3高级属性，也是最最常用的四个css3属性。

最后，css3高级属性远远不值文中的这些，文中讲到的是一些基础的，也是使用最多的，为了给用户带去更多的美好体验，努力学透css吧！

本文翻译自：Web Designer Wall -- The Basics of CSS3

]]> 今日在Web Designer Wall博客上看到这篇介绍css3基础的博文，文章其实很普通，关键喜欢他配上了截图，看起来就更加明了。便花了点时间整理后发表出来与大家分享一下！

文中主要介绍了四个css3高级属性，也是最最常用的四个css3属性。

1.RGBA

RBGA是用于css的background属性，前三个参数是RBG颜色值，最后一个参数是透明度设置。RGBA也可以使用在css中与颜色相关的所有属性中，如color,border-color,background-color,shadow-color等。

2.Text Shadow

text-shadow的设置值是由x-offset, y-offset, blur, color四个参数组成。若给x-offset设置一个负值，则阴影偏向左边；若个y-offset设置一个负值，则阴影偏向顶部；当然你也可以使用RGBA来设置第四个参数color。你也可以给text-shadow设置一系列的值（用逗号隔开）。下面的图片展示了两个值来设置一个单词的印刷效果（1px向上，1px向下）：

3.Border Radius

对border radius的记忆方法就和padding、margin一样(如： border-radius: 20px)。为了达到多浏览器兼容，需要在该属性前加上“-moz-“用于火狐浏览器、加上”-webkit-“用于谷歌和苹果浏览器。（IE浏览器不支持此CSS3高级属性）你也可以分别设置四个角的圆角直径，火狐浏览器与苹果（谷歌)浏览器的设置属性有所差别，看图：

4.Box Shadow

box shadow属性设置值的构成与text-shadow是一样的，都是有四个属性：x-offset, y-offset, blur, color组成。当然，box-shadow也可以用一系列的值来设置属性，如：

1
2
3
4

-moz-box-shadow:
		-2px -2px 0 #fff,
		2px 2px 0 #bb9595,
		2px 4px 15px rgba(0, 0, 0, .3);

效果如下图：

最后，css3高级属性远远不值文中的这些，文中讲到的是一些基础的，也是使用最多的，为了给用户带去更多的美好体验，努力学透css吧！

本文翻译自:Web Designer Wall — The Basics of CSS3

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/css3-basic/feed 12 jQuery:1.4新版本中你应该知道的15个新特性(二) http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-2 http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-2#comments Fri, 22 Jan 2010 05:04:47 +0000 Hiro http://www.ihiro.org/?p=1054

继续发布jQuery1.4版本剩余的新特性：第9点至第15点。

九、去除标签元素的父标签；

十、不用删除数据，即可删除掉DOM中的标签元素；

十一、对.index()方法进行了扩展；

十二、DOM控制方法支持回调函数...

]]> 继续发布jQuery1.4版本剩余的新特性：第9点至第15点。

九、去除标签元素的父标签：

在之前的版本中已经有了.wrap()方法来个标签添加新的父标签，而在1.4新版本中又添加了相对的.unwrap()方法来去除标签的父标签。实例Html代码如下：

1
2
3

<div>
    <p>Foo</p>
</div>

jQuery1.4版本中实现代码：

1

jQuery('p').unwrap();

执行后的话题Html代码如下:

1

<p>Foo</p>

>>>>阅读更多关于.unwrap()方法的资料…

十、不用删除数据，即可删除掉DOM中的标签元素：

新版本中的.detach()方法允许你删除DOM中的任何标签元素，就像.remove()方法一样。但它与.remove()方法的不同之处是：.remove()是将标签直接删除，而.detach()方法则是将标签暂时移除，并通过方法内部调用.data()方法将标签缓存后赋予变量，再后面的代码中若还需要找回该标签，变量则会自动读取缓存的数据；另外若被.detach()方法移除的标签在移除前绑定了事件机制的话，在后面恢复后，该事件机制依然存在，无需再次绑定。
jQuery1.4版本中实现代码：

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

var foo = jQuery('#foo');
 
// Bind an important event handler
foo.click(function(){
    alert('Foo!');
});
 
foo.detach(); // Remove it from the DOM
 
// … do stuff
 
foo.appendTo('body'); // Add it back to the DOM
 
foo.click(); // alerts "Foo!"

>>>>阅读更多关于.detach()方法的资料…

十一、对.index()方法进行了扩展：

1.4新版本中新增了两个.index()的调用方法。而之前，我们将一个标签元素作为.index()方法的参数，并希望执行后返回一个标识当前集合中匹配元素序列号的数字结果。

若有一段XHtml代码如下：

1
2
3
4
5
6
7
8

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

点击li标签获得该li标签的序号

jQuery1.32版本中实现代码：

1
2
3

$('li').click(function() {
       alert($('li').index(this));	
});

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9

$('li').click(function() {
       alert($(this).index());	
});
 
//或者
 
$('li').click(function() {
	alert($(this).index('li'));				   
});

>>>>阅读更多关于.index()方法的资料…

十二、DOM控制方法支持回调函数：

在1.4版本中绝大部分的DOM控制方法只支持回调函数作为唯一的参数，除了极个别的（比如：.attr()、.css()）方法中可以作为第二参数。这些回调函数将被匹配集合中所有元素所执行，
以确定哪些应作为该方法的实际值。

下面的这些DOM控制方法都支持回调函数：

在回调方法中，若你想访问该匹配集合的话，你需要使用”this”，或者序号index作为该方法的第一个参数。
jQuery1.4版本中实现代码：

1
2
3

jQuery('li').html(function(i){
    return 'Index of this list item: ' + i;
});

当然你可以给该回调函数传递第二个参数，比如是在使用设置类的DOM控制方法（如：.html()、.attr()等），你若想得到当前的值。

jQuery1.4版本中实现代码：

1
2
3

jQuery('a').attr('href', function(i, currentHref){
    return currentHref + '?foo=bar';
});

正如你看到的一样，在使用.attr()和.css()方法是，当该方法的第一个是属性名称时，你可以将回调函数作为方法的第二参数。

jQuery1.4版本中实现代码：

1
2
3

jQuery('li').css('color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

十三、检测对象类型方法：

jQuery1.4新版本在命名空间下新增了两个帮助型的方法，用来帮助你检测对象类型。

第一个方法：.isEmptyObject()用来判断一个对象是否是空对象，返回一个布尔类型的结果；
第二个方法：.isPlainObject()用来判断一个对象是否是最原始的Javascript对象(该对象是否是通过{}或者new Object()创建)，同样也返回一个布尔类型的结果。

jQuery1.4版本中实现代码：

1
2
3
4
5
6

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false
 
jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

>>>>阅读更多关于.isEmptyObject().isPlainObject()方法的资料…

十四、.Closest()方法扩展：

扩展后的.Closest()支持数组选择器作为参数，这在遍历一个元素的祖先元素时非常有用。

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

< !DOCTYPE html>
<html>
<head>
  <style></style>
  <script src="/scripts/jquery-1.4.js"></script>
</head>
<body>
	<ul><li></li><li></li></ul>
<script>var close = $("li:first").closest(["ul", "body"]);
$.each(close, function(i){
  $("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});</script>
</body>
</html>

执行后的结果是：

1
2

    * ul: UL
    * body: BODY

另外该方法还支持使用上下文对象作为它的第二参数，也就是说你可以遍历任意上下文对象直到的元素的祖先元素。这个扩展使用的列子非常少，但在内部使用时非常的有效率。

>>>>阅读更多关于.closest()方法的资料…

十四、新的事件机制（focusIn 、focusOut）：

新版本中若要给事件对象委派”focus”和”blur”事件，也可以使用.focusIn()和.focusOut()方法（它们是一一对应的）。更加重要的是focus和blur事件不支持.live()方法委派，但focusIn和focusOut事件是支持.live()方法委派。

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7

   jQuery('form')
    .focusin(function(){
        jQuery(this).addClass('focused');
    });
    .focusout(function(){
        jQuery(this).removeClass('focused');
    });
1
2
3
4
5
6
7

   jQuery('input')
    .live('focusin', function(){
        jQuery(this).addClass('focused');
    });
    .live('focusout', function(){
        jQuery(this).removeClass('focused');
    });

>>>>阅读更多关于.focusin().focusin()方法的资料…

文章总结翻译来自：http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

更多的API文档资料请阅读：http://api.jquery.com/

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-2/feed 7 jQuery:1.4新版本中你应该知道的15个新特性(一) http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-1 http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-1#comments Wed, 20 Jan 2010 05:53:13 +0000 Hiro http://www.ihiro.org/?p=1028

题外话：前两天回了一趟泰州，星期二上班后看到了两条比较重大的新闻：1.谷歌耍了我们这些谷歌迷们一把，决定不离开中国了；2.jQuery1.4新版本也正式上线了。

从Nettuts+博客上看到了这票jQuery1.4新特性的总结性文章，该博总结了15条新的特性，便给出相应的实现代码。觉得不错，便整理后翻译过来供大家参考，并加入了1.32版本的实现方法进行比较性地学习。

文章较长，分两篇文章发布，请关心者耐心阅读与等待！上篇包含特性1-8点，下篇9-15点隔一日再发布！

]]> 题外话：前两天回了一趟泰州，星期二上班后看到了两条比较重大的新闻：1.谷歌耍了我们这些谷歌迷们一把，决定不离开中国了；2.jQuery1.4新版本也正式上线了。

从Nettuts+博客上看到了这票jQuery1.4新特性的总结性文章，该博总结了15条新的特性，便给出相应的实现代码。觉得不错，便整理后翻译过来供大家参考，并加入了1.32版本的实现方法进行比较性地学习。

文章较长，分两篇文章发布，请关心者耐心阅读与等待！上篇包含特性1-8点，下篇9-15点隔一日再发布！

一、给jQuery(…)方法传递新的参数：

jQuery()方法是jQuery库的核心方法之一，在1.32版本及早期的版本中，该方法是用来获取节点或者创建DOM对象的，它只支持一个参数。在使用来创建新的DOM对象时，我们若要给该DOM对象添加属性的话，只能通过attr()方法在后面追加，很是不方便，阅读起来也比较累。在jQuery1.4中，给jQuery方法新增了一个对象型的参数，用来创建新的DOM对象设置该DOM对象相应的属性。

jQuery1.32版本中实现代码：

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

jQuery('<a></a>').attr({
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external'
}).text('Go to Google!')
   .css({
       fontWeight: 700,
       color: 'green'
   })
   .click(function(){
       alert('Foo has been clicked!');
   });

jQuery1.4版本中实现代码：

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

jQuery('<a />', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!',
    css: {
        fontWeight: 700,
        color: 'green'
    },
    click: function(){
        alert('Foo has been clicked!');
    }
});

>>>>阅读更多关于jQuery(…)方法的资料…

二、新增”until”系列方法：

新增”until”系列方法中有三个方法：”nextUntil”, “prevUntil” 和”parentsUntil”，这些方法是用来获取符合条件内的DOM对象。中文你可以理解为“直到”的意思。

若有一段XHtml代码如下：

1
2
3
4
5
6
7
8

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

现在我想选取从含有apple的li到含有pear的li,则代码实现：

jQuery1.32版本中实现代码：

1

jQuery('ul li').slice(1, 4);

jQuery1.4版本中实现代码：

1

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');

虽然上面两者的选取效果是一样的，但若现在我在含有apple的li到含有pear的li中间再添加内容的话，1.32版本的代码就需要修改了，而1.4版本的则可继续使用，也就说1.4版本的代码可用性和语义性增强了。

>>>>阅读更多关于prevUntil, nextUntil, parentsUntil方法的资料…

三、给事件对象一次绑定多个事件：

1.4不再像1.32版本中那样链式地给一个时间对象绑定时间，现在你可以将多个时间归纳后绑定到一个方法中。

jQuery1.32版本中实现代码：

1
2
3
4
5
6
7

jQuery('#foo).bind('click', function() {
        // do something
}).bind('mouseover', function() {
        // do something
}).bind('mouseout‘， function() {
        // do something
});

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9
10
11

jQuery('#foo).bind({
    click: function() {
        // do something
    },
    mouseover: function() {
        // do something
    },
    mouseout: function() {
        // do something
    }
});

当然对.one()一次点击事件也是适用的哦！

>>>>阅读更多关于.bind(…)方法的资料…

四、Per-Property Easing动画效果

在1.32版本中，我们使用animate()方法给对象添加动画效果时，特效很单一，只能再引入jquery.easing.js插件来丰富动画特效。在新版本1.4中将该插件集成到了jQuery库中，这样在使用过的过程中就更加地方便了。

jQuery1.4版本中实现代码：

1
2
3
4

jQuery('#foo').animate({
    left: 500,
    top: [500, 'easeOutBounce']
}, 2000);

当然也可以给附加的属性参数内添加动画效果，如：

1
2
3
4
5
6
7
8
9

jQuery('#foo').animate({
    left: 500,
    top: 500
}, {
    duration: 2000,
    specialEasing: {
        top: 'easeOutBounce'
    }
});

>>>>阅读更多关于per-property easing的资料…

五、新增live事件：

在1.32版本中，live()方法只对click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup这些时间提供了支持，而不支持也比较常用的focus和blur时间。在1.4版本中新增了submit, change, focus, blur四种时间的支持。其中focus对应的是focusin事件，而blur对应了focusout事件。

jQuery1.4版本中实现代码：

1
2
3
4
5

jQuery('input').live('focusin', function(){
    // do something with this
}).live('focusout', function(){
    // do something with this
});

六、控制方法的上下文对象：

1.4版本在jQuery命名空间下新增了一个名叫”proxy“的方法，该方法有两个参数：一个是作用域，一个是准备执行的处理方法。在Javascript中，this关键字很巧妙地自动执行父亲对象或某个DOM元素对象。当有时候我们希望this指向的不是一个DOM元素对象，而是希望它指向一个之前创建的对象。

举个列子，就很容易明白！比如，现在我们有一个app对象，该对象内部有一个”clickHandler“方法和一个命名为”config“的对象。代码如下：

1
2
3
4
5
6
7
8

var app = {
    config: {
        clickMessage: 'Hi!'
    },
    clickHandler: function() {
        alert(this.config.clickMessage);
    }
};

当我们调用app.clickHandler()方法时，app对象就有了自己的上下文对象：clickHandler方法中的this指向的是app对象。执行后会弹出内容为”Hi!“的提示框。若现在我希望将该app对象下的clickHandler方法绑定在一个超链接上，如下：

1

jQuery('a').bind('click', app.clickHandler);

而此时，当我们点击该超链接时，app对象下的clickHandler方法并不会执行，用Firebug测试则会提示”app.clickHandler is not a function!”。原因在于jQuery（以及绝大部分的事件对象）默认地将事件对象作为了该clickHandler方法的上下文对象，也就是此时this指向了a超链接标签元素。而我们的实际愿望是希望this执行app对象，那么1.4中我们就可以使用新增的proxy()方法来处理这一问题。代码如下：

1
2
3
4

jQuery('a').bind(
    'click',
    jQuery.proxy(app, 'clickHandler')
);

这样执行后提示框就会正常地弹出了。proxy()方法返回的是一个包装后的方法，它将执行你所期望的对象（通过第一个参数传递）。这在其他上下文对象中也很实用，比如给其他方法或插件传递回调函数。

>>>>阅读更多关于jQuery.proxy()方法的资料…

七、延迟动画队列：

在平时编写代码时，你或许发现有一个动画效果还没完成呢，下面的代码就已经执行完了。而我们希望的是等动画效果执行完成后或执行一段时间后再执行后面的代码。1.4版本中新增了delay()方法来延迟代码的执行。

jQuery1.32版本中实现代码：

1
2
3

setTimeout(500, function() {
        // do something
});

jQuery1.4版本中实现代码：

1
2
3
4

jQuery('#foo')
    .slideDown() // Slide down
    .delay(200) // Do nothing for 200 ms
    .fadeIn(); // Fade in

若你希望延迟一个动画队列比默认的“fx”(queue()函数的默认参数)还要慢的话，你只需要将这个queue的变量名当作delay()方法的第二个参数传递即可。

>>>>阅读更多关于.delay(…)方法的资料…

八、判断一个DOM父对象中是否含有某个匹配的子对象：

1.4中新增了一个过滤型的方法has()来判断某个对象是否在某个标签或集合内出现过。该方法将返回在标签中出现的所有匹配子对象的集合，至少会包含一个子对象。若没有找到匹配子对象，则返回的是一个空的集合。

1

jQuery('div').has('ul');

当然jQuery1.32版本中的.contains()方法其实也可以达到同样的效果，1.4版本又对.contains()进行了完善。在1.4版本中通过给.contains()方法传递两个DOM对象参数，从而判断第二个参数对象是否在第一个参数对象中。代码如下：

1
2
3

jQuery.contains(document.documentElement, document.body);
// Returns true - <body> is within <html>
</html></body>

>>>>阅读更多关于.has(…)，jQuery.contains(…)方法的资料…

剩余的7点新特性隔一日发布！敬请期待吧，呵呵。

文章总结翻译来自：http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-1/feed 6 Javascript:10个Javscript编程的技巧 http://www.ihiro.org/10-javascript-tips http://www.ihiro.org/10-javascript-tips#comments Fri, 18 Dec 2009 09:45:50 +0000 Hiro http://www.ihiro.org/?p=941

今天在Blog：Impressive Webs上看到这篇总结了10个Javascript技巧的文章。觉得比较受用，便简约地理解后翻译了给需要的朋友学习学习。

文章中的10条小技巧或许对大家来说已经是了然于胸了，但有时候编程晕头晕脑的，不经意间就会忘记。所以在平时的编程过程中养成一个良好的编程习惯是一个程序员最基础的素质要求。只要多练、多看、多学习，我们的编程技术就会越来越高明的！

该文整理来自：Impressive Webs:10 JavaScript Quick Tips and Best Practices

]]> 今天在Blog：Impressive Webs上看到这篇总结了10个Javascript技巧的文章。觉得比较受用，便简约地理解后翻译了给需要的朋友学习学习。

1.外部引入js文件时，使用defer属性供IE浏览器解析

这个属性可加可不加，不管添加defer属性是不是一个好的编程技巧，但该属性在适当的时候会派上用场的。它的使用方法如下：

1

<script type="text/javascript" defer="defer"></script>

添加defer属性的目的是在引入外部js文件时告诉Ie浏览器，只有在等页面加载完成后才执行引入的js文件中的js代码。当然这也可以通过一些比较好的代码实现，这些好的代码可以避免页面在没有加载完DOM就执行外部引入的js代码的问题。

注：defer属性只有IE浏览器才会支持。

2.使用一个CDATA区域来避免XHTML Strict文件验证的错误

XHTML Strict文件对页面中的标签和代码要求甚高，而js代码中常常出现运算符，而W3C验证XHTML Strict文件时，会认为页面js代码中的”< "、">“等运算符为一个标签的开始和结束，这样就会出现验证错误。

所以比较好的XHTML Strict文件中js编程习惯时给js代码外围加上一个CDATA区域，以达到该段js可以通过W3C验证。效果如下：

1
2
3
4
5
6
7
8

<script type="text/javascript">
//< ![CDATA[
var my_variable = 100;
if (my_variable < 50) {
	// do something here...
}
//]]>
</script>

3.避免使用Javascript的关键字来自定义变量

每一种编程语言都有默认的一些关键字，在日常的代码编写过程中都因避免使用关键字作为自定义变量名。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

break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

4.避免使用Javascript的保留字来自定义变量

同样每一种编程语言都有一定量的保留字，在自定义变量时也因避免使用这些保留字作为自定义变量名。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

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

5.在自定义一个变量并赋予相应的类型后，在之后的代码中避免改变该变量的类型

在Javascript编程中，如下的写法是不太理想的：

1
2

var my_variable = "This is a String";
my_variable = 50;

在第一行给my_variable变量赋予了一个String的类型，而在第二行却改变为了Integer类型，这样写是一个不好的习惯，应该避免这种情况的发生。

6.不要使用全局变量

为了防止可能发生的冲突，99％的情况下，使用var关键字最初声明变量和赋予该变量值。这将确保您的变量是局部的，而不是声明它们的功能函数之外。这样的话，在两个不同的函数体内使用相同的变量名就不会发生变量的冲突。而这里在函数体内定义的变量在函数执行完成后就会被取消，从而节省了命名空间。

7.Javascript对大小写敏感

看下面的两个自定义变量，它们代表了两个不同的变量：

1
2

var myVariable = "data";
var myvariable = "more data";

所以，在日常的编写代码时，养成一个好的编程习惯，不要无意间因大小写的问题而定义了两个变量，其实你需要的只是一个变量。

8.使用switch声明来处理多种条件判断

在多个条件判断代码的编写时，不要如下编写代码：

1
2
3
4
5
6
7
8
9
10
11

if (example_variable == "cyan") {
	// do something here...
} else if (example_variable == "magenta") {
	// do something here...
} else if (example_variable == "yellow") {
	// do something here...
} else if (example_variable == "black") {
	// do something here...
} else {
	// do something here...
}

而是应该这样使用：

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

switch (example_variable) {
	case "cyan":
		// do something here...
		break;
	case "magenta":
		// do something here...
		break;
	case "yellow":
		// do something here...
		break;
	case "black":
		// do something here...
		break;
	default:
		// do something here...
		break;
}

上面的两端代码执行的结果是一样的，但第二种使用swicth编写的代码便于阅读、管理和修改。

9.使用try-catch，以防止向用户显示错误

将需要执行的代码包含在try-catch中，这样用户就永远看不多Javascript的报错信息。如下：

1
2
3
4
5

try {
	nonExistentFunction();
} catch (error) {
	document.write("An error has occured.")
}

在上面的代码中我试图去调用一个实际不存在的函数来产生一个错误。而浏览器则不会显示“not an object” 或者 “object expected”错误，而是现实了我在catch体内自定义的错误信息。当然你也可以在catch体内不懈任何代码，这样什么错误信息都不会输出。或者也可以在catch体内调用一个自定义的捕获错误的函数，以便调试其中的错误。

当然，错误也有可能来自开发人员本身代码的错误，所以在代码中加上适当的注释信息是必不可少的。

10.使用简约的多行注释对代码进行说明

在Javascript中，注释有单行注释和多行注释之分。而有时候的注释文字很长时，良好的习惯是将注释文字放在多行中，以便于阅读。

1
2
3
4
5
6
7

/*
 * 我是多行注释 ...
 * 注释..
 * 注释...
 * 注释...
 * 注释...
 */

总结：上面的10条小技巧或许对大家来说已经是了然于胸了，但有时候编程晕头晕脑的，不经意间就会忘记。所以在平时的编程过程中养成一个良好的编程习惯是一个程序员最基础的素质要求。只要多练、多看、多学习，我们的编程技术就会越来越高明的！

该文整理来自：Impressive Webs:10 JavaScript Quick Tips and Best Practices

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/10-javascript-tips/feed 4 jQuery:通过事件委派一次绑定多种事件，以减少事件冗余 http://www.ihiro.org/jquery-once-through-the-event-delegate-to-bind-a-variety-of-time-in-order-to-reduce-the-event-of-redundancy http://www.ihiro.org/jquery-once-through-the-event-delegate-to-bind-a-variety-of-time-in-order-to-reduce-the-event-of-redundancy#comments Wed, 16 Dec 2009 03:42:39 +0000 Hiro http://www.ihiro.org/?p=932

jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。于是乎，在日常的开发中大量使用连缀写法，而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件，便于阅读和书写，习惯了使用连缀写法，但这样的书写方式会造成时间的冗余。

1.事件冗余：多个事件方法中多次调用相同的代码

2.事件委派：一次性绑定多个事件，根据事件类别委派相应的操作

]]> jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。于是乎，在日常的开发中大量使用连缀写法，而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件，便于阅读和书写，习惯了使用连缀写法，但这样的书写方式会造成时间的冗余。

1.事件冗余：多个事件方法中多次调用相同的代码

下面的代码是一个事件方法连缀的写法：

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

jQuery(function($) {
	$('<div id="livetip"></div>').hide().appendTo('body');
	var tipTitle = '';
	$('#mytable').bind('mouseover', function(event) {
		var $link = $(event.target).closest('a');
		if ($link.length) {
			var link = $link[0];
			tipTitle = link.title;
			link.title = '';
			$('#livetip').css({
				top: event.pageY + 12,
				left: event.pageX + 12
			})
			.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
			.show();
		};
	}).bind('mouseout', function(event) {
		var $link = $(event.target).closest('a');
		if ($link.length) {
			$link.attr('title', tipTitle);
			$('#livetip').hide();
		};
	}).bind('mousemove', function(event) {
		var $link = $(event.target).closest('a');
		if ( $link.length) {
			$('#livetip').css({
				top: event.pageY + 12,
				left: event.pageX + 12
			});
		};
	});
});

其中第5|6行、第18|19行、第24|25行多次地使用了同样的一段代码去判断事件对象是否存在。这不管是从代码效率还是代码文件大小的方面来说都是不合理的方法。

2.事件委派：一次性绑定多个事件，根据事件类别委派相应的操作

为了更好地优化上面的代码，可以通过事件委派来修改代码，修改后的代码如下：

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

jQuery(function($) {
	var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body');
	var tipTitle = '';
 
	$('#mytable').bind('mouseover mouseout mousemove', function(event) {
	  var $link = $(event.target).closest('a');
	  if (!$link.length) { return; }
	  var link = $link[0];
 
	  if (event.type == 'mouseover' || event.type == 'mousemove') {
		$liveTip.css({
		  top: event.pageY + 12,
		  left: event.pageX + 12
		});
	  };
 
	  if (event.type == 'mouseover') {
		tipTitle = link.title;
		link.title = '';
		$liveTip.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
			.show();
	  };
 
	  if (event.type == 'mouseout') {
		$liveTip.hide();
		if (tipTitle) {
			link.title = tipTitle;
		};
	  };
	});
});

该段代码中一次性地将多个事件绑定到一个待处理的DOM对象之上，在代码的内部通过判断事件的类别来委派不同的处理代码。这样可以避免代码的重复定义，以达到避免时间冗余的效果。

以上两种代码的执行后的效果是完全一样的，相信大家一眼就可以看中哪一种代码的执行效率更加的快速吧！

downloaddemo

以上的代码来自：Learning jQuery:Binding Multiple Events to Reduce Redundancy with Event-Delegation Tooltips

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-once-through-the-event-delegate-to-bind-a-variety-of-time-in-order-to-reduce-the-event-of-redundancy/feed 7 jQuery:如何在页面和插件代码中自定义别名 http://www.ihiro.org/how-to-custom-alias-in-plugins-and-page-code http://www.ihiro.org/how-to-custom-alias-in-plugins-and-page-code#comments Tue, 01 Dec 2009 14:03:47 +0000 Hiro http://www.ihiro.org/?p=860

众所周知，jQuery是采用$符号作为库的别名，但若是和其他类型的库一直使用是，其他库也有用$符号作为别名的，这样就会引起函数的冲突。所以更多的时间是建议大家使用jQuery来做为别名，或者自定义别名。该片文章重点地讲述了如何在页面代码和插件代码中自定义别名，以便于其他库的兼容，为之后的插件开发之旅铺垫道路！

1.在页面使用代码中如何自定义别名；

2.在插件代码中如何自定义别名。

]]> 众所周知，jQuery是采用$符号作为库的别名，但若是和其他类型的库一直使用是，其他库也有用$符号作为别名的，这样就会引起函数的冲突。所以更多的时间是建议大家使用jQuery来做为别名，或者自定义别名。该片文章重点地讲述了如何在页面代码和插件代码中自定义别名，以便于其他库的兼容，为之后的插件开发之旅铺垫道路！

1.在页面使用代码中如何自定义别名

通常，我们是这样开始jQuery库的使用的：

1
2
3
4
5
6
7

$(document).ready(function() {
	//一些代码
});
//或者是简写的方式：
$(function() {
	//一些代码
});

但是，若遇到了使用其他非jQuery库的情况，就需要对上面的代码进行改动了，所以兼容性不够好。比较好的方法是将$符号写全（jQuery）：

1
2
3

jQuery(function() {
	//一些代码
});

但是大家或许发现了，这样写的话，以后查找dom、或调用jQuery库中的函数，都需要写jQuery(‘p’)、jQuery.trim()。是否觉得比较麻烦，还是觉得$符号好用呢？

那么为你来介绍如何在页面代码中自定义别名的方法吧。格式如下：

1
2
3
4

jQuery(function(hiro) {
	//在内部我就可以这样使用,来弹出我当前使用浏览器的版本号
    alert(hiro.browser.version);
});

只需要在function中传入一个自定义的参数，该参数就是你的自定义别名了。该别名可以随意地自定义，当然可以使用$符号来自定义了，格式如下：

1
2
3
4

jQuery(function($) {
	//在内部我就可以这样使用,来弹出我当前使用浏览器的版本号
    alert($.browser.version);
});

这样使用的好处是，即使你在引入新的库后，也不会和新库产生冲突。

2.在插件代码中如何自定义别名

插件的实现原理就是将所有的插件代码都写在一个方法体内，然后执行即可。就像这样：

1
2
3
4

(function() {
  // 这里可以写插件的代码
  var xyz; // xyz 不是一个全局变量，他只在该方法体内可以获得
})(); // 该方法会立即执行（这里用到了匿名函数的概念）

这里多余的括号是必须的，因为你若不加括号的话，匿名函数就得不到执行。

那么在插件中自定义别名就很简单了，和在页面中自定义别名类似，格式如下：

1
2
3
4

(function($) {
  // 这里可以写插件的代码
  var xyz; // xyz 不是一个全局变量，他只在该方法体内可以获得
})(jQuery);

在上面的我给方法传入一个jQuery的参数，是因为该方法是对jQuery库的扩展，那么在该方法体内就可以调用jQuery库中的函数；若不传入，则无法调用jQuery库

一个小的插件编写技巧：

在我阅读国外的开发人员编写的插件时，发现很多的插件都会在代码的开始部分加上一个分号，格式如下：

1
2
3
4

;(function($) {
  // 这里可以写插件的代码
  var xyz; // xyz 不是一个全局变量，他只在该方法体内可以获得
})(jQuery);

我猜测这是因为很多的插件在代码的最前面会加上一些版权信息和使用方法的注释信息，加一个分号是为了防止注释结束遗忘吧，也告示着插件代码的开始！(个人猜测，仅供参考！)

具体的代码实现格式和运用可以阅读jQuery.tooltips.js的源代码，他的编写方式比较“正统”！

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/how-to-custom-alias-in-plugins-and-page-code/feed 5 HTML:编写干净的且富有语义的html代码 http://www.ihiro.org/coding-clean-and-rich-semantic-html http://www.ihiro.org/coding-clean-and-rich-semantic-html#comments Mon, 30 Nov 2009 03:44:08 +0000 Hiro http://www.ihiro.org/?p=845

如果你是一个使用div标签做任何事的家伙，那么这篇文章将对你十分有益。该问重点讲述了如何通过使用富有语义的标签和最少的div标记来编写干净的html代码。你是否曾经也试图去修改别人的一些html模板，那么你一定会被代码里那些肮脏的标签所抓狂。编写干净的html代码，不仅对你自己有益，而且对你的团队也有益。他将大大地节约了你的开发与错误调试时间（特别是比较大的一些项目）。

1.尽可能少地使用div标签；
2.使用div标签来控制页面的整体布局，如头部，内容部，侧边栏，底部等；
3.内容必须包含在对应的语义标签内，而不是包含在div内；
4.格式化你的源代码并且在结束标签处给出对应的注释语言。

该文翻译自：WebDesignWall: Coding Clean and Semantic Templates

]]> 如果你是一个使用div标签做任何事的家伙，那么这篇文章将对你十分有益。该问重点讲述了如何通过使用富有语义的标签和最少的div标记来编写干净的html代码。你是否曾经也试图去修改别人的一些html模板，那么你一定会被代码里那些肮脏的标签所抓狂。编写干净的html代码，不仅对你自己有益，而且对你的团队也有益。他将大大地节约了你的开发与错误调试时间（特别是比较大的一些项目）。

1.去除不必要的div标签：

我曾经看到好多的人将form和ul标签都包含在了div标签内。为什么要写一个不必要的标签呢。你可以给适当的选择器赋予css规则，这样也可以达到同样的效果。

例子一：

下面的列子将展示给你如何删除多余的div标签，而将css规则声明给内部的form标签。clean_html_01_div-form

例子二：

有时侯我们会将一些内容用额外的div标签包含起来，其目的是为了严格地控制布局的空隙。在这个例子的左边使用了一个<div class=”box”>来控制两个box之间的外边距margin。但如果每个box内都有一个标题h4，那么我们可以通过h4标签来控制外间距margin，从而可以删除掉多余的<div class=”box”>标签。clean_html_02_div-sidebox

2.使用富有语义的标记：

你必须时刻都使用富有语义的标记来编写html代码（如：h1用作标题，p用作文章段落，ul则用于列表项）。那么，即使你的css文件没有引入或者没有被支持，你的html文档看起来也是富有意义的。

例子：

下面的一张图片比较了使用div标记和使用富有语义的标记编写的一段html代码（没有css代码的支持）在浏览器中编译后的效果。clean_html_03_semantic-markups

3.尽可能地少使用div标签：

你是否看到过一些到处都是div的html文档，它是否让你非常地抓狂？是否你曾忘记关闭一个</div>或者无意添加了一个打开的<div>标签呢？我确定绝大多数的开发者都曾有过这样的经验。所以你需要尽可能少地使用div标签。这样以后的调试和改错的过程就会变得更加容易。

例子一：

用p标签来替代div标签去包含一个面包屑导航。clean_html_04_div-breadcrumb

例子二：

下面的例子展示了如何通过css规则来将两个div标签替换成一个span标签。这两种写法得到的结果是完全一致的。clean_html_05_div-date

4.格式化（缩进）你的代码：

你在开发的过程中始终要格式化你的源代码（如缩进嵌套的标签），这样的可以方便以后的阅读和错误调试。如果你使用Adobe Dreamweaver的话，那么你可以很简单地去格式化源代码。方法：点击“命令”菜单下的“应用源代码”选项即可。clean_html_06_format-code

5.在</div>结束处给出相应的注释：

当你编写一个平台模板(如：Wordpress主题)代码时，这些模板文件会被分割成多个不同的文件：如：index.php, header.php, sidebar.php, 和 footer.php。因此，你必须在</div>结束处给出相应的注释。比如：当我看到</div><!– /wrapper –>时，我就知道这里是<div id=”wrapper”>标签的结束处。clean_html_07_comment-code

总结：

1.尽可能少地使用div标签；
2.使用div标签来控制页面的整体布局，如头部，内容部，侧边栏，底部等；
3.内容必须包含在对应的语义标签内，而不是包含在div内；
4.格式化你的源代码并且在结束标签处给出对应的注释语言。

该文翻译自：WebDesignWall: Coding Clean and Semantic Templates

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/coding-clean-and-rich-semantic-html/feed 13 jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 http://www.ihiro.org/jquery-enhanced-marquee-bulletin-board http://www.ihiro.org/jquery-enhanced-marquee-bulletin-board#comments Thu, 26 Nov 2009 15:30:43 +0000 Hiro http://www.ihiro.org/?p=835

昨天晚上收到的求助邮件，说因上级的要求需要制作一个走马灯效果的公告栏，希望我可以帮助他解决。因看到邮件的时候都快要睡觉了，所以并没有立即处理。

今天早上到了公司，放开手边的工作，花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他，但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候，该同学又发来了邮件，说我的公告栏的效果有点欠缺，现在的效果和marquee标签的效果一样，需要等内容上移完成后才会重复滚动，如果可以连续滚动的话那就完美了。

于是就在刚刚的时间我有花了几分钟的时间给他解决了，mail给他。不知道他是否还会有什么新的要求呢，期待啊！毕竟这对我来说也是一个挑战嘛，同时也帮助到了别人，何乐而不为呢！

]]> 昨天晚上收到的求助邮件，说因上级的要求需要制作一个走马灯效果的公告栏，希望我可以帮助他解决。因看到邮件的时候都快要睡觉了，所以并没有立即处理。

今天早上到了公司，放开手边的工作，花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他，但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候，该同学又发来了邮件，说我的公告栏的效果有点欠缺，现在的效果和marquee标签的效果一样，需要等内容上移完成后才会重复滚动，如果可以连续滚动的话那就完美了。

于是就在刚刚的时间我有花了几分钟的时间给他解决了，mail给他。不知道他是否还会有什么新的要求呢，期待啊！毕竟这对我来说也是一个挑战嘛，同时也帮助到了别人，何乐而不为呢！

因为觉得功能差不多都实现了，所以也共享出来与大家分享，或许会对你有所帮助呢。

downloaddemo

1.Html代码：

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

<div id="container">
    <ul class="noticeList">
        <li><a href="http://www.ihiro.org/wordpress-the-article-automatically-appear-as-two" title="Wordpress:将文章自动显示为两列">Wordpress:将文章自动显示为两列</a></li>
        <li><a href="http://www.ihiro.org/film-2012-really-have-that-day-discovery-channel-expose-for-you" title="电影:《2012》真的有那一天吗？探索频道为你揭露">电影:《2012》真的有那一天吗？探索频道为你揭露</a></li>
        <li><a href="http://www.ihiro.org/information-november-2009-programming-language-list" title="资讯:2009年11月编程语言排行榜">资讯:2009年11月编程语言排行榜</a></li>
        <li><a href="http://www.ihiro.org/a-busy-week-for-rent-a-house-was-finally-gaoding" title="租房:忙碌一周，房子终于搞定">租房:忙碌一周，房子终于搞定</a></li>
        <li><a href="http://www.ihiro.org/my-third-theme-innernews" title="主题:我的第三个主题innerNews提供下载">主题:我的第三个主题innerNews提供下载</a></li>
        <li><a href="http://www.ihiro.org/my-first-plugin-scrolltop" title="插件:我的第一个插件–简约的scrollTop滑动插件">插件:我的第一个插件–简约的scrollTop滑动插件</a></li>
        <li><a href="http://www.ihiro.org/celebrate-my-blog-pr-catapulted-3" title="PageRank:庆贺我的博客PR连升3级">PageRank:庆贺我的博客PR连升3级</a></li>
        <li><a href="http://www.ihiro.org/myeclipse-8-and-registration-number" title="软件:MyEclipse 8.0发布，附注册码">软件:MyEclipse 8.0发布，附注册码</a></li>
        <li><a href="http://www.ihiro.org/tv-leng-jian" title="电视:《冷箭》，让我“失眠”的谍战片">电视:《冷箭》，让我“失眠”的谍战片</a></li>
        <li><a href="http://www.ihiro.org/hd-is-an-attitude" title="下载:高清，是一种态度！">下载:高清，是一种态度！</a></li>
    </ul>
</div>

2.CSS代码：

1
2
3
4
5
6
7
8

* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#666; text-align:center;}
 
#container { width:180px; margin:30px auto; text-align:left; padding:10px; border:1px solid #ccc; height:250px; position:relative; overflow:hidden;}
	.noticeList { width:180px; list-style:inside; position:absolute; top:270px; left:10px;}
	.noticeList li { padding-bottom:5px;}
	.noticeList li a { color:#606060; text-decoration:none;}
	.noticeList li a:hover { color:#09F;}

3.JS代码：（备了部分注释，不懂的可以留言询问。）

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

jQuery(function($) {
	function ScrollAction(listObj, listElem, speed, isSeries) {	//listObj为需要滚动的列表，  speed为滚动速度
		var pos, top, aniTop, height;
		var id = '';  //记录setInterval的标记id
 
		pos = listObj.position();	
		top = pos.top;			//列表的top
		aniTop = top;				//记录当前运动时的top
		height = listObj.height();	//列表的高度
 
		var scrollUp = function() {
			aniTop--;
			if(!isSeries) {	//isSeries变量控制是否连续滚动，false不连续，true连续
				if(aniTop == -height) {	//不连续，滚动玩重新滚动
					listObj.css({'top': top});
					aniTop = top;
				};
			} else {
				if(aniTop == -listObj.children().eq(0).height()) {	//连续滚动
					var firstItem = '< ' + listElem +'>' + listObj.children().eq(0).html() + '< /' + listElem +'>';
					listObj.children().eq(0).remove();
					listObj.append(firstItem);
					aniTop = 4;
				};
			};
			listObj.css({'top': aniTop + 'px'});
		};
 
		var hover = function(id) {
			listObj.hover(function() {
				clearInterval(id);
			}, function() {
				id = setInterval(scrollUp, speed);
			});
		};
 
		this.start = function() {
			id = setInterval(scrollUp, speed);
			hover(id);
		};
 
	};
	var sa = new ScrollAction($('.noticeList'), 'li', 30, true);
	sa.start();
});

使用时别忘了引入jQuery库哦，也希望大家给我提出意见，或功能扩充等要求。

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-enhanced-marquee-bulletin-board/feed 20 Ajax:当前页面更改内容，前端实现 http://www.ihiro.org/ajax-editing-in-placing http://www.ihiro.org/ajax-editing-in-placing#comments Wed, 23 Sep 2009 04:26:22 +0000 Hiro http://www.ihiro.org/?p=677

相信大家有用过Google Doc或Flickr，或者一些SNS社区的图片添加描述信息的效果，他们是在点击了一段文字后出现一个输入框，在输入框内输入你要填写的内容，点击“确认”或者“发表”即可立即显示出来。

今天做的这个效果呢，就是其中的截取版本。为什么这么说呢，因为我的效果只实现了前端的更改后立即发布的效果，而没有实际的与服务器端交互，也没有将输入的内容添加到数据库中，主要是为大家介绍一下实现原理。

注意：源代码中没有jQuery库文件，请下载查看代码的朋友根据源代码路径自行添加。

]]> 相信大家有用过Google Doc或Flickr，或者一些SNS社区的图片添加描述信息的效果，他们是在点击了一段文字后出现一个输入框，在输入框内输入你要填写的内容，点击“确认”或者“发表”即可立即显示出来。

今天做的这个效果呢，就是其中的截取版本。为什么这么说呢，因为我的效果只实现了前端的更改后立即发布的效果，而没有实际的与服务器端交互，也没有将输入的内容添加到数据库中，主要是为大家介绍一下实现原理。

downloaddemo

1.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

<div id="container">
  <h1>Ajax Editing</h1>
  <p>鼠标移动到列表上，双击即可以进行编辑！</p>
  <div class="block">
    <h2>一、电影列表</h2>
    <ul class="editable">
      <li>《建国大业》，<span class="color_red">更新中...</span></li>
      <li><a href="http://www.ihiro.org/film-eternal-beloved">《爱有来生》</a></li>
      <li><a href="http://www.ihiro.org/movie-coco-chanel">《COCO Chanel》</a></li>
      <li><a href="http://www.ihiro.org/one-night-in-supermarket">《夜店》</a></li>
      <li><a href="http://www.ihiro.org/the-legend-of-1900">《海上钢琴师–1900的传说》</a></li>
      <li><a href="http://www.ihiro.org/film-xinsushijian-feedback">《新宿事件》</a></li>
    </ul>
  </div>
  <div class="block">
    <h2>二、书籍列表</h2>
    <ul class="editable">
      <li>《精通Javascript》</li>
      <li>《jQuery基础教程》</li>
      <li>《Flex入门到精通》</li>
      <li>《PHP与MySQL Web开发》</li>
      <li>《Google，你可以做什么》</li>
      <li>《不抱怨的世界》</li>
    </ul>
  </div>
</div>

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

* { margin:0; padding:0;}
body { font:12px/20px Georgia, "Times New Roman", Times, serif; color:#404040;}
 
h2 { font-size:24px;}
 
.color_red { color:#F00;}
 
#container { width:400px; margin:30px auto; overflow:hidden; height:1%;}
 
	/* 标题样式 */
	#container h1 { text-align:center; font:32px "Lucida Sans Unicode", "Lucida Grande", sans-serif; margin-bottom:20px;}
 
	.block { width:180px; float:left; margin:30px 20px 0 0;}
 
	/* 列表li的样式 */
	ul.editable li { padding:10px 0; list-style:none;}
 
	/* 高亮当前编辑的列表li */
	.hover { background:#E8F3FF;}
 
	/* 高亮当前的input输入框 */
	.editInput { width:160px; border:2px solid #E8F3FF; display:block;}
 
 
	/* save和cancel按钮的效果，鼠标移动到上面的效果 */
	.btnSave, .btnCancel { padding:0 5px; border:1px solid #09F; background:#36F; color:#fff; text-decoration:none; margin:10px 0 0 20px;}
	.btnSave:hover, .btnCancel:hover  { border:1px solid #36F; color:#39F; background:#fff;}

3. 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

$(function() {
 
	var oldText, newText;
 
	//鼠标移动到列表li上后，添加一个高亮的背景
	$('.editable li').hover(function() {
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	}).bind('dblclick', function() {
 
		//获得列表li中原先的html代码
		oldText = $(this).html().replace(/"/g, "&quot;");
 
		//将原先的html代码放在一个input中，并追加save和cancel按钮后插入到列表li中
		$(this).html('<input type="text" class="editInput" value="' + oldText +'" /><a href="#" class="btnSave">save</a><a href="#" class="btnCancel">cancel</a>');
	}).children('a').attr('target', '_blank');	//链接在新窗口中打开
 
	//点击save按钮，将新的值插入在列表li中
	$('.btnSave').live('click', function() {
		newText = $(this).siblings('input').val().replace(/"/g, "&quot;");
 
		$(this).parent('li').html(newText);
 
		//设置超链接a的跳转为否
		return false;
	});
 
	//若点击cancel按钮，则将最初的html代码插入在列表li中
	$('.btnCancel').live('click', function() {
		$(this).parent('li').html(oldText);
 
		//设置超链接a的跳转为否
		return false;
	});
 
});

双击列表li后，将原先列表li中的html源码保存在oldText变量中，并且在列表li标签内插入一个input输入框和两个链接作为按钮save和cancel之用；
点击save按钮后，将input中的新的html源码保存在newText变量中，重新插入到列表li中，从而覆盖了列表里中的input源码；
点击cancel按钮，浙江原先的html代码oldText重新插入到列表li中，覆盖掉因双击插入的input输入框和两个链接按钮。

注意：源代码中没有jQuery库文件，请下载查看代码的朋友根据源代码路径自行添加。

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/ajax-editing-in-placing/feed 14 jQuery:两个样式下拉菜单(click hover) http://www.ihiro.org/drop-down-menu http://www.ihiro.org/drop-down-menu#comments Thu, 06 Aug 2009 06:51:18 +0000 Hiro http://www.ihiro.org/?p=367

一直都很喜欢下拉菜单，因为这样可以导航到更多的页面，给访问者一目了然的感觉。

之前在公司的网站上就是用的下拉菜单导航栏的方式进行导航，当时是使用了li:hover的方式通过鼠标移动到li上，显示出li下的ul。而在ie6中则使用javascript修复li:hover。这样做出来是没有动态的效果，下拉菜单一下子就凭空出现了。

运用jQuery库制作下拉菜单的好处就是可以做出各种不同的动态效果，我今天讲解的是运用slideDown()和slideUp()函数实现的卷页效果。

]]> dropdownmenu

一直都很喜欢下拉菜单，因为这样可以导航到更多的页面，给访问者一目了然的感觉。

之前在公司的网站上就是用的下拉菜单导航栏的方式进行导航，当时是使用了li:hover的方式通过鼠标移动到li上，显示出li下的ul。而在ie6中则使用javascript修复li:hover。这样做出来是没有动态的效果，下拉菜单一下子就凭空出现了。

运用jQuery库制作下拉菜单的好处就是可以做出各种不同的动态效果，我今天讲解的是运用slideDown()和slideUp()函数实现的卷页效果。

说明：第一个导航#nav1是点击后出现下拉菜单，而第二个导航#nav2是鼠标移动到上面后出现导航。(样式只为效果，没有美化，望见谅)

DownloadDemo

1.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
35
36
37
38
39
40
41
42
43

<ul class="nav" id="nav1">
    	<li>点击方式下拉菜单:click</li>
    	<li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">技术</a>
        	<ul class="subnav">
            	<li><a href="#">wordpress</a></li>
                <li><a href="#">php</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
        </li>
        <li><a href="#">影视</a>
        	<ul class="subnav">
            	<li><a href="#">电视剧</a></li>
                <li><a href="#">电影</a></li>
                <li><a href="#">舞台剧</a></li>
            </ul>
        </li>
        <li><a href="#">联系</a></li>
    </ul>
 
    <ul class="nav" id="nav2">
    	<li>移动方式下拉菜单:hover</li>
    	<li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">技术</a>
        	<ul class="subnav">
            	<li><a href="#">wordpress</a></li>
                <li><a href="#">php</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
        </li>
        <li><a href="#">影视</a>
        	<ul class="subnav">
            	<li><a href="#">电视剧</a></li>
                <li><a href="#">电影</a></li>
                <li><a href="#">舞台剧</a></li>
            </ul>
        </li>
        <li><a href="#">联系</a></li>
    </ul>

2. CSS源码：

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

* { margin:0; padding:0;}
body { font:14px '宋体';}
li { list-style:none;}
a { text-decoration:none;}
a:hover { text-decoration:underline;}
 
#nav1 { margin-bottom:200px;}
 
.nav { margin:10px auto; width:500px; background:#333; height:35px; padding:0 10px; color:#F60;}
.nav li { float:left; padding-right:10px; text-align:center; position:relative; height:35px; line-height:35px;}
.nav li a { padding:0 10px; height:35px; line-height:35px; display:block; color:#fff; float:left;}
 
.nav li span { float:left; width:17px; height:35px; background:url(subnav_btn.gif) no-repeat center top;}
.nav li span.subhover { background-position:center bottom; cursor:pointer;}
 
ul.subnav { display:none; float:left; position:absolute; top:35px; left:-20px; width:100px; background:#666;}
ul.subnav li { padding:0; clear:both; width:100px;}

3. 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

$(document).ready(function() {
	$('<span></span>').insertBefore($('.subnav'));
 
	//鼠标点击向下箭头
	$('#nav1 li span').hover(function() {
		$(this).addClass('subhover');
		$(this).parent().hover(function() {
		}, function() {
			$(this).parent().find('ul.subnav').slideUp('fast');
		});
	}, function() {
		$(this).removeClass('subhover');
	}).click(function() {
		$(this).parent().find('ul.subnav').slideDown('slow');
	});
 
	// 鼠标移动到含有下拉菜单的li标签上时
	$('#nav2 li').hover(function() {
		$(this).find('span').addClass('subhover').end()
			   .find('ul.subnav').slideDown('slow');
	}, function() {
		$(this).find('span').removeClass('subhover').end()
			   .find('ul.subnav').slideUp('fast');
	});
});

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/drop-down-menu/feed 8