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 插件：Firebug扩展插件FireQuery http://www.ihiro.org/firebug-extension-firequery http://www.ihiro.org/firebug-extension-firequery#comments Fri, 25 Nov 2011 08:21:23 +0000 Hiro http://www.ihiro.org/?p=1701

之前也不知道看了哪篇文章的介绍，在火狐上装了FireQuery插件，一直没去注意它的用途。就只发现在FireBug的HTML Tab下的HTML代码层次上多了些事件代码，可以点击查看对应的绑定事件。最近的一些使用，发现了FireQuery的好处，特别是在测试动态生成DOM以及数据测试上很是方便。

关于FireQuery的简介和安装就不多说了，访问：http://firequery.binaryage.com/。

官方测试页面：http://firequery.binaryage.com/test

]]> 之前也不知道看了哪篇文章的介绍，在火狐上装了FireQuery插件，一直没去注意它的用途。就只发现在FireBug的HTML Tab下的HTML代码层次上多了些事件代码，可以点击查看对应的绑定事件。最近的一些使用，发现了FireQuery的好处，特别是在测试动态生成DOM以及数据测试上很是方便。

关于FireQuery的简介和安装就不多说了，访问：http://firequery.binaryage.com/。

1. 标签绑定事件查看

打开Firebug的HTML Tab，在一些绑定了事件的HTML标签上可以看到一些事件数据：点击后跳转到DOM Tab，可以查看对应的一些信息：

2. 查看jQuery的.data()函数添加的数据

jQuery的.data()函数是用来给HTML上添加数据的，一般用在插件或数据处理上。一般情况下执行了.data()后，无法确认是否给该标签正确地绑定了数据。此时通过FireQuery就可以查看，同样支持点击后跳转到DOM Tab查看，这在给HTML标签绑定一些对象数据时非常实用。

3. 引入jQuery.Lint.js对页面代码测试

在Console Tab的下拉菜单中启用引入，重新刷新页面后会动态地引入jQuery.Lint.js插件，此时对页面中出现的错误进行输出提示。

FireQuery对于前端开发和测试来说绝对是一大助手，更多的好处还是在实际中可以体会出来。

官方测试页面：http://firequery.binaryage.com/test

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/firebug-extension-firequery/feed 2 Git：利用Git同步代码到Github，实现多台电脑的代码同步 http://www.ihiro.org/use-git-synchronize-code-to-github http://www.ihiro.org/use-git-synchronize-code-to-github#comments Tue, 17 May 2011 07:24:21 +0000 Hiro http://www.ihiro.org/?p=1666

这几天工作比较清闲，就花了点时间研究了下Github上控制代码版本的事情。之前就一直想找个可以同步代码的服务，这样公司和电脑上自己研究和学习的那些东西就可以同步起来。只需要更新一下即可，而不像之前一直用U盘或者是Dropbox之类的。Github既实现了版本控制，又能同步，同时还可以分享代码，何乐而不为。

其实Github官方和Git官方都有很详细的教程，一步一步地做下去，都可以实现。我今天主要讲的是非Git安装目录下的代码同步以及使用IntelliJ IDEA软件分享和获取Github上的代码。

]]> 这几天工作比较清闲，就花了点时间研究了下Github上控制代码版本的事情。之前就一直想找个可以同步代码的服务，这样公司和电脑上自己研究和学习的那些东西就可以同步起来。只需要更新一下即可，而不像之前一直用U盘或者是Dropbox之类的。Github既实现了版本控制，又能同步，同时还可以分享代码，何乐而不为。

其实Github官方和Git官方都有很详细的教程，一步一步地做下去，都可以实现。我今天主要讲的是非Git安装目录下的代码同步以及使用IntelliJ IDEA软件分享和获取Github上的代码。

一、通过官方教程搭建环境：

具体的请阅读：http://help.github.com/，更多的Git的代码命名可以阅读：Git Reference。基本上看完这些就对Git有了很大程度上的了解，这时候最还记录一些常用的命名笔记（推荐Evernote,支持多平台同步）。并且教程中也讲解了如何创建仓库、提交仓库的方法，请自行阅读。

装完后其实我纠结了很长的时间，一直找不到虚拟的Home文件夹所在地，后来发现Git在我的电脑中虚拟了一个网络目录： 也正是因为只有一个虚拟的目录，这与我原来自己的目录根本联系不上，才促发了我去找寻自选择目录分享。

Mac OS相关教程：http://help.github.com/mac-set-up-git/

二、自选择目录分享到Github：

其实在没发现前觉得很简单，找了很多命令行都没实现。后来发现只需要在目录中右键即可，在右键的菜单里会多出一些与Git相关的菜单：(截图是已经成功提交过后的菜单的)

  1. 第一次时会有一个”Git init”的菜单，点击后机会在当前目录下创建一个”.git”隐藏文件。
  2. 接着右键选择”Git Add all files now”，它的意思是将所有的文件都添加到Git的提交列表中。
  3. 右键选择”Git commit Tool”菜单，会出现一个对话框： 在左侧会列出你上部选择的所有文件的列表，点击文件还可以查看文件中的代码。在右下角的“提交描述”框内输入该次提交的备注信息后，点击“提交”按钮即可。若未执行第二步的话，看到的界面会是： 而点击”提交“按钮则报错阻止。
  4. 最后一步，右键选择”Git Bash”菜单，在命令行中输入”git push origin master”后回车，等待一段时间后可以看到提交的进度百分数： 结束后即可访问你的Github账户，便可看到上传的代码了。

三、使用IntelliJ IDEA分享、获取Github项目：

首先得在IDEA中配置Git：

  1. 选择菜单”File — Settings”，找到”Version Control — VCSs — Git”：
  2. 在右侧的区域中找到Git的安装目录下的Git.exe执行文件所在地： 只需修改这项，其他可以保持默认。
  3. 配置完成。
    附：查看Git分享列表可以在”Version Control”下：

其次，配置你在Github上注册的账户：

  1. 选择菜单”File — Settings”，找到”IDE Settings — Github”：
  2. 输入域名，账户和密码： 点击”Test”按钮测试连接，若链接成功会提示”Connection successful”。保存完成。

分享Github项目：

  1. 选择菜单”Version Control — Import into Version Control — Share project on Github”：
  2. 等待一段时间的验证和登陆，出现界面： 填写描述信息后，点击”Share”按钮即可。

获取Github项目：

  1. 选择菜单”Version Control — Checkout from Version Control — Github”：
  2. 等待一段时间的验证和登陆，出现界面： 在”Repository”下来列表中既有你自己的项目，也有你在Github网站上”Wacth”的项目，选择后，选择你存放的路径，再输入你想要的项目名称，点击”Clone”按钮，即完成获取过程。

附：若在公司使用IDEA分享或获取Github项目，有可能因为域的问题无法实现，具体原因未做甚久。此时可以通过命名行代替实现。

最热评论文章列表:

]]> http://www.ihiro.org/use-git-synchronize-code-to-github/feed 23 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 CSS:区分IE版本的三个方法 http://www.ihiro.org/css-specific-for-internet-explorer http://www.ihiro.org/css-specific-for-internet-explorer#comments Wed, 02 Mar 2011 02:59:37 +0000 Hiro http://www.ihiro.org/?p=1612

虽然我们从心理上都不愿意去处理IE的bug，但我们不得不面对老板和浏览者们仍然在使用IE。介于不同浏览器有不同的渲染器，这往往会使开发者们感到很沮丧。我们通常使用IE条件判断语言来处理IE的CSS问题，但其实还是有其他的一些方法来处理IE的CSS bug的。

一、IE条件判断语句； 二、CSS规则（IE CSS hacks）； 三、HTML条件判断，给出不同的className。

本文翻译自：CSS Specific for Internet Explorer

]]> 虽然我们从心理上都不愿意去处理IE的bug，但我们不得不面对老板和浏览者们仍然在使用IE。介于不同浏览器有不同的渲染器，这往往会使开发者们感到很沮丧。我们通常使用IE条件判断语言来处理IE的CSS问题，但其实还是有其他的一些方法来处理IE的CSS bug的。

一、IE条件判断语句

IE条件判断语句也许是用的最多的区分IE版本(IE6, IE7, IE8)的办法了。看看下面用来区分IE不同版本的代码：

  • * <!--[if IE 8]> = IE8版本
  • * <!--[if lt IE 8]> = IE7版本以低版本
  • * <!--[if gte IE 8]> = IE8版本及高版本

1
2
3
4
5
6
7
8
9

<!--[if IE 8]>
<style type="text/css">
	/* css for IE 8 */
</style>
< ![endif]-->
 
<!--[if lt IE 8]>
	<link href="ie7.css" rel="stylesheet" type="text/css" />
< ![endif]-->

二、CSS规则（IE CSS hacks）

另一个办法就是在样式文件中声明只有IE识别的CSS规则。比如，在CSS属性前置一个”*”区分IE7和低版本，而前置一个”_”则区分IE6及低版本。但是，很多时候这个方法不被推荐，因为这些CSS规则并不能被W3C CSS 验证成功。

  • * IE8 及 低版本: 在CSS属性后置”\9″, 如 height:1000px\9;
  • * IE7 及 低版本: 在CSS属性前置”*”, 如 *height:1000px;
  • * IE6 及 低版本: 在CSS属性前置”_”, 如 _height:1000px;

1
2
3
4
5
6
7
8
9

.box {
	background: gray; /* standard */
 
	background: pink\9; /* IE 8 and below */
 
	*background: green; /* IE 7 and below */
 
	_background: blue; /* IE 6 */
}

三、HTML条件判断，给出不同的className

第三个办法是由Paul Irish发起的。它实现的办法是通过IE条件判断来给HTML设置不同的className，然后在CSS中通过给不同的className下的后代设置不同的样式即可实现。这个办法比较可行，也不会有任何W3C验证的问题。

1
2
3
4
5
6

<!--[if lt IE 7 ]> <html class="ie6"> < ![endif]-->
<!--[if IE 7 ]> </html><html class="ie7"> < ![endif]-->
<!--[if IE 8 ]> </html><html class="ie8"> < ![endif]-->
<!--[if IE 9 ]> </html><html class="ie9"> < ![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> </html><html> <!--<![endif]-->
</html>

本文翻译自：CSS Specific for Internet Explorer

PS:这三种办法我个人都用过，只是第三中办法我不是给HTML便签设置不同的className,而是在BODY中所有HTML代码的最外层多嵌套了一层DIV。呵呵，想想，还是给HTML或BODY标签设置不同className比较合算。至少不会有多余的标签。

扩展阅读：

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/css-specific-for-internet-explorer/feed 27 Javascript:图片无限循环滚动 http://www.ihiro.org/scroll-images http://www.ihiro.org/scroll-images#comments Thu, 24 Feb 2011 09:21:11 +0000 Hiro http://www.ihiro.org/?p=1604

早前为一位博友写了一个走马灯效果（增强型走马灯公告栏，可以抛弃marquee标签了，点击看效果），但时是基于jQuery库写的。效果实现的优点牵强。而且当时的效果是页面加载完后一片空白，只有开始播放后才从底部出来。

年前用wordpress给公司做内部信息分享平台时，有一块是用来横向无限循环播放展示team building的图片。之前的效果不适合，便又写了一段原生的js来实现。主要实现原理是间隔时间地设置一个overflow:hidden;的div的scrollLeft。

]]> 早前为一位博友写了一个走马灯效果（增强型走马灯公告栏，可以抛弃marquee标签了，点击看效果），但时是基于jQuery库写的。效果实现的优点牵强。而且当时的效果是页面加载完后一片空白，只有开始播放后才从底部出来。

年前用wordpress给公司做内部信息分享平台时，有一块是用来横向无限循环播放展示team building的图片。之前的效果不适合，便又写了一段原生的js来实现。主要实现原理是间隔时间地设置一个overflow:hidden;的div的scrollLeft。

downloaddemo

一、HTML代码：

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

<div id="photo-list">
    <ul id="scroll">
        <li><a href="http://www.ihiro.org/intellij-idea"><img src="http://www.ihiro.org/blog/wp-content/uploads/2011/01/logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/javascript-getweek-by-date"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/12/calendar.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/beginning-python"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/12/beginning-python.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/css-position-hack"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/11/position-logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/text-range"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/11/text-range.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/html5-pro-ebook-recommendations"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/11/Pro_Html5_logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/jquery-plugin-recommended-maphighlight"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/10/maohightlight-logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/jquery-format-extend"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/09/jQuery.format_logo.png" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/information-september-2010-programming-language-list"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/08/2010.08.language-logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/example-selectbox-simulation"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/09/select_logo.png" width="100px" height="100px" alt=""/></a></li>
    </ul>
</div>

使用一个无需列表，通过左浮横向显示。设置容器div的尺寸，超出部分不显示。

二、CSS代码：

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

* { padding:0; margin:0;}
body { text-align:center;}
 
#photo-list {
     /* 3张图片的宽度（包含宽度、padding、border、图片间的留白）
         计算：3*(100+2*2+1*2+9) - 9
         之所以减去9是第三张图片的右边留白
     */
    width:336px;
    /* 图片的宽度（包含高度、padding、border）
        计算：100+2*2+1*2
    */
    height:106px;
    margin:50px auto; overflow:hidden;
    border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}
#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

注释中写明了容器div的尺寸计算方法。页面加载完成后未播放时的效果：

Firebug查看尺寸图：

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

var id = function(el) {
        return document.getElementById(el);
    },
    c = id('photo-list');
if(c) {
    var	ul = id('scroll'),
        lis = ul.getElementsByTagName('li'),
        itemCount = lis.length,
        width = lis[0].offsetWidth, //获得每个img容器的宽度
        marquee = function() {
            c.scrollLeft += 2;
            if(c.scrollLeft % width < = 1){  //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
                ul.appendChild(ul.getElementsByTagName('li')[0]);
                c.scrollLeft = 0;
            };
        },
        speed = 50; //数值越大越慢
 
    ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度
 
    var timer = setInterval(marquee, speed);
    c.onmouseover = function() {
        clearInterval(timer);
    };
    c.onmouseout = function() {
        timer = setInterval(marquee, speed);
    };
};

没有进行封装，只是实现效果。

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/scroll-images/feed 27 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 28 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 jQuery:热区高亮maphighlight插件推荐 http://www.ihiro.org/jquery-plugin-recommended-maphighlight http://www.ihiro.org/jquery-plugin-recommended-maphighlight#comments Thu, 21 Oct 2010 01:36:04 +0000 Hiro http://www.ihiro.org/?p=1543

上月的一个韩国项目，客户要求首页的图片热点区域高亮。开始我的思路是使用div层，效果也实现了，但因为热点区域是不规则形状，而div层却是很规整的原因。结果这个设想被推翻了。

接着我就试图去搜索一些相关全区高亮的资料，结果就让我搜到了maphighlight插件。基于jQeury库，结合了最新的HTML5的Canvas画布标签，通过绘画的方式实现了热点区域的高亮。

因项目还没上线（已结束），所以我的实现效果就不做公布了！

]]> 上月的一个韩国项目，客户要求首页的图片热点区域高亮。开始我的思路是使用div层，效果也实现了，但因为热点区域是不规则形状，而div层却是很规整的原因。结果这个设想被推翻了。

接着我就试图去搜索一些相关全区高亮的资料，结果就让我搜到了maphighlight插件。基于jQeury库，结合了最新的HTML5的Canvas画布标签，通过绘画的方式实现了热点区域的高亮。

因项目还没上线（已结束），所以我的实现效果就不做公布了！

一、原理：

其实maohighlight插件的实现原理很简单，在图片的基础上建立一个同等尺寸的Canvas标签，通过坐标点coords画出不规则的线。关键的技术难点是对Canvas的各个画图方法的了解和应用！

至于精准的选取坐标可以通过Fireworks软件在图片上选取出来，然后将图片另存为Html页面格式，在源代码里即可看到选取的坐标。

二、Demo：

示例截图：

  1. 简单示例
  2. 世界地图
  3. 美国地图
  4. 特性示例

三、文档：

使用很简单，也可以自定义选取色彩等效果，更多请阅读官方文档：http://davidlynch.org/js/maphilight/docs/

四、代码版本：

http://github.com/kemayo/maphilight/

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-plugin-recommended-maphighlight/feed 23 jQuery:数字、字符串格式化扩展 http://www.ihiro.org/jquery-format-extend http://www.ihiro.org/jquery-format-extend#comments Mon, 20 Sep 2010 01:43:26 +0000 Hiro http://www.ihiro.org/?p=1525

前几天的项目中，遇到一个格式化金额的问题，便写了一个通用的jQuery扩展代码，记录下来以便以后再用。同时分享给大家，有需要的随便用。

若有高手觉得写得有效率问题的也可以提出来，学习学习，研究研究。

除了数字外，字符串也可以格式化的，毕竟实现起来原理差不多嘛！可以自定义分隔符、分割长度，最终返回的格式化后的字符串。

]]> 前几天的项目中，遇到一个格式化金额的问题，便写了一个通用的jQuery扩展代码，记录下来以便以后再用。同时分享给大家，有需要的随便用。

若有高手觉得写得有效率问题的也可以提出来，学习学习，研究研究。

除了数字外，字符串也可以格式化的，毕竟实现起来原理差不多嘛！可以自定义分隔符、分割长度，最终返回的格式化后的字符串。

一、jQuery扩展代码

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

;(function($) {
	$.extend({
		format : function(str, step, splitor) {
			str = str.toString();
			var len = str.length;
 
			if(len > step) {
				 var l1 = len%step, 
					 l2 = parseInt(len/step),
					 arr = [],
					 first = str.substr(0, l1);
				 if(first != '') {
					 arr.push(first);
				 };
				 for(var i=0; i<l2 ; i++) {
					 arr.push(str.substr(l1 + i*step, step));									 
				 };
				 str = arr.join(splitor);
			 };
			 return str;
		}
	});
})(jQuery);

二、调用方法

1
2
3
4

jQuery(function() {
	console.log($.format(2000000010, 3, ','));		//result:	2,000,000,010
	console.log($.format('abcdefghijklmnopqrstuvwxyz', 6, '-'));	//result:	ab-cdefgh-ijklmn-opqrst-uvwxyz
});

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-format-extend/feed 31 示例:Selectbox模拟实现效果 http://www.ihiro.org/example-selectbox-simulation http://www.ihiro.org/example-selectbox-simulation#comments Thu, 02 Sep 2010 15:07:01 +0000 Hiro http://www.ihiro.org/?p=1514

很长时间没有更新了，也很久没有做实例分享了。最近比较动荡，也比较忙，所以博客的更新频率也变了。

今天的实例算是很小的了吧，是在之前公司的公司网上做的效果，今天朋友让我扣出来给他。我便做了份，整理了分享出来给大家参考。

近期因新工作需要，在学习XML和XSLT相关的知识，以后也会在博客中记录一些学习笔记！

]]> 很长时间没有更新了，也很久没有做实例分享了。最近比较动荡，也比较忙，所以博客的更新频率也变了。

今天的实例算是很小的了吧，是在之前公司的公司网上做的效果，今天朋友让我扣出来给他。我便做了份，整理了分享出来给大家参考。

近期因新工作需要，在学习XML和XSLT相关的知识，以后也会在博客中记录一些学习笔记！

download demo

一、HTML代码：

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

<div id="selectBox">
    <div id="cats_seltor"><span>全部</span><em></em></div>
    <dl id="cats_lks">
        <dd><a href="#all_svys">全部</a></dd>
        <dd><a href="#social_svys">社会</a></dd>
        <dd><a href="#emotion_svys">情感</a></dd>
        <dd><a href="#product_svys">产品</a></dd>
        <dd><a href="#happiness_svys">开心</a></dd>
        <dd><a href="#literary_svys">文体</a></dd>
        <dd><a href="#finance_svys">财经</a></dd>
        <dd><a href="#tech_svys">科技</a></dd>
        <dd><a href="#point_svys">点子俱乐部</a></dd>
    </dl>
</div>

二、CSS代码：

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

* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#333;}
a { text-decoration:none;}
#selectBox { margin:100px; position:relative; width:116px;}
#cats_seltor { height:22px; cursor:pointer;}
#cats_seltor span, #cats_seltor em { float:left; display:block;}
#cats_seltor span { border:1px solid #d4d5d8; width:74px; height:20px; line-height:20px; border-right:none; padding:0 10px; color:#f60; overflow:hidden;}
#cats_seltor em { width:20px; height:22px; background:url(arrow.png) no-repeat;}
#cats_seltor em.down { background-position:0 -30px;}
#cats_lks { width:114px; border:1px solid #d4d5d8; border-top:none; position:absolute; top:22px; left:0; background:#fff; display:none; z-index:10;}
#cats_lks dd { padding:2px 6px;}
#cats_lks dd a { color:#666; display:block; padding:1px 4px;}
#cats_lks dd a:hover { color:#fff; background:#f60;}

三、jQuery代码：

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

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
	$('#cats_seltor').click(function() {
		$('em', this).toggleClass('down');
		$('#cats_lks').toggle();
	});
 
	$('#cats_lks a').click(function() {
		var _text = $(this).text();
 
		$('#cats_lks').hide();
		$('#cats_seltor').find('span').text(_text)
					.end().find('em').removeClass('down');
		return false;
	});
});
</script>

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/example-selectbox-simulation/feed 22 Sizzle:开源JS选择器，如何自定义选择器 http://www.ihiro.org/sizzle-custom-selector http://www.ihiro.org/sizzle-custom-selector#comments Thu, 12 Aug 2010 03:12:32 +0000 Hiro http://www.ihiro.org/?p=1500

早上看了百度泛用户体验博客的博文初探 jQuery 的 Sizzle 选择器，让我对Sizzle选择器的知识又更加地深入了解。之前我就知道jQuery中有一个开源的Sizzle选择器程序，可以独立于jQuery单独使用。而在jQuery中使用到的各种强大的选择器都是通过Sizzle来解析返回值的。

Sizzle代码及注册; ':header'的用处; 如何自定义选择器; Sizzle选择器流程图

John很强大，感谢他让我学习到如此美妙和优雅的代码。

]]> 早上看了百度泛用户体验博客的博文初探 jQuery 的 Sizzle 选择器，让我对Sizzle选择器的知识又更加地深入了解。之前我就知道jQuery中有一个开源的Sizzle选择器程序，可以独立于jQuery单独使用。而在jQuery中使用到的各种强大的选择器都是通过Sizzle来解析返回值的。

一、Sizzle代码及注册：

在jQuery1.42版本中，Sizzle代码位于 2624行 至 3688行。相比单独的Sizzle.js，在jQuery框架中多了几行代码，将Sizzle注册到jQuery中：

单独的Sizzle.js可以到Github:http://github.com/jeresig/sizzle/blob/master/sizzle.js查看。

二、’:header’的用处：

就在我阅读Sizzle.js的源代码时，发现了’:header’选择器，代码如下（位于3132-3134行）：

1
2
3

		header: function(elem){
			return /h\d/i.test( elem.nodeName );
		}

这个选择器在正常的CHM API文档中没有给出，估计大家也很少用到过（我自己就没用过）。它的用处是匹配（h1-h6)标题标签，知道有这个选择器了，以后工作中也要多多应用才是。

使用方法：

1

		$(':header').css('...', '...');

更多’:header’相关请阅读：http://api.jquery.com/header-selector/

三、如何自定义选择器：

Sizzle中给出了很多的选择器，那么我们也可以自己定义自己所需的选择器，代码如下：

html实例代码：

1
2
3

    <div id="box">
    	<span>找到我</span>
    </div>
1
2
3
4
5
6
7
8
9

	jQuery(function($) {
		$.extend($.expr[':'], {
			hasSpan : function(e) {
				return $(e).find('span').length > 0;
			}
		});
 
		alert($('#box:hasSpan').html());   //输出：<span>找到我</span>
	});

四、附上百度博客的Sizzle选择器流程图：

点击查看大图：

John很强大，感谢他让我学习到如此美妙和优雅的代码。

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/sizzle-custom-selector/feed 31 Firebug:Javascript测试利器，Console面板函数详解 http://www.ihiro.org/firebug-console-panel-function http://www.ihiro.org/firebug-console-panel-function#comments Wed, 30 Jun 2010 06:22:34 +0000 Hiro http://www.ihiro.org/?p=1472

从开始做前端时，一直在用火狐浏览器，之前也有文章介绍了一些火狐插件。今天重点来说说Firebug插件中的Console面板的功能，它可以辅助地完成Javascript性能测试和代码执行记录。

Console面板中自身含有多个可供使用的函数，诸如：console.log(),console.time()等一些常用的方法，我的想法是将这些函数写入在jQuery插件中，这样在项目的前端开发和测试阶段使用起来非常地方便。

代码执行后的效果需要打开Console面板后才可以看到，若出现错误提示，不要惊慌，那是因为使用console.error()方法抛出错误所致，页面的代码并没有出错！

]]> 从开始做前端时，一直在用火狐浏览器，之前也有文章介绍了一些火狐插件。今天重点来说说Firebug插件中的Console面板的功能，它可以辅助地完成Javascript性能测试和代码执行记录。

Console面板中自身含有多个可供使用的函数，诸如：console.log(),console.time()等一些常用的方法，我的想法是将这些函数写入在jQuery插件中，这样在项目的前端开发和测试阶段使用起来非常地方便。

代码执行后的效果需要打开Console面板后才可以看到，若出现错误提示，不要惊慌，那是因为使用console.error()方法抛出错误所致，页面的代码并没有出错！

download demo

下面的代码是将Console面板中的大部分比较常用的函数扩展到jQuery的fn对象中，作为一个插件，它的实现原理和使用都很方便。

一、插件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

	jQuery(function($) {
		$.fn.extend({
			log : function(typeIndex, msg) {
				switch(typeIndex) {
					case 0:
						console.log(msg);
						break;
					case 1:
						console.debug(msg);
						break;
					case 2:
						console.info(msg);
						break;
					case 3:
						console.warn(msg);
						break;
					case 4:
						console.error(msg);
						break;
				};
			}, 
 
			timer : function(type, mark) {
				if(type == 'start') {
					console.time(mark);
				} else if(type == 'end') {
					console.timeEnd(mark);
				};
			},
 
			trace : function() {
				console.trace();
			},
 
			group : function(type) {
				if(type == 'start') {
					console.group();
				} else if(type == 'end') {
					console.groupEnd();
				};
			},
 
			count : function(title) {
				console.count(title);
			},
 
			dir : function(object) {
				console.dir(object);
			},
 
			profile : function(type, title) {
				if(type == 'start') {
					console.profile(title);
				} else if(type == 'end') {
					console.profileEnd();
				};
			}
		});
	});

二、测试页的Html代码：

1

<div id="demo"></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

	jQuery(function($) {
		var $container = $('#demo');
 
		$container.profile('start', 'LoopAnchor');	//性能测试开始
		$container.timer('start', 'Loop');			//代码执行计时开始
 
		for(var i = 0; i< =1000; i++) {
			$container.html($container.html()+i+', ');
			$container.count('Loop count:');
			if(i%100 == 0) {
				$container.group('start');						//分组开始
				var index = Math.round(Math.random()*5);		//根据不同序号，给出不同的记录方式	
				$container.log(index, '<i%100==0>: i='+i);
				$container.trace();								//追踪执行过程
				$container.group('end');						//分组结束
			};
		};
 
		$container.timer('end', 'Loop');			//代码执行计时结束
		$container.profile('end');					//性能测试结束
 
		$container.log(0, '\n\rDir $.fn对象:');
		$container.dir($.fn);			//列出jquery中fn对象的所有方法和属性
	});

下载源压缩包的，记得引入jQuery库哦！

附上Console面板函数列表图片一张：

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/firebug-console-panel-function/feed 4 CSS:Firefox 4 将支持CSS3 calc方法 http://www.ihiro.org/firefox-4-will-support-css3-calc-method http://www.ihiro.org/firefox-4-will-support-css3-calc-method#comments Sat, 12 Jun 2010 02:19:01 +0000 Hiro http://www.ihiro.org/?p=1467

该文是用来讲解CSS3中calc()方法，这一功能特性在Firefox之前的任何版本中都没曾集成，但在Firefox4版本中它将得以实现。

Firefox将支持CSS3 calc()，它通过一个算术表达式用来计算出一个长度值。这就意味着你可以用它来定义DIVs的大小，margins的值，borders的宽度，等等。

一个重要的特性是：在calc()方法的算术表达式中可以联合多个不同的单位进行计算；calc()方法支持+, -, *, /, mod, min, 和 max 运算符。

资料参考来自：http://hacks.mozilla.org/2010/06/css3-calc/ | http://www.w3.org/TR/css3-values/#calc

]]> 该文是用来讲解CSS3中calc()方法，这一功能特性在Firefox之前的任何版本中都没曾集成，但在Firefox4版本中它将得以实现。

Firefox将支持CSS3 calc()，它通过一个算术表达式用来计算出一个长度值。这就意味着你可以用它来定义DIVs的大小，margins的值，borders的宽度，等等。

一、calc()

例子一：下面的例子用来展示一个棘手的布局问题，通过CSS3 calc()可以轻松实现：

1
2
3
4
5
6
7
8
9
10

/*
* 两个DIVs对准，外间距为1em
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}

不使用calc()的话，若通过百分比来控制宽度，并希望有1em外间距时，是无法实现的。当我们使用到外间距是，必须用页面宽度减去两个DIVs的宽度，这样的话就不够灵活了。

例子二：通过calc()计算以保证一个input框的宽度不会超出其父标签的宽度：

1
2
3
4
5
6

input {
  padding:2px;
  border:1px solid black;
  display:block;
  width: -moz-calc(100% - 2 * 3px);
}

一个重要的特性是：在calc()方法的算术表达式中可以联合多个不同的单位进行计算：

1

width: -moz-calc(3px + 50%/3 - 3em + 1rem);

calc()方法支持+, -, *, /, mod, min, 和 max 运算符。

二、min() | max()

另外：Firefox4将也支持min() 和 max()方法，使用如下：

1
2
3
4

div {
  height: -moz-min(36pt, 2em);
  width: -moz-max(50%, 18px);
}

资料参考来自：http://hacks.mozilla.org/2010/06/css3-calc/ | http://www.w3.org/TR/css3-values/#calc

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/firefox-4-will-support-css3-calc-method/feed 18 CSS:通过一个样式表区分IE的各个版本 http://www.ihiro.org/target-every-version-of-ie-from-a-single-stylesheet http://www.ihiro.org/target-every-version-of-ie-from-a-single-stylesheet#comments Mon, 17 May 2010 07:47:40 +0000 Hiro http://www.ihiro.org/?p=1430

通常我们知道为了修复IE各个版本与其他浏览器的兼容，在head标签内会添加条件判断，根据不同的判断结果联入不同版本的CSS样式表。

这样的方法在我所有的网站或者博客中都是如此应用，但我也一直在纠结着多出了多余的样式表文件，HTTP请求也就多了一个。这对于我这个做前端的是一个严重的问题，但一直都没有找到可以优化的方法。

但是今天我看到了一篇文章，他教会了我另一种条件判断的方法。可以用条件判断的结果来添加多余的包含标签。同时也发现，自己思考的太少了。

]]> 通常我们知道为了修复IE各个版本与其他浏览器的兼容，在head标签内会添加条件判断，根据不同的判断结果联入不同版本的CSS样式表。如下：

1
2
3

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" />< ![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" />< ![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8.css" />< ![endif]-->

这样的方法在我所有的网站或者博客中都是如此应用，但我也一直在纠结着多出了多余的样式表文件，HTTP请求也就多了一个。这对于我这个做前端的是一个严重的问题，但一直都没有找到可以优化的方法。

但是今天我看到了一篇文章，他教会了我另一种条件判断的方法。可以用条件判断的结果来添加多余的包含标签。同时也发现，自己思考的太少了。实现方法如下：

1
2
3
4
5
6
7
8
9
10
11

<!--[if IE 6]>
	<div id="ie6">
< ![endif]-->
		<div id="content">
			<div id="main"></div>
			<div id="sidebar"></div>
		</div>
		<div id="footer"></div>
<!--[if IE 6]>
	</div>
< ![endif]-->

通过这样的方法，我只需要一个样式表文件，然后在样式表中通过子选择器的方法来给出相应版本的css样式控制。如下：

1
2

#main {background: white;}
#ie6 #main {background: black;}

是不是你看到了也觉得惊奇呢，我就在感慨我怎么之前没有看到过这样的技巧文章了，发现原来该博主今天才更新了该文。我实在太幸运了，在我的新版主题里，我将采用这种区别IE版本的方法来控制css样式。

追加一个Demo页面，大家可以通过IETester查看，不同版本下，样式是不一样的。

download demo

Demo的css样式：

1
2
3
4
5
6

* { margin:0; padding:0;}
body { font:24px Tahoma, Geneva, sans-serif; color:#666;}
#main { margin:30px auto; width:400px; height:100px; line-height:100px; border:1px solid #ccc; background:#eee; text-align:center;}
#ie8 #main { color:#f00; border-color:#f60; background:#9FF;}
#ie7 #main { color:#36F; border-color:#009; background:#F0F;}
#ie6 #main { color:#f60; border-color:#090; background:#FFC;}

Demo的Html源码：

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

<!--[if IE 8]>
	<div id="ie8">
< ![endif]-->
<!--[if IE 7]>
	<div id="ie7">
< ![endif]-->
<!--[if IE 6]>
	<div id="ie6">
< ![endif]-->
 
	<div id="main">Target-IE-Version</div>
 
<!--[if IE 6]>
	</div>
< ![endif]-->
<!--[if IE 7]>
	</div>
< ![endif]-->
<!--[if IE 8]>
	</div>
< ![endif]-->

该技巧学习自文章：Target Every Version of IE from a Single Stylesheet

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/target-every-version-of-ie-from-a-single-stylesheet/feed 11 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:丰富效果的Flash图片播放（JS重写版） http://www.ihiro.org/a-rich-picture-effect-flash http://www.ihiro.org/a-rich-picture-effect-flash#comments Fri, 26 Feb 2010 07:17:13 +0000 Hiro http://www.ihiro.org/?p=1129

大家看到这个图片播放效果的演示后一定觉得很熟悉吧，因为该效果使用的地方是在太多了。但凡比较大型的网站上都有图片播放的效果，有的是单一的图片切换、有的是图片渐入渐出、还有的就是左滑右滑。而我演示的这个版本则是播放效果比较丰富的，所以也是使用比较广泛的。

在以前的公司一个人做网站时我就曾将它作为公司网站首页的图片播放效果，那个时候我的Js不好，纯粹是拿了代码后套进内容，然后放到网上去就万事OK了。现在不一样了，JS编程熟悉了，jQuery库更是熟悉，便觉得原始的代码怎么看都不爽，昨天终于将该效果的JS代码重写了一下，贴出来与大家分享！

]]> 大家看到这个图片播放效果的演示后一定觉得很熟悉吧，因为该效果使用的地方是在太多了。但凡比较大型的网站上都有图片播放的效果，有的是单一的图片切换、有的是图片渐入渐出、还有的就是左滑右滑。而我演示的这个版本则是播放效果比较丰富的，所以也是使用比较广泛的。

在以前的公司一个人做网站时我就曾将它作为公司网站首页的图片播放效果，那个时候我的Js不好，纯粹是拿了代码后套进内容，然后放到网上去就万事OK了。现在不一样了，JS编程熟悉了，jQuery库更是熟悉，便觉得原始的代码怎么看都不爽，昨天终于将该效果的JS代码重写了一下，贴出来与大家分享！

先来看看重写后的播放效果吧！

download demo

一、下载后的初始Html代码和JS代码：

Html代码(在需要显示图片播放的代码处添加)：

1

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

flashImgPlay.js中的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

var pic_width=480; 
var pic_height=166; 
var button_pos=3; 
var stop_time=3000; 
var show_text=0; 
var txtcolor="000000"; 
var bgcolor="DDDDDD"; 
var imag=new Array();
var link=new Array();
var text=new Array();
imag[1]="images/pics/news09-col-manual.jpg";
link[1]="news/coll-manual.php";
imag[2]="images/pics/news02.jpg";
link[2]="news/mid_school.php";
 
var swf_height=(show_text==1)?pic_height+20:pic_height;
var pics="", links="", texts="";
for(var i=1; i<imag .length; i++){
	pics=pics+("|"+imag[i]);
	links=links+("|"+link[i]);
	texts=texts+("|"+text[i]);
}
pics=pics.substring(1);
links=links.substring(1);
texts=texts.substring(1);
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ pic_width +'" height="'+ swf_height +'">');
document.write('<param name="movie" value="flash/focus.swf">');
document.write('</param><param name="quality" value="high"></param><param name="wmode" value="opaque">');
document.write('</param><param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'">');
document.write('<embed src="flash/focus.swf" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('');
</param></imag>

二、重写后的Html代码、Css代码以及JS代码：

Html代码(在需要显示图片播放的代码处添加)：

1
2
3
4
5
6
7
8

<div class="flash">
    <ul>
        <li class="first"><a href="#" target="_blank"><img src="1.jpg" alt="banner1" /></a></li>
        <li><a href="#" target="_blank"><img src="2.jpg" alt="banner2" /></a></li>
        <li><a href="#" target="_blank"><img src="3.jpg" alt="banner3" /></a></li>
        <li><a href="#" target="_blank"><img src="4.jpg" alt="banner4" /></a></li>
    </ul>
</div>

需要用到的Css代码：

1
2
3
4
5
6

* { margin:0; padding:0;}
body { text-align:center;}
img { border:none;}
.flash { width:500px; text-align:left; margin:50px auto;}
.flash li { list-style:none; display:none;}
.flash li.first { display:block;}

flashImgPlay.js中的Javascript代码（插件方式）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

;(function($) {
	$.fn.extend({
		flashImgPlay : function(options) {
			return this.each(function() {
				var defaults = $.extend({
					width : $('img:first', this).width(),
					height : $('img:first', this).height(),
					btn_pos : 3,
					stop_time : 3000,
					show_text : 0,
					txtcolor : '000000',
					bgcolor : 'dddddd',
					flash_src : 'focus.swf'
				}, options);
 
				var images = {
					imgs : [],
					links : [],
					texts : []
				};
 
				$('a', this).each(function() {
					images.imgs.push($('img', this).attr('src'));
					images.links.push($(this).attr('href'));
					images.texts.push($('img', this).attr('alt'));
				});
 
				var swf_height = (defaults.show_text == 1) ? (defaults.height + 20) : defaults.height,
					pics = '', links = '', texts = '';
 
				for(var i = 0, length = images.imgs.length; i < length; i++) {
					pics += '|' + images.imgs[i];
					links += '|' + images.links[i];
					texts += '|' + images.texts[i];
				};
				pics = pics.substring(1),
				links = links.substring(1),
				texts = texts.substring(1);
 
				$(this).html(
					'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ defaults.width +'" height="'+ swf_height +'">' +
						'<param name="movie" value="'+defaults.flash_src+'">' +
						'</param><param name="quality" value="high"></param><param name="wmode" value="opaque">' +
						'</param><param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+defaults.width+'&pic_height='+defaults.height+'&show_text='+defaults.show_text+'&txtcolor='+defaults.txtcolor+'&bgcolor='+defaults.bgcolor+'&button_pos='+defaults.btn_pos+'&stop_time='+defaults.stop_time+'">' +
						'<embed src="'+defaults.flash_src+'" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+defaults.width+'&pic_height='+defaults.height+'&show_text='+defaults.show_text+'&txtcolor='+defaults.txtcolor+'&bgcolor='+defaults.bgcolor+'&button_pos='+defaults.btn_pos+'&stop_time='+defaults.stop_time+'" quality="high" width="'+ defaults.width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />' +
					''
				);
			});
		}
	});
})(jQuery);
</param>

调用方法：

1
2
3
4

jQuery(function($) {
	$('.flash').flashImgPlay();
	//$('.flash').flashImgPlay({stop_time:200, show_text:1}); 自行设置播放间隔、是否显示图片标题  
});

三、重写前后的比较说明：

原始代码使用需要在Html代码内嵌入js文件，若一个页面中需要多个图片播放的话（大型网站上常有），就需要创建多个JS文件，并在一个页面中多次引入JS文件嵌套到Html代码内。这严重违背了三层分离的原则。重写后的插件版，只需在文档底部引入一次JS文件，通过方法调用就可以实现一个页面中多个图片播放效果。新代码是自识别图片的大小，从而实现自适应效果。

不过貌似该效果使用到的foucs.swf的as代码中没有支持.gif格式的图片（这也是我多花了半个小时来调试），又因我暂时还不太会AS编程，所以没对focus.swf进行修改。所以大家使用时图片需采用.jpg格式。另外貌似若设置show_text:1的话，就是显示图片的标题，默认的第一个是现实原作者的版权链接。这些只是对该foucs.swf的bug的说明！

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/a-rich-picture-effect-flash/feed 18 Javascript:新消息闪烁标题提示代码分享 http://www.ihiro.org/javascript-news-flash-header-tips http://www.ihiro.org/javascript-news-flash-header-tips#comments Wed, 24 Feb 2010 07:04:25 +0000 Hiro http://www.ihiro.org/javascript-news-flash-header-tips

本文纯粹是贴出一些比较实用的代码出来供大家学习和使用，也算是个人博客对这些实用代码的记录和收集吧！有用到的可以参考，没用到的直接可以飘过！

特意将这些代码写成jQuery插件的格式，这样方便大家使用的时候调用。我在平时的开发和自我学习过程中也积累了不少有用的代码，不知道怎么概括性地发布出来，所以就已文章的形式陆续贴出来与大家分享。

以单篇文章发布的插件代码都是一些简单的代码，若是一些复杂的代码或插件我会归纳到插件专区里去，这样大家下载起来也方便！

]]> 本文纯粹是贴出一些比较实用的代码出来供大家学习和使用，也算是个人博客对这些实用代码的记录和收集吧！有用到的可以参考，没用到的直接可以飘过！

特意将这些代码写成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

;(function($) {
 
	$.extend({
		/**
		 * 调用方法： var timerArr = $.blinkTitle.show();
		 *			$.blinkTitle.clear(timerArr);
		 */
		blinkTitle : {
			show : function() {	//有新消息时在title处闪烁提示
				var step=0, _title = document.title;
 
				var timer = setInterval(function() {
					step++;
					if (step==3) {step=1};
					if (step==1) {document.title='【　　　】'+_title};
					if (step==2) {document.title='【新消息】'+_title};
				}, 500);
 
				return [timer, _title];
			},
 
			/**
			 * @param timerArr[0], timer标记
			 * @param timerArr[1], 初始的title文本内容
			 */
			clear : function(timerArr) {	//去除闪烁提示，恢复初始title文本
				if(timerArr) {
					clearInterval(timerArr[0]);	
					document.title = timerArr[1];
				};
			}
		}
	});
})(jQuery);

注意其中调用方法中的timerArr变量，若你在前面调用代码显示了效果，在页面的后面代码中需要清楚该闪烁效果的话，需要注意timerArr变量的作用域。若只是出现效果而无需清楚，则可以直接调用$.hiro.blinkNews.show()

二、调用方法

1
2
3
4
5
6
7
8
9

jQuery(function($) {
	var timerArr = $.blinkTitle.show();
 
	setTimeout(function() {		//此处是过一定时间后自动消失
		$.blinkTitle.clear(timerArr);
	}, 10000);
 
	//若人为操作消失，只需如此调用：	$.blinkTitle.clear(timerArr);
});

downloaddemo

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/javascript-news-flash-header-tips/feed 7 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 插件:我的第一个插件–简约的scrollTop滑动插件 http://www.ihiro.org/my-first-plugin-scrolltop http://www.ihiro.org/my-first-plugin-scrolltop#comments Mon, 02 Nov 2009 14:04:09 +0000 Hiro http://www.ihiro.org/?p=750

周末无事，便写了一个简约的scrollTop插件。在前面的文章（jQuery:Scrolltop滑动插件推荐（修正注释版））中，我曾介绍过一款我在网络收集的相关插件。但发现该作者的代码确实很繁琐，不是很优雅。而我的该scrollTop插件代码就那么十多行，代码非常简单，也非常实用，适合大众使用！

这也是算是我的jQuery插件开发之旅的开端吧，以后一有机会我就会陆续开发一些自己的插件，也尽量写一些简约的插件与大家分享。也希望有这方面的朋友可以多多交流。话不多说，上插件！

该插件的好处是无需在html源文件的头部添加任何标签，只需调用方法即可实现效果！

]]> 周末无事，便写了一个简约的scrollTop插件。在前面的文章（jQuery:Scrolltop滑动插件推荐（修正注释版））中，我曾介绍过一款我在网络收集的相关插件。但发现该作者的代码确实很繁琐，不是很优雅。而我的该scrollTop插件代码就那么十多行，代码非常简单，也非常实用，适合大众使用！

这也是算是我的jQuery插件开发之旅的开端吧，以后一有机会我就会陆续开发一些自己的插件，也尽量写一些简约的插件与大家分享。也希望有这方面的朋友可以多多交流。话不多说，上插件！

downloaddemo

插件代码：

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

jQuery.fn.extend({
 
	scrollTop: function(params) {
 
		// 给出默认的参数值
		// 默认情况下，不传参数，没有滑动效果：scrollAnimation = false
		// 若只传一个参数scrollAnimation: true,则默认的速度是500
		var scrollAnimation = false, speed = 500;
 
		if(params != null) {
			scrollAnimation = params.scrollAnimation;
			speed = params.speed;
 
			if(speed == null || speed == 'normal') {
				speed = 500;
			} else if(speed == 'fast') {
				speed = 200;
			} else if(speed == 'slow') {
				speed = 2000;
			};
		};
 
		this.click(function() {
			if(!scrollAnimation) {
				window.scrollTo(0, 0);
			} else {
				$('html, body').animate({scrollTop: '0'}, speed);
			};
 
			return false;
		});
	}
 
});

参数说明：

1. scrollAnimation 为布尔型， 控制是否需要动态滑动， 可选值：ture、false
2. speed 控制滑动速度，只有scrollAnimation设置为true时才起到作用， 可选值：slow、normal、fast、任意数字

使用方法：(假设有html文档中一个class为top的标签)

1. 直接跳到顶部:
$(‘.top’).scrollTop();

2. 以默认的速度滑行到顶部:
$(‘.top’).scrollTop({‘scrollAnimation’: ‘true’});
或 $(‘.top’).scrollTop({‘scrollAnimation’: ‘true’, ‘speed’: ‘normal’});

3. 自定义速度滑行到顶部：可选值：slow、fast、任意数字
$(‘.top’).scrollTop({‘scrollAnimation’: ‘true’, ‘speed’: ‘slow’}); 移动到顶部的时间为2000毫秒
$(‘.top’).scrollTop({‘scrollAnimation’: ‘true’, ‘speed’: ‘fast’}); 移动到顶部的时间为200毫秒
$(‘.top’).scrollTop({‘scrollAnimation’: ‘true’, ‘speed’: ’1000′}); 移动到顶部的时间为1000毫秒

总结：

该插件的好处是无需在html源文件的头部添加任何标签，只需调用方法即可实现效果！

另外，jQuery库请使用者自行根据路径添加…

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/my-first-plugin-scrolltop/feed 23 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 XPath:语法及示例，前端学习收集 http://www.ihiro.org/xpath-syntax-and-example http://www.ihiro.org/xpath-syntax-and-example#comments Mon, 21 Sep 2009 03:33:02 +0000 Hiro http://www.ihiro.org/?p=652

昨晚在看《精通Javascript》这本书时，看到XPath的部分内容，觉得学到的不是很多。在之前我就只知道Xpath是Xml相关的，Xpath在xml中的作用就像css中的选择器一样的作用，但具体的语法什么的都没有去关注过。于是今天一早在W3C School看收集了一些XPath相关的知识，与大家分享一下！

“XPath 使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。”

更多的XPath资料请访问:http://www.w3school.com.cn/xpath/index.asp

]]> 昨晚在看《精通Javascript》这本书时，看到XPath的部分内容，觉得学到的不是很多。在之前我就只知道Xpath是Xml相关的，Xpath在xml中的作用就像css中的选择器一样的作用，但具体的语法什么的都没有去关注过。于是今天一早在W3C School看收集了一些XPath相关的知识，与大家分享一下！

XPath 使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。

XML 实例文档

将在下面的例子中使用这个 XML 文档。

1
2
3
4
5
6
7
8
9
10
11

< ?xml version="1.0" encoding="ISO-8859-1"?>
<bookstore>
<book>
  <title lang="eng">Harry Potter</title>
  <price>29.99</price>
</book>
<book>
  <title lang="eng">Learning XML</title>
  <price>39.95</price>
</book>
</bookstore>

一、选取节点

XPath 使用路径表达式在 XML 文档中选取节点。节点是通过沿着路径或者 step 来选取的。
下面列出了最有用的路径表达式：
XPath-01
实例
在下面的表格中，我们已列出了一些路径表达式以及表达式的结果：
XPath-02

二、谓语（Predicates）

谓语用来查找某个特定的节点或者包含某个指定的值的节点。谓语被嵌在方括号中。
实例
在下面的表格中，我们列出了带有谓语的一些路径表达式，以及表达式的结果：
XPath-03

三、选取未知节点

XPath 通配符可用来选取未知的 XML 元素。
XPath-04
实例
在下面的表格中，我们列出了一些路径表达式，以及这些表达式的结果：
XPath-05

四、选取若干路径

通过在路径表达式中使用“|”运算符，您可以选取若干个路径。
实例
在下面的表格中，我们列出了一些路径表达式，以及这些表达式的结果：
XPath-06

五、XPath 轴

轴可定义某个相对于当前节点的节点集。
XPath-07

六、位置路径表达式

位置路径可以是绝对的，也可以是相对的。
绝对路径起始于正斜杠( / )，而相对路径不会这样。在两种情况中，位置路径均包括一个或多个步，每个步均被斜杠分割：

绝对位置路径：/step/step/…
相对位置路径：step/step/…
每个步均根据当前节点集之中的节点来进行计算。

步（step）包括：
轴（axis）: 定义所选节点与当前节点之间的树关系
节点测试（node-test）: 识别某个轴内部的节点
零个或者更多谓语（predicate）: 更深入地提炼所选的节点集

步的语法：轴名称::节点测试[谓语]
实例
XPath-08

该文来自网络收集，仅供学习之用！更多的XPath资料请访问:http://www.w3school.com.cn/xpath/index.asp

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/xpath-syntax-and-example/feed 12 Javascript:面向对象之静态、公有、私有、特权对象 http://www.ihiro.org/javascript-oop http://www.ihiro.org/javascript-oop#comments Thu, 10 Sep 2009 01:39:35 +0000 Hiro http://www.ihiro.org/?p=556

虽然我对jQuery库的应用比较熟悉，但对他的内部实现机制还是有许多懵懂之处。于是乎，近日开始学习Javascript面向对象编程。在此学习过程中，会整理一些笔记发布在我的博客上，也提供给和我一样不理解Javascript面向对象编程的朋友一些小小的帮助。

今天就对面向对象编程的几个对象类型做一个实例总结。

1. 静态对象；    2. 公有对象；    3. 私有对象、特权对象。

]]> 虽然我对jQuery库的应用比较熟悉，但对他的内部实现机制还是有许多懵懂之处。于是乎，近日开始学习Javascript面向对象编程。在此学习过程中，会整理一些笔记发布在我的博客上，也提供给和我一样不理解Javascript面向对象编程的朋友一些小小的帮助。

今天就对面向对象编程的几个对象类型做一个实例总结。

1. 静态对象

首先创建一个隐式的Function对象并赋给了myConstructor变量，在创建完对象后，通过添加静态的属性和方法来补充该myConstructor实例化后的对象，代码如下：

1
2
3
4
5
6
7
8
9
10

var myConstructor = function() {
	//some code
}
// -----此处的name属性和alertName方法都属于静态对象
myConstructor.name = "hiro";
myConstructor.alertName = function() {
	alert(this.name);
}
// -----此处的()起到了执行代码的作用
myConstructor.alertName();

2. 公有对象

创建一个显式的Function对象，然后实例化对象，通过向实例化后的对象中的原型prototype添加属性和方法来产生公有的属性和方法，代码如下：

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

function myConstructor() {
	//some code
}
var obj = new myConstructor();
alert(obj.name);
// -----此处通过javascript的原型prototype来添加公有对象
myConstructor.prototype.name = "hiro";
myConstructor.prototype.alertName = function() {
	alert(this.name);
}
// -----此处的()起到了执行代码的作用
obj.alertName();

3. 私有对象、特权对象

创建一个显式的Function对象，在该对象内部定义的变量或方法为私有对象，而在该兑现内部通过this.来引用的属性和方法为特权方法，之所以称为“特权”，是因为特权对象可以访问私有对象，代码如下：

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

function  myConstructor(message) {
	// -----此处的name和alertName为私有对象，只能在函数对象内部访问
	var name = "hiro";
	function alertName(name) {
		alert(name);
	}
 
	// -----此处的myMessage和alertMessage为特权方法，它既可以被函数对象外部访问，也可以访问函数内部对象的私有对象
	this.myMessage = message;
	this.alertMessage = function() {
                // -----此处访问了函数对象内部的name和alertName私有对象
		alertName("ihiro.org");
		alert(this.myMessage + ", " + name);
	}
 
	alertName(name);
}
var obj = new myConstructor("A object is created");
alert(obj.myMessage);
obj.alertMessage();

以上语言性描述纯属个人理解，有理解不到位的地方给我提示出来，谢谢！

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/javascript-oop/feed 10 CSS:分享一些常用的css技巧 http://www.ihiro.org/share-some-common-techniques-of-css http://www.ihiro.org/share-some-common-techniques-of-css#comments Thu, 03 Sep 2009 15:05:04 +0000 Hiro http://www.ihiro.org/?p=538

随着近几年来Web标准的流行，css也逐渐有原先辅助的角色转变成了各大网站编程的重要组成部分一直。它很好地将样式与内容分离，使得后期的版面维护与更新工作得以更加地便捷！

今天与大家分享一些在网站开发过程中常用到的一些css技巧，或许会给你的编写带来一些方便之处。已经知晓这些技巧的人完全可以忽略这篇文章。

这些css技巧或许很简单，但我的初衷是希望可以给初学者带去一些帮助。当然css技巧远远不止这些，以后会逐渐整理了发表出来与大家分享。

]]> 随着近几年来Web标准的流行，css也逐渐有原先辅助的角色转变成了各大网站编程的重要组成部分一直。它很好地将样式与内容分离，使得后期的版面维护与更新工作得以更加地便捷！

今天与大家分享一些在网站开发过程中常用到的一些css技巧，或许会给你的css编写带来一些方便之处。已经知晓这些技巧的人完全可以忽略这篇文章。

1. 使用!important:

!important是用来将css属性的优先权提升到之高无上的地步，任何多余的装饰在!important的面前都无用无知地。使用方法：

1
2
3
4

.text { 
        background-color:blue !important;   //只需在css属性后加上!important即可，与属性间的空格可有可无
        background-color:red;  //尽管该css属性是写在后面，但没有起到任何的作用
}

2. 使用background设置图片来替换文本：

每个网站都有一个logo，如果使用a标签直接包含logo图片，这样的做法对搜索引擎不太友好。此时，我们可以用a标签包含一段文字，通过css来的background属性来隐藏文字，同时设置a标签的背景图片为logo图片，这样可以更加友好地优化了网站。

1
2
3
4
5
6
7

.logo a {
      display:block;
      width:120px;  //此处的宽度和高度与logo图片的宽度和高度一致即可
      height:80px;  
      text-indent:-9999px;  
      background:url('logo.gif') no-repeat;   
 }

3. 清除浮动：

在网站的布局设置时，经常会出现通过浮动来布局网站内容的分布。但若该元素浮动后，它就脱离了它的父亲的管束，会导致它的父亲的高度为0。为了不是父亲的后面的兄弟们的布局出现问题,此时需要对父亲清除浮动.方法有二:

01. 在父亲的浮动儿子后面插入一个块级元素,如div,设置该div的css为clear,编写css:

1
2
3

.clear {
       clear:both;
}

02. 使用overflow和heigth组合的方式,设置父亲father的css为:

1
2
3
4

.father {
       overflow:hidden;  //标准浏览器中生效
       height:%1;    //兼容IE6
}

4. 文字垂直居中

若有一个h3包含的标题，你设置了它的高度为30px，就会发现它是居上边显示的，此时你只需结合line-heigth属性即可实现居中效果：

1
2
3
4

h3 {
      height:30px;
      line-height:30px;
}

5. 网站整体内容居中

大家都知道有个属性text-align:center;可以是文本居中，该属性在ie6下也可以实现将网站的整体居中显示。但在标准浏览器中，该属性是不起作用的。在标准浏览器中却可以使用margin:0 auto;属性是网站的整体内容居中，但该属性在IE6中却不能识别，所以为了兼容多浏览器，可以组合使用：

1
2
3
4
5
6
7

body {
        text-align:center;    //在body标签中设置该属性给IE6认识只用
}
#wrapper {
       text-align:left;   //在标准浏览器中，先须将文章的内容居左显示
       margin:0 auto;    //然后使用margin属性将网站整体内容居中
}

这些css技巧或许很简单，但我的初衷是希望可以给初学者带去一些帮助。当然css技巧远远不止这些，以后会逐渐整理了发表出来与大家分享。

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/share-some-common-techniques-of-css/feed 8 jQuery:热点图片轮换展示效果 http://www.ihiro.org/jquery-hot-pictures-showing-effects-of-rotation http://www.ihiro.org/jquery-hot-pictures-showing-effects-of-rotation#comments Fri, 28 Aug 2009 08:02:54 +0000 Hiro http://www.ihiro.org/?p=510

分享一个我做的图片轮换展示效果，主要实现原理：通过设置非第一个图片的position，通过overflow:hidden属性隐藏，再使用jQuery的animate效果函数作出链性轮换的效果。

轮换的图片是我第一个主题的banner大图的截图版。在提供下载的压缩包里有一个png的图片是Fireworks的源文件，喜欢修改的朋友可以自行修改！另压缩包中的源码没有添加注释，不懂的请阅读本文中的注释。

PS：jQuery库请根据源码的路径自行加入，压缩包中不提供下载。

]]> 分享一个我做的图片轮换展示效果，主要实现原理：通过设置非第一个图片的position，通过overflow:hidden属性隐藏，再使用jQuery的animate效果函数作出链性轮换的效果。

轮换的图片是我第一个主题的banner大图的截图版。在提供下载的压缩包里有一个png的图片是Fireworks的源文件，喜欢修改的朋友可以自行修改！另压缩包中的源码没有添加注释，不懂的请阅读本文中的注释。

PS：jQuery库请根据源码的路径自行加入，压缩包中不提供下载。

downloaddemo

1.Html代码：

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

<div id="imgs">
        <div class="top"></div>
        <div class="mid">
            <ul>
                <li class="first"><a href="#"><img src="images/1.jpg" alt="1" /></a></li>
                <li><a href="#"><img src="images/2.jpg" alt="2" /></a></li>
                <li><a href="#"><img src="images/3.jpg" alt="3" /></a></li>
                <li><a href="#"><img src="images/4.jpg" alt="4" /></a></li>
            </ul>
            <div id="img_list">
            	<a href="#1" class="active">1</a>
            	<a href="#2">2</a>
            	<a href="#3">3</a>
            	<a href="#4">4</a>
            </div>
        </div>
        <div class="btm"></div>
    </div>

2.Css代码：

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

* { margin:0; padding:0;}
body { font:12px; padding:100px 200px;}
ul { list-style:none;}
img { padding:2px; border:1px solid #eee;}
a { outline:none;}
 
#imgs { width:500px; float:left; margin-bottom:10px;}
.top, .btm { background:url(images/sprite.gif) no-repeat; overflow:hidden;}
.top { background-position:0 0; height:5px;}
.btm { background-position:0 -5px; height:7px;}
 
.mid { width:486px; background:url(images/bg_img.gif) repeat-y; padding:5px 7px 0;}
.mid ul { width:486px; height:186px; background:#fff; position:relative; overflow:hidden;}
.mid ul li { width:486px; height:186px; position:absolute; left:490px; top:0;}
.mid ul li.first { left:0;}
 
#img_list { width:486px; height:20px; padding-top:5px; overflow:hidden; height:1%;}
#img_list a { display:block; width:14px; height:14px; text-indent:-9999px; float:left; margin-right:5px; background:url(images/sprite.gif) no-repeat 0 -13px;}
#img_list a:hover, #img_list a.active { background-position:-14px -13px;}

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51

/* start ----- play img*/
var curr = 0, next = 0, count = 0;
$(document).ready(function() {
        // 记录图片的数量	
	count = $('#img_list a').size();	
 
	t = setInterval('imgPlay()', 3000);
 
        // 鼠标移动到图片或导航上停止播放，移开后恢复播放	
	$('#imgs li, #img_list a').hover(function() {
		clearInterval(t);
	}, function() {
		t = setInterval('imgPlay()', 3000);
	});
 
	//点击导航播放到相应的图片		
	$('#img_list a').click(function() {
                // index()函数返回当前导航的下标
		var index = $('#img_list a').index(this);
		if(curr != index) {
			play(index);
			curr = index;
		};
			return false;
		});	
	});
 
	// 播放图片的函数
	var imgPlay = function() {
		next = curr + 1;
                // 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标
		if(curr == count-1) next=0;
		play(next);
 
		curr++;
                // 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1
		if(curr > count-1) { curr=0; next = curr +1; }
	};
 
	// 控制播放效果的函数
	var play = function(next) {
                // 当前的图片滑到左边-500px，完成后返回到右边490px
                // 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上
		$('#imgs li').eq(curr).css({'opacity': '0.5'}).animate({'left': '-500px', 'opacity': '1'}, 'slow', function() {
				$(this).css({'left': '490px'});
			}).end()
			.eq(next).animate({'left': '0px', 'opacity': '1'}, 'slow', function() {
				$('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');
			});
};
/* endof ----- play img*/

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-hot-pictures-showing-effects-of-rotation/feed 14 jQuery:Scrolltop滑动插件推荐（修正注释版） http://www.ihiro.org/jquery-scrolltop-plugins http://www.ihiro.org/jquery-scrolltop-plugins#comments Fri, 21 Aug 2009 08:51:40 +0000 Hiro http://www.ihiro.org/?p=470

前段时间DeepBlue发邮件问我，博客中的滑动到顶端的效果是如何实现的。我当时忙着做事，就简单地回复他说是用javascript实现的，但没有告诉他具体实现的办法。

今天在使用Google Reader时，在一篇文章里发现了这个插件，很小巧，代码也很易懂。于是乎，添加了中文注释与大家分享一下。

更多英文资料请阅读:http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

]]> 前段时间DeepBlue发邮件问我，博客中的滑动到顶端的效果是如何实现的。我当时忙着做事，就简单地回复他说是用javascript实现的，但没有告诉他具体实现的办法。

今天在使用Google Reader时，在一篇文章里发现了这个插件，很小巧，代码也很易懂。于是乎，添加了中文注释与大家分享一下。（我修复了它的一个bug）先看看效果吧：(下载包里含有插件和一个简单的效果，请自行添加jQuery库)

downloaddemo

1.html\css代码：

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

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scroll-to-top</title>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js"></script>
	<style type="text/css">
	* { margin:0; padding:0;}
	body { font:16px;}
 
	#wrapper { width:300px; font-size:40px; margin:0 auto; height:1500px;}
 
	#topcontrol { padding:10px 20px; background:#F90;}
	</style>
</head>
<body>
<div id="wrapper">top content</div>
</body>
</html>

说明：1.先将js文件引入；
2.我使用一个#wrapper的div将页面撑高；
3.我将通过插件插入的#topcontrol这个div进行简单的css修饰，更加清楚地发现它的位置。

2.插件javascript代码（含中文注释）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

var scrolltotop={
	//startline: 鼠标向下滚动了100px后出现#topcontrol
	//scrollto: 它的值可以是整数，也可以是一个id标记。若为整数（假设为n），则滑动到距离top的n像素处；若为id标记，则滑动到该id标记所在的同等高处
	//scrollduration:滑动的速度
	//fadeduration:#topcontrol这个div的淡入淡出速度，第一个参数为淡入速度，第二个参数为淡出速度
	//controlHTML:控制向上滑动的html源码，默认为<img src="up.png" style="width:48px; height:48px" />，可以自行更改。该处的html代码会被包含在一个id标记为#topcontrol的div中。
	//controlattrs:控制#topcontrol这个div距离右下角的像素距离
	//anchorkeyword:滑动到的id标签
	/*state: isvisible:是否#topcontrol这个div为可见
			shouldvisible:是否#topcontrol这个div该出现
	*/
 
	setting: {startline:100, scrollto: 0, scrollduration:500, fadeduration:[500, 100]},
	controlHTML: '<a href="#top">back-to-top</a>',
	controlattrs: {offsetx:5, offsety:5}, 
	anchorkeyword: '#top', 
 
	state: {isvisible:false, shouldvisible:false},
 
	scrollup:function(){
		if (!this.cssfixedsupport) {
			this.$control.css({opacity:0}) 
		};//点击后隐藏#topcontrol这个div
		var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto);
		if (typeof dest=="string" && jQuery('#'+dest).length==1) { //检查若scrollto的值是一个id标记的话
			dest=jQuery('#'+dest).offset().top;
		} else { //检查若scrollto的值是一个整数
			dest=this.setting.scrollto;
		};
		this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
	},
 
	keepfixed:function(){
		//获得浏览器的窗口对象
		var $window=jQuery(window);
		//获得#topcontrol这个div的x轴坐标
		var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx;
		//获得#topcontrol这个div的y轴坐标
		var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety;
		//随着滑动块的滑动#topcontrol这个div跟随着滑动
		this.$control.css({left:controlx+'px', top:controly+'px'});
	},
 
	togglecontrol:function(){
		//当前窗口的滑动块的高度
		var scrolltop=jQuery(window).scrollTop();
		if (!this.cssfixedsupport) {
			this.keepfixed();
		};
		//若设置了startline这个参数，则shouldvisible为true
		this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false;
		//若shouldvisible为true，且!isvisible为true
		if (this.state.shouldvisible && !this.state.isvisible){
			this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]);
			this.state.isvisible=true;
		} //若shouldvisible为false，且isvisible为false
		else if (this.state.shouldvisible==false && this.state.isvisible){
			this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]);
			this.state.isvisible=false;
		}
	},
 
	init:function(){
		jQuery(document).ready(function($){
			var mainobj=scrolltotop;
			var iebrws=document.all;
			mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest; //not IE or IE7+ browsers in standards mode
			mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body');
 
			//包含#topcontrol这个div
			mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
				.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
				.attr({title:'Scroll Back to Top'})
				.click(function(){mainobj.scrollup(); return false;})
				.appendTo('body');
 
			if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') {//loose check for IE6 and below, plus whether control contains any text
				mainobj.$control.css({width:mainobj.$control.width()}); //IE6- seems to require an explicit width on a DIV containing text
			};
 
			mainobj.togglecontrol();
 
			//点击控制
			$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
				mainobj.scrollup();
				return false;
			});
 
			$(window).bind('scroll resize', function(e){
				mainobj.togglecontrol();
			});
		});
	}
};
 
scrolltotop.init();

说明：1.修复代码28行的”dest=this.setting.scrollto“;，源代码为“dest=0”；
2.无须在原html代码中添加#top的标记，js会自动插入；
3.可以修改顶端代码的一些参数来控制滑动速度和其他的一些效果。

更多英文资料请阅读:http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

原始的插件代码下载地址(右键另存即可)：scrolltopcontrol.js

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-scrolltop-plugins/feed 25 jQuery:暴强，两款jQuery的打字游戏推荐 http://www.ihiro.org/two-jquery-typing-games-recommended http://www.ihiro.org/two-jquery-typing-games-recommended#comments Mon, 17 Aug 2009 02:45:28 +0000 Hiro http://www.ihiro.org/?p=440

今日在网上发现两款比较好玩的打字游戏，是运用jQuery库编写的，游戏非常美观，适合打字练习或者休闲一下子。

1. jtypinghero：你可以修改js文件夹下的script.js文件的一些参数来设置游戏，如DROPPINGSPEED设置下落的速度，NEWORBTIME设置距离下个字母出现的时间等。

2. jcharacterfall：jcharacterfall是一个小巧的打字游戏，它的字母是随着水滴下落的，下落速度会逐渐地加快。

]]> 今日在网上发现两款比较好玩的打字游戏，是运用jQuery库编写的，游戏非常美观，适合打字练习或者休闲一下子。

1. jtypinghero

jtypinghero
你可以修改js文件夹下的script.js文件的一些参数来设置游戏，如DROPPINGSPEED设置下落的速度，NEWORBTIME设置距离下个字母出现的时间等。

downloadplay

2. jcharacterfall

jcharacterfall
jcharacterfall是一个小巧的打字游戏，它的字母是随着水滴下落的，下落速度会逐渐地加快。

downloadplay

希望玩的开心！

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/two-jquery-typing-games-recommended/feed 7 正则:8个你必须知道的表达式（图文教程） http://www.ihiro.org/eight-regular-expressions http://www.ihiro.org/eight-regular-expressions#comments Tue, 11 Aug 2009 02:14:59 +0000 Hiro http://www.ihiro.org/?p=409

正则表达式（英文：Regular Expression）:在计算机科学中，是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。在很多文本编辑器或其他工具里，正则表达式通常被用来检索和/或替换那些符合某个模式的文本内容。许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。“正则表达式”通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。

今天我说到的8个正则表达式将会用来匹配:用户名、密码、邮件地址、16进制表达式（如：#cccccc）、slug地址（如：eight-regular-expressions）、URL地址、Ip地址以及HTML标签。在下面的讲解中会结合图片给大家讲解，这样你会更容易地理解这些表达式。

]]>

正则表达式的背景：

维基百科中这么说到：
正则表达式（英文：Regular Expression）:在计算机科学中，是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。在很多文本编辑器或其他工具里，正则表达式通常被用来检索和/或替换那些符合某个模式的文本内容。许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。“正则表达式”通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。

今天我说到的8个正则表达式将会用来匹配:用户名、密码、邮件地址、16进制表达式（如：#cccccc）、slug地址（如：eight-regular-expressions）、URL地址、Ip地址以及HTML标签。在下面的讲解中会结合图片给大家讲解，这样你会更容易地理解这些表达式。

1.匹配英文用户名：

username

表达式：/^[a-z0-9_-]{3,16}$/

可以匹配的字符串：my-us3r_n4m3

不能匹配的字符串：th1s1s-wayt00_l0ngt0beausername (太长了！)

2.匹配密码：

password

表达式：/^[a-z0-9_-]{6,18}$/

可以匹配的字符串：myp4ssw0rd

不能匹配的字符串：mypa$$w0rd(包含了一个美元符号！)

3.匹配16进制表达式：

hex

表达式：/^#?([a-f0-9]{6}|[a-f0-9]{3})$/

可以匹配的字符串：#a3c113

不能匹配的字符串：#4d82h4 (包含了字母h，字母h不属于16进制的字符！)

4.匹配slug地址：

slug

表达式：/^[a-z0-9-]+$/

可以匹配的字符串：eight-regular-expressions

不能匹配的字符串：eight_regular_expressions(包含了下划线！)

5.匹配邮箱地址：

email

表达式：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/

可以匹配的字符串：hiro.zhd@gmail.com

不能匹配的字符串：hiro.zhd@gmail.something(域名的后缀过长！)

6.匹配URL地址：

url

表达式：/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

可以匹配的字符串：http://www.ihiro.org/

不能匹配的字符串：http://www.ihiro.org/about!.html(包含了特殊字符“！”！)

7.匹配IP地址：

ip

表达式：/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

可以匹配的字符串：73.60.124.136(这不是我的ip哦，请不要试图访问，呵呵！)

不能匹配的字符串：256.60.124.136(超过255了！)

8.匹配HTML标签：

htmltag

表达式：/^< ([a-z]+)([^<]+)*(?:>(.*)< \/\1>|\s+\/>)$/

可以匹配的字符串：<a href=”http://www.ihiro.org/”>Nettuts+</a>

不能匹配的字符串：<a href=”http://www.ihiro.org/” title=”Hiro’s blog >”>Nettuts+</a>(标签属性包含了特殊字符！)

文章内容整理来自：http://net.tutsplus.com/tutorials/other/8-regular-expressions-you-should-know/

最热评论文章列表:

]]> http://www.ihiro.org/eight-regular-expressions/feed 18 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 jQuery:使用css+jQuery模拟键盘 http://www.ihiro.org/keyboard-simulation-with-css-and-jquery http://www.ihiro.org/keyboard-simulation-with-css-and-jquery#comments Tue, 14 Jul 2009 04:56:57 +0000 Hiro http://www.ihiro.org/?p=189 今天在阅读Nettuts+的Feed时看到了这个模拟键盘的效果，很是喜欢。便查看的源码后，了解了实现的原理，自己重新编写了CSS和JS代码，现效果如下：

外部链接查看效果：Demo,源代码下载：Download

]]> 今天在阅读Nettuts+的Feed时看到了这个模拟键盘的效果，很是喜欢。便查看的源码后，了解了实现的原理，自己重新编写了CSS和JS代码，现效果如下：

外部链接查看效果：Demo,源代码下载：Download

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<div id="container">
	<textarea id="write" rows="6" cols="60"></textarea>
	<ul id="keyboard">
		<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
		<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
		<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
		<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
		<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
		<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
		<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
		<li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
		<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
		<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
		<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
		<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
		<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
		<li class="delete lastitem">delete</li>
		<li class="tab">tab</li>
		<li class="letter">q</li>
		<li class="letter">w</li>
		<li class="letter">e</li>
		<li class="letter">r</li>
		<li class="letter">t</li>
		<li class="letter">y</li>
		<li class="letter">u</li>
		<li class="letter">i</li>
		<li class="letter">o</li>
		<li class="letter">p</li>
		<li class="symbol"><span class="off">[</span><span class="on">{</span></li>
		<li class="symbol"><span class="off">]</span><span class="on">}</span></li>
		<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
		<li class="capslock">caps lock</li>
		<li class="letter">a</li>
		<li class="letter">s</li>
		<li class="letter">d</li>
		<li class="letter">f</li>
		<li class="letter">g</li>
		<li class="letter">h</li>
		<li class="letter">j</li>
		<li class="letter">k</li>
		<li class="letter">l</li>
		<li class="symbol"><span class="off">;</span><span class="on">:</span></li>
		<li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
		<li class="enter lastitem">enter</li>
		<li class="left-shift">shift</li>
		<li class="letter">z</li>
		<li class="letter">x</li>
		<li class="letter">c</li>
		<li class="letter">v</li>
		<li class="letter">b</li>
		<li class="letter">n</li>
		<li class="letter">m</li>
		<li class="symbol"><span class="off">,</span><span class="on">< </span></span></li>
		<li class="symbol"><span class="off">.</span><span class="on">></span></li>
		<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
		<li class="right-shift lastitem">shift</li>
		<li class="space lastitem">space</li>
	</ul>
</div>

2. CSS代码：

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

* { margin:0; padding:0;}
body { font:10px Tahoma, Geneva, sans-serif; background:#eee;}
 
#container { width:430px; margin:10px;}
 
	#write { border:none; width:410px; height:120px; background:#fff; padding:5px; margin-bottom:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #f9f9f9; font-size:11px;}
 
		#keyboard { list-style:none;}
			#keyboard li { float:left; width:20px; height:20px; line-height:20px; text-align:center; background:#fff; margin:0 5px 5px 0; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #f9f9f9;}
 
			.tab, .capslock, .left-shift, .space { clear:left;}
 
			#keyboard li.lastitem { margin-right:0;}
			#keyboard li.delete { width:70px;}
			#keyboard li.tab { width:70px;}
			#keyboard li.capslock { width:75px;}
			#keyboard li.enter { width:40px;}
			#keyboard li.left-shift { width:80px;}
			#keyboard li.right-shift { width:65px;}
			#keyboard li.space { width:420px;}
 
			#keyboard li:hover, .hover { position:relative; top:1px; left:1px; cursor:pointer; border-color:#e5e5e5;}
 
			.on { display:none;}
			.uppercase { text-transform:uppercase;}

为了兼容IE6和IE7，需在head标签对间加上如下代码：

1
2
3
4
5

<!--[if lt ie 8]>
    <style type="text/css">
    	#write { margin-left:-10px;}
    </style>
< ![endif]-->

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59

$(document).ready(function() {
 
	var $writeBox = $('#write'),
		shift = false,
		capslock = false;
 
	$('#keyboard li').hover(function() {
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	}).click(function() {
		var $this = $(this),
			charater = $this.html();
 
		// 一键两意
		if($this.hasClass('symbol')) charater = $('span:visible', $this).html();
 
		// Button detele 
		if($this.hasClass('delete')) {
			var html = $writeBox.html();
			$writeBox.html(html.substring(0, html.length-1));
			return false;
		};
 
		// Button tab
		if($this.hasClass('tab')) charater = '\t';
 
		// Button capslock
		if($this.hasClass('capslock')) {
			$('.letter').toggleClass('uppercase');
			capslock = true;
			return false;
		};
 
		// Button enter
		if($this.hasClass('enter')) charater = '\n';
 
		// Button shift
		if($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
			$('.letter').toggleClass('uppercase');
			$('.symbol span').toggle();
 
			shift = (shift === true) ? false : true;
			capslock = false;
			return false;
		};
 
		// Button space
		if($this.hasClass('space')) charater = ' ';
 
		// 转换为大写
		if($this.hasClass('uppercase')) charater = charater.toUpperCase();
 
		// 输出所按的键值
		$writeBox.html($writeBox.html() + charater);
 
	});
 
});

此效果由：http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/中的效果改编而来。

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/keyboard-simulation-with-css-and-jquery/feed 10 jQuery:书籍展示效果 http://www.ihiro.org/the-effection-of-books-show http://www.ihiro.org/the-effection-of-books-show#comments Fri, 10 Jul 2009 03:52:23 +0000 Hiro http://www.ihiro.org/?p=177 前段时间在国外的博客上看到这个jQuery的书籍展示效果，觉得很是不错，并下载了源码，自己重新编写了CSS和JS，效果:如下

说明：因为在此页面中是通过使用iframe标签引入外部页面，加上显示页面的宽度有限，所以当鼠标移动到Info图标上时，部分内容被遮盖住，这时你可以通过外部链接查看：Demo

源代码下载

]]> 前段时间在国外的博客上看到这个jQuery的书籍展示效果，觉得很是不错，并下载了源码，自己重新编写了CSS和JS，效果:如下

说明：因为在此页面中是通过使用iframe标签引入外部页面，加上显示页面的宽度有限，所以当鼠标移动到Info图标上时，部分内容被遮盖住，这时你可以通过外部链接查看：Demo

具体代码实现如下：（源代码下载）

1.html代码:

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

<div id="books">
  <div class="overclear buttons"> 
    <a href="#" class="prev"><img src="images/books_prev.gif" alt="Previous" /></a>
    <div class="showing"><!-- showing --></div>
    <a href="#" class="next"><img src="images/books_next.gif" alt="Next" /></a> 
  </div>
  <div class="overclear top">
    <img src="images/books_left_top.gif" alt="" class="float_left" />
    <img src="images/books_right_top.gif" alt="" class="float_right" />
  </div>
  <div class="inner">
    <ul class="overclear">
      <li class="loader"><!-- loader --></li>
    </ul>
  </div>
  <div class="overclear btm">
    <img src="images/books_left_btm.gif" alt="" class="float_left" />
    <img src="images/books_right_btm.gif" alt="" class="float_right" />
  </div>
</div>

2.CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

* { margin:0; padding:0;}
body { font:12px/16px Verdana, Geneva, sans-serif; color:#000;}
 
img { border:0;}
a { text-decoration:none; outline:none; hide-focus:expression(this.hideFocus=true);}
ul { list-style:none;}
 
#books { width:500px;}
.prev img, .next img { width:40px; height:30px;}
.top img, .btm img { width:20px; height:20px;}
.overclear { overflow:hidden; height:1%;}
.float_left { float:left;}
.float_right { float:right;}
.top { background:url(images/books_top.gif) repeat-x;}
.btm { background:url(images/books_btm.gif) repeat-x;}
 
.buttons { position:relative; height:32px; margin-bottom:5px;}
.prev { position:absolute; top:0; left:0;}
.next { position:absolute; top:0; right:0;}
 
.showing { margin:0 60px; height:80%; font-family:Tahoma, Geneva, sans-serif; text-align:center; padding-top:4px;}
 
.inner { height:125px; background:url(images/books_left_mid.gif) repeat-y;}
.inner ul { background:url(images/books_right_mid.gif) repeat-y right; height:100%; padding-left:25px;}
 
.loader { background:url(images/books_loader.gif) no-repeat 50% 50%;; height:100%;}
 
.book { width:90px; float:left; padding-right:25px; position:relative; padding-bottom:3px;}
 
.book .info { position:absolute; top:107px; left:88px;}
.book .thumb img { padding:3px; border:1px solid #ddd;}
 
.books-tooltip { display:none; position:absolute; background:#fff; z-index:2;}
.books-tooltip { width:320px;}
.books-info { border:1px solid #ccc; padding:10px; height:70px;}

为了兼容ie6，需在head标签内加上代码：

1
2
3
4
5

<!--[if lt IE 7]>
<style type="text/css">
    .book { padding-right:12.5px;}
</style>
< ![end if]-->

3.xml代码：

因为代码过长的原因，不在此贴出，请阅读外部链接的源代码：XML

4.jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

$(document).ready(function() {
 
	var perNum = 4;		//每页显示的书本数目
	var currentPage = 1;		//默认显示第一页
	var startPos = 0;		//默认从第一本书开始显示
	var endPos = 4;			//显示4本书
 
	//从xml中获得数据，并与html结合
	$.get('books.xml', function(data){
 
		$('div.inner ul').empty();
 
		var length = $('book', data).length;	
 
		$('book', data).each(function(index) {
 
			var $book = $(this);
			var link = $book.find('href').text();
			var title = $book.find('title').text();
			var author = $book.find('author').text();
			var imageSrc = $book.find('src').text();
			var total = $book.find('total').text();
			var average_rating = $book.find('average_rating').text();
 
			var html = '&lt;li class="book"&gt;';
			html += '&lt;a class="info" href="' + link + '"&gt;';
			html += '&lt;img src="images/books_info.gif" alt="more info" /&gt;';
			html += '&lt;/a&gt;';			
			html += '&lt;a class="thumb" href="' + link + '" title="' + title + '"&gt;';
			html += '&lt;img src="' + imageSrc + '" alt="' +  title + '" /&gt;';
			html += '&lt;/a&gt;';
			html += '&lt;/li&gt;';
 
			$('#books ul').append($(html));
 
			var bookToolTip = '&lt;div id="books_ToolTip' + index + '" class="books-tooltip"&gt;';
			bookToolTip += '&lt;div class="books_pointer_left"&gt;&lt;/div&gt;';
			bookToolTip += '&lt;div class="books-info"&gt;';
			bookToolTip += '&lt;p&gt;' + title + '(by&lt;em&gt;' + author + '&lt;/em&gt;)&lt;/p&gt;';
			bookToolTip += '&lt;p&gt;&lt;img src="images/stars_' + average_rating + '.gif" /&gt;(' + total + ')&lt;/p&gt;';
			bookToolTip += '&lt;/div&gt;';
			bookToolTip += '&lt;/div&gt;';
			$('body').append($(bookToolTip));
 
		});
 
		//显示每页的书本
		var show =function(start, end) { 
 
			if(end &gt;= length) {
				end = length;
			}
 
			$('div.showing').empty();
			$('&lt;p&gt;Viewing ' + (start+1) + ' - '+ end + ' of ' + length + '&lt;/p&gt;').appendTo($('div.showing'));
 
			$('#books ul li').hide().slice(start, end).fadeIn();
 
			if(currentPage &lt;= 1) {
				$('.prev').fadeOut('fast');
			} else {
				$('.prev').fadeIn('fast');
			}
			if(currentPage &gt;= length / perNum) {
				$('.next').fadeOut('fast');
			} else {
				$('.next').fadeIn('fast');
			}
		};
		show(startPos, endPos);
 
		//显示前一页
		$('.prev').click(function() {
			currentPage --;
			startPos = perNum * (currentPage - 1);
			endPos = perNum * currentPage;
			show(startPos, endPos);
		});
 
		//显示下一页
		$('.next').click(function() {
			currentPage ++;
			startPos = perNum * (currentPage - 1);
			endPos = perNum * currentPage;
			show(startPos, endPos);
		});
 
		//鼠标移动到Info图标上时，显示书本的描述信息
		$('.info').css({'opacity': '0.9'}).hover(function() {
			//$('a.info').index(this)   获得该超链接的index
			var offset = $(this).offset()
			var left = offset.left + 20;
			var top = offset.top + 20;
			$('#books_ToolTip' + $('a.info').index(this)).css({'opacity': '0.7', 'left': left, 'top': top}).fadeIn();
		}, function() {
			$('#books_ToolTip' + $('a.info').index(this)).fadeOut('fast');
		});
 
	});
 
});

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/the-effection-of-books-show/feed 6 CSS:纯css的伪动态分页效果 http://www.ihiro.org/pure-css-dynamic-page-effects http://www.ihiro.org/pure-css-dynamic-page-effects#comments Mon, 06 Jul 2009 02:29:46 +0000 Hiro http://www.ihiro.org/?p=139 使用css编写的一个动态分页效果，通过使用opacity和filter实现透明效果，分页效果如下：

]]> 使用css编写的一个动态分页效果，通过使用opacity和filter实现透明效果，分页效果如下：

1.Html代码：

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

<ul id="pageNav">
	<li><a href="#" class="arrow">< <</a></a></li>
    <li><a href="#" class="currPage">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li><a href="#">13</a></li>
    <li><a href="#">14</a></li>
    <li><a href="#">15</a></li>
    <li><a href="#" class="arrow">>></a></li>
</ul>

2.css代码：

1
2
3
4
5
6
7
8
9
10

* { margin:0; padding:0;}
body { font:11px Verdana, Geneva, sans-serif; color:#000; padding:10px;}
ul { list-style:none;}
a { text-decoration:none;}
 
#pageNav li { float:left;}
	#pageNav li a { display:block; float:left; padding:2px 5px; border:1px solid #666; margin-left:-1px; color:#fff; background:url(pageNav-bg.gif) repeat-x;}
	#pageNav li a.currPage { background-position:left bottom; color:#000;}
	#pageNav li a:hover { background-position:left bottom; position:relative; padding:4px 10px; margin:-2px -10px 0; opacity:.9; filter:Alpha(opacity=90);}
	#pageNav li a.arrow:hover { position:static; padding:2px 5px; margin:0 -1px 0 0;}

说明：本特效主要的要点在：a:hover时position:relative和margin:-2px -10px 0。为了兼容ie6，需要设置#pageNav li a { display:block; float:left;}

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/pure-css-dynamic-page-effects/feed 17 jQuery:仿MSN网站的tab效果 http://www.ihiro.org/the-effection-of-tab-like-msn http://www.ihiro.org/the-effection-of-tab-like-msn#comments Thu, 02 Jul 2009 09:51:21 +0000 Hiro http://www.ihiro.org/?p=134 ]]> 今天不知怎的，一直在做tab的特效，看到MSN官网的tab效果不错，就花了一点点时间小做了一下，具体效果：如下

html代码：

因为过长的原因，请有意的朋友通过此链接查看外部效果，右键查看源文件！External Link

css代码：

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

       * { margin:0; padding:0;}
	body { font:12px "宋体"; color:#049; padding:8px;}
	a { text-decoration:none; color:#049;}
	a:hover { text-decoration:underline;}
	ul { list-style:none;}
	li { height:23px; line-height:23px;}
 
	.popular { width:298px; border:1px solid #ace; padding-bottom:10px;}
 
		.tabs { overflow:hidden; height:1%;}
			.tabs li { border:1px solid #ace; border-width:0 1px 1px 0; background:#f1f7fc; width:84px; text-align:center; float:left;}
			.tabs li.active { background:#fff; border-bottom-color:#fff; font-weight:bold;}
			.tabs li.tab-r { border-right:0; width:118px; text-align:right; padding-right:10px;}
				.tabs li.tab-r a { color:#F06; font-weight:bold; font-family:Georgia;}
 
		.list { margin:7px 0 0 7px; padding-left:35px; background:url(popularlist.gif) no-repeat;}
 
		.weeklyPopular { display:none;}

jQuery代码：

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

$(document).ready(function() {
	$('a').attr('target', '_blank');   
 
	$('.tabs li').mousemove(function() {
		//最右边的tab不进行任何操作							 
		if($(this).hasClass('tab-r')) {
			return;
		};
		//添加当前激活的状态
		$(this).siblings().removeClass('active').end()
			.addClass('active');
		//切换tab		
		if($(this).hasClass('tab-0')) {
		        $('.list').hide();
		        $('.dairyPopular').show();	
		        //也可以写成$(this).parent().nextAll('ul:eq(0)').show();,这样的好处是不必制定特定的class类
		} else if($(this).hasClass('tab-1')) {
			$('.list').hide();
			$('.weeklyPopular').show();
			//也可以写成$(this).parent().nextAll('ul:eq(1)').show();,这样的好处是不必制定特定的class类
		};
	});
});

需要源码包的朋友可以给我留言，我会发到你的邮箱中！

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/the-effection-of-tab-like-msn/feed 30 jQuery：简单6行代码实现tab效果 http://www.ihiro.org/a-simple-6-lines-of-code-to-achieve-the-tab-effecttion http://www.ihiro.org/a-simple-6-lines-of-code-to-achieve-the-tab-effecttion#comments Thu, 02 Jul 2009 02:37:57 +0000 Hiro http://www.ihiro.org/?p=120 ]]> 简简单单的6行代码实现tab滑动门效果：如下

html代码：

1
2
3
4
5
6
7
8
9

    <div class="tabs">
    	<!-- 默认第一个tab为激活状态 -->
        <h3 class="active"><span>热点新闻</span></h3>
        <div id="tab-01">news</div>
	    <h3><span>娱乐新闻</span></h3>
        <div id="tab-02">enteriment</div>
        <h3><span>就业形势</span></h3>
        <div id="tab-03">jobs</div>
    </div>

CSS代码：

1
2
3
4
5
6
7
8

    * { margin:0; padding:0;}
    body { font:12px Verdana, Geneva, sans-serif; color:#404040;}
 
	.tabs { margin:10px 0 0 20px; width:360px; position:relative; overflow:hidden; height:1%; height:140px;}
		.tabs h3 { z-index:2; font-size:12px; background:url(pic.gif) no-repeat; width:95px; height:25px; line-height:25px; text-align:center; float:left; margin-right:5px;}
		h3.active { background-position:0 -25px; color:#fff;}
		#tab-01, #tab-02, #tab-03 { position:absolute; top:24px; left:0; width:338px; padding:10px; height:93px; border:1px solid #ace; z-index:1;}
		#tab-02, #tab-03 { display:none;}

jQuery代码：

1
2
3
4
5
6
7

    $(document).ready(function() {
	$('.tabs h3').mouseover(function() {
		$('.tabs div').hide();
		$(this).siblings('h3').removeClass('active').end()
					  .addClass('active').next('div').show();
	});	
    });

具体效果也可查看：效果查看

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/a-simple-6-lines-of-code-to-achieve-the-tab-effecttion/feed 10 jQuery：仿迅雷首页热片滑动效果 http://www.ihiro.org/the-effection-of-thunder-home-page http://www.ihiro.org/the-effection-of-thunder-home-page#comments Tue, 30 Jun 2009 14:27:39 +0000 Hiro http://www.ihiro.org/?p=109 ]]> 一直都很喜欢迅雷网站的设计，前端时间迅雷更新的主页的css风格，没了以前的tab效果，多了点变幻滑动的效果。
今天花了点时间，模仿了一下当前迅雷主页上的热点电视、电影的滑动效果：如下

模仿说明：

1. 因为时间的关系，没有花时间去解决ie6下图片透明的兼容；
2. 在兼容各浏览器编写时花费的时间较多，实现了多浏览器的兼容性，除了图片透明的问题（时间关系）；
3. 运用jQuery库对javascript进行编写；
4. 采用css sprite技术处理背景定位；
5. 计划实现自动播放效果。

代码说明：

一. CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

html,body,
ul,ol,li,dl,dt,dd,
h1,h2,h3,h4,h5,h6,
form,input,blockquote,fieldset,pre,
div,p,span,label,em,strong { margin:0; padding:0;}
body { background:#FFFFFF; font:normal 12px/20px Arial, Verdana, Lucida, Helvetica, simsun, sans-serif; color:#313131;}
ul { list-style:none;}
a { text-decoration:none;}
 
 
.huanying { width:468px; height:208px; position:relative; overflow:hidden;}
	.huanying h2 { height:27px; line-height:27px; background:url(images/pic.png) no-repeat; font-size:13px; color:#193b5f; padding:0 11px;}
	.huanying .content { border:1px solid #CCDFF2; border-top-width:0; width:466px; height:180px;}
 
	.movList { padding:10px 8px;}
		.movList ul { overflow:hidden; padding-left:8px; position:absolute; width:432px;}
		.movList ul#ul_hp_0 { left:10px;}
		.movList ul#ul_hp_1, .movList ul#ul_hp_2 { left:500px;}
		.movList ul li { float:left; width:92px; margin:0 8px;}
 
			/* ----- 封面 ----- */
			.movList ul li a.playpic { display:block; width:92px; height:127px; color:#fff; text-align:right; margin-bottom:3px; position:relative;}
			.movList ul li a.playpic img { padding:2px; border:1px solid #eae4d1;}
			.movList ul li a.playpic em { display:none;}
			.movList ul li a.playpic:hover em { display:block; width:31px; height:31px; background:url(images/pic.png) no-repeat -95px -28px; position:absolute; top:48px; left:30.5px;}
			/* ----- 集数 ----- */
			.movList ul li a.playpic span { display:block; width:86px; height:15px; line-height:15px; position:absolute; left:3px; bottom:3px;}
			.movList ul li a.playpic span.bg { background:url(images/pic.png) no-repeat -130px -28px;}
 
			/* ----- 标题和简短描述 ----- */
			.movList ul li p { width:100px; height:17px; line-height:17px; text-align:center; overflow:hidden;}
			.movList ul li p.mov-title { width:82px; padding-right:10px; position:relative;}
			.movList ul li p.mov-title a { color:#016a9f;}
			.movList ul li p.mov-title a:hover { text-decoration:underline;}
			.movList ul li p.mov-title a.playMov { display:block; position:absolute; width:16px; height:16px; right:0; top:0; background:url(images/pic.png) no-repeat -240px -28px;}
 
 
.list-pager { width:75px; height:18px; position:absolute; top:4px; right:11px;}
	.list-pager a { display:block; text-indent:-9999px;}
	/* ----- page-num ----- */
	.pager-num { width:33px; height:18px; float:left; overflow:hidden;}
		.pager-num a { height:6px; width:6px; background:url(images/pic.png) no-repeat -80px -28px; float:left; margin:6px 5px 0 0; overflow:hidden;}
		.pager-num a:hover { background-position:-80px -38px;}
		/* ----- selected ----- */
		.currentNum { background:url(images/pic.png) no-repeat -80px -38px!important;}
 
	/* ----- prev next ----- */
	.pager-op { float:right; width:36px; overflow:hidden;}
		.pager-op a { height:18px; width:18px; background:url(images/pic.png) no-repeat;}
		.pager-op a.page-up { float:left; background-position:-40px -28px;}
		.pager-op a.page-up:hover { background-position:0 -28px;}
		.pager-op a.page-down { float:right; background-position:-17px -28px;}
		.pager-op a.page-down:hover { background-position:-57px -28px;}

二. jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

/*
 * 时间关系，未修复IE6下图像透明的问题。
 */
 
$(document).ready(function() {
 
	//修复IE6的：hover
	$('.movList ul li a.playpic').hover(function() {
		$(this).children('em').css({'display': 'block'});
	}, function() {
		$(this).children('em').css({'display': 'none'});
	})
 
	var lenght = $('#div_hp_content ul').size();
	// currId->当前显示页， clickId->点击页面的标记
	var currId = 0, clickId = 0;
	// 获得需滑动的整体对象
	var $box = $('#div_hp_content ul');
 
	if(currId &lt;= 0) {
		currId = 0;
	} else if (currId >= lenght - 1) {
		currId = lenght;
	}
 
	$('.pager-num a').click(function(event) {
		//获得当前点击对象的id值
		var index = $(this).attr('id');
		checkIndex(index);
 
		//判断当前点击页数，若当前点击页数大于当前显示页，向左滑动
		//若当前点击页数小于当前显示页，向右滑动
		//否则不进行任何操作
		if(clickId &gt; currId) {
			$box.eq(currId).animate({'left':'-480px'}, 'slow')
						   .end().eq(clickId).animate({'left':'10px'}, 'slow');
 
		} else if(clickId &lt; currId) {
			$box.eq(currId).animate({'left':'480px'}, 'slow')
						   .end().eq(clickId).animate({'left':'10px'}, 'slow');
 
		} else {
			return false;
		};
 
		//设置当前显示页标记等于点击的页数
		currId = clickId;
		changeSelected();
 
		event.preventDefault();
	});
 
	//上一页
	$('.page-up').click(function(event) {
		if(currId &lt;= 0) {
			return false;
		};
		$box.eq(currId).animate({'left':'480px'}, 'slow')
					   .end().eq(currId - 1).animate({'left':'10px'}, 'slow');
		currId--;
		changeSelected();
 
		event.preventDefault();
	});
	//下一页
	$('.page-down').click(function(event) {
		if(currId >= lenght - 1) {
			return false;
		};
		$box.eq(currId).animate({'left':'-480px'}, 'slow')
					   .end().eq(currId + 1).animate({'left':'10px'}, 'slow');
		currId++;
		changeSelected();
 
		event.preventDefault();
	});
 
	//点击页数按钮检查index
	var checkIndex = function(index) {
		switch(index) {
			case 'a_hp_0':
			clickId = 0;
			break;
			case 'a_hp_1':
			clickId = 1;
			break;
			case 'a_hp_2':
			clickId = 2;
			break;
		};
	};
 
	//改变当前所选择的页数
	var changeSelected = function() {
		$('.pager-num a').removeClass('currentNum').eq(currId).addClass('currentNum');
	};
});

题外话：

呵呵，因为图片都是从迅雷网站上下载，有点小剽窃的感觉哦。不过，在这效果上有链接到迅雷相关电视、电影页面，也算给他做个小小的推广。大家就算扯平了吧。

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/the-effection-of-thunder-home-page/feed 6 简谈新窗口打开超链接的技巧 http://www.ihiro.org/a-simple-talk-about-the-hyperlink-to-open-a-new-window-techniques http://www.ihiro.org/a-simple-talk-about-the-hyperlink-to-open-a-new-window-techniques#comments Fri, 19 Jun 2009 16:09:07 +0000 Hiro http://www.ihiro.org/?p=75 超链接跳转常用在友情链接中，或链接到其他网站，为了可以把你的访问者继续留在自己的主页而使用的一个技巧。现在我就要说说常用的几种跳转技巧：

1.使用html标签的target属性：

该方法恐怕是大家使用最多的方法，也是所有web工具所默认的。只需在链接a标签中加入属性target属性即可：如下

1

<a href="http://www.ihiro.org/ title="Hiro's Blog" target="_blank">www.ihiro.org</a>

在web标准流行的当代，也许大家已经发现，该方法不能通过W3C的验证。

2.使用Javascript代码:

在a标签中加入rel=“external”属性:如下

1

<a href="http://www.ihiro.org/ title="Hiro's Blog" rel="external">www.ihiro.org</a>

运用jQuery框架，在页面中导入js文件，编写代码：如下

1
2
3

<script type="text/javascript">
        $('a[rel*=external]').attr('target', '_blank');
</script>

该方法好处是欺骗了浏览器，可以通过W3C的验证。

附加技巧：

在一列友情链接都需要跳转时，我们不可能为每个a标签都添加rel=“external”属性.这是可以使用类或id的方法：如下

1
2
3
4
5
6

<ul class="external">
        <li><a href="http://www.ihiro.org/ title="Hiro's Blog">www.ihiro.org</a> </li>
        <li><a href="http://www.ihiro.org/ title="Hiro's Blog">www.ihiro.org</a> </li>
        <li><a href="http://www.ihiro.org/ title="Hiro's Blog">www.ihiro.org</a> </li>
        <li><a href="http://www.ihiro.org/ title="Hiro's Blog">www.ihiro.org</a> </li>
</ul>

jQuery代码：如下

1
2
3

<script type="text/javascript">
        $('ul.external li a').attr('target', '_blank');
</script>

这样这个ul列表中的所有友情链接都可以实现页面跳转了。

总结：

当然你也可以不使用jQuery框架，直接使用普通的javascript编写也可以实现，但没有jQuery实现的如此优雅。上文中的external其实是可以随便命名的，自需要保持javascriprt中的名称相同即可。

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/a-simple-talk-about-the-hyperlink-to-open-a-new-window-techniques/feed 1