四眼天兔工作室 » jQuery

10个极具创意的用户交互界面及其制作方法

4EB Studio — Mon, 30 Mar 2009 05:53:40 +0000

用户体验在近几年得到了迅速的改善，主要体现在丰富的的用户交互界面上。AJAX, javascript以及CSS的广泛应用为用户提供了先进的，尖端的以及专业的动态交互界面解决方案。

之前已经有了很多文章来介绍一些令人惊叹的 javascript, Ajax和CSS技术以及哪里可以找到这些技术的使用方法。今天，我们将来看看10个极具创意且UI界面功能丰富的网站，以及如何使用文中提到的技术来制作类似的交互效果。

1. Alex Buga (滑移 ，可拖动的页脚 以及动态按钮)

在这个绝对难以置信的设计中你会看到:

1.1 一个具有美观的动态悬浮效果的菜单

制作方法 » 使用超级弹性特效制作极具视觉冲击的网页菜单

该教程讲解了如何使用几行Javascript代码以及MooTools库来设计一个令人振奋的弹性菜单。

查看演示

1.2 滑动的文章显示面板

制作方法 » 漂亮的动态周线表

该教程向你讲述了如何设计一款带美观的，带有每日注释的动态周记，你可以在你的网站中使用该方法进行自定义设置。

查看演示

1.3 可以拖动的页脚

制作方法 » 事件委派表中的拖拽以及调整大小

只有父元素在控制事件。在本例中将由编辑容器内的元素来控制事件。如果你向你的容其中添加动态的元素，你无需再附上任何事件。

查看演示

2. Ricoverdeo (幻灯效果)

一个非常简洁的滑动效果，并且使用了大量的插图作为辅助。

2.1 在悬浮元素上添加简单的滑动效果

制作方法 » Easy Slider 1.5 – 简单的制作图片与内容滑动的jQuery插件

Easy Slider (我对这款插件的叫法)可以使图片或者任何内容通过点击或自动在水平或垂直方向上滑动。主要特性包括：连续滑动，“go to first”和”go to last”按钮，隐藏控制工具，可选的控制按钮的代码标记，在同一页面上垂直滑动或出现多多种滑动。

查看演示

3. jasonreedwebdesign (滑动标签，折叠面板)

Jason Reed在他的个人作品集上使用了一款流行的折叠面板效果允许用户进行页面导航。他还在折叠面板内使用了一款非常漂亮的滑动标签来增强界面结构。

3.1 互动标签

制作方法 » 自动滑动标签

滑动标签是一个mootools插件，可以添加一些漂亮简洁的效果。它和Panic Software’s Coda网站上的滑动效果相似。另外，它还可以在固定的时间间隔内自动滑移。

查看演示

3.2 折叠面板

制作方法 » 垂直折叠面板

该款插件提供了一些简单的选项来改变折叠面板的外观和动作。

制作方法 » 使用 Mootools 制作折叠面板

4. Dragon Interactive (动态菜单)

我非常喜欢他那叹为观止的菜单，乍一看以为是一个flash，后来通过查看代码发现就是使用了简单的XHTML，CSS以及Javascript。

3.1 动态菜单

制作方法» 使用jQuery 制作动态菜单

查看演示

5. DesignShack (切换页面布局)

大多数CSS图库网站都会提供给用户改变页面布局的功能，从而使用户可以更加轻松，迅速的获取信息。 ƒ

5.1 转换页面外观

制作方法 » 使用CSS和jQuery显示转换钮

通过使用CSS和jQuery让用户切换页面布局。

查看演示

6. Profoto (面包屑Breadcrumbs)

Profoto有一个独特的面包屑(breadcrumb)菜单。点击面包屑链接的时候会在它的下方打开一个区域，给用户一些附加属性进行选择。

6.1 面包屑Breadcrumb

制作方法 » jBreadCrumb

jBreadCrumb是一款jQuery插件，可以通过更为灵活和聪明的方式来显示面包屑。

查看演示

7. Shelfari (混合按钮)

Shelfari具有一个非常有趣的混合按钮/向下滑移的菜单来显示对书籍的执行动作。如果你查看代码你会发现选择框那里并没有使用一个输入框，而仅仅使用了背景图片。

7.1 自定义表单元素

制作方法» Custom Form Elements

曾经总是在好奇如何可以按照自己的方式定义表单元素，如选择框，多选框以及选择区域。Custom Form Elements通过使用Javascript和CSS来提升基于网页的XHMTL表单的样式及可用性。

查看演示

8. CSS Ninjas (费用预估滑杆)

CSS Ninjas提供了一个非常有趣的费用预估滑杆允许客户估算服务费用。

8.1 滑杆

制作方法 » jQuery UI 1.7 Slider

该款插件的目的就是通过渐进增强来控制jQuery UI Slider插件。

查看演示

9. Facebook (表单自动完成)

Facebook的地址自动完成表单是表单自动完成的最好案例。

9.1 表单自动完成

制作方法 » FCBKcomplete v 1.09

一款有趣的facebook样式的动态输入框，可以自动完成或预载值。

查看演示

10. Design Flavr (Smooth Slideshow)

DesignFlavr, 一个非常有名的设计灵感资源网站，使用了一个淡入淡出的幻灯效果来展示他们的特色作品以及相应的作品描述。

10.1 Smooth Slide

制作方法 » s3Slider

s3Slider是一款免费的jQuery插件，可以实现交互渐变的幻灯效果。

查看演示

[原文链接]

15个网站加速，代码优化的技巧

4EB Studio — Tue, 27 Jan 2009 05:50:12 +0000

将图片压缩到最小

当我们使用photoshop“存储成网页格式”的选项时，我们可以将图片文件压缩的小一些。但是，你是否知道这些图片大小可以被压缩的更多而不降低图片质量呢？有个名叫Smush.It 的网站可以帮助你实现这一点。

学会擅用Snippets

许多的IDE是都提供”code snippet” 控制面板允许你存储一些代码以备后用。你是否发现自己经常会去lipsum.com获取一些常用本文呢？那为什么不试试使用snippet？在Dreamweaver中，按下”Shift+F9″键即可打开snippet标签。你可以将需要的snippet托拽到任何你需要的地方。这个方法将节省你的大量时间。

利用Console.log()进行调试

你或许下载了一个jQuery库，并且在试图掌握它的语法结构。同样，你可能遇到了一些困难并且意识到你无法确认变量的对应值。没关系，你可以这样做：

键入命令：

console.log($someVariable);

现在，打开Firefox（请确认你已安装了FireBug），然后点击F12。你将会看到你正在查找的变量所对应的值。

下载网页开发工具

这是一款由Chris Pederick 开发的，非常实用的Firefox扩展插件，具有很多选项。或许你们大多数看过我视频教程的人都会发现我非常喜欢使用”Edit CSS” 这个选项来实时调整我的样式表。该工具的其他功能包括：

轻松禁用Javascript
轻松禁用CSS
快速HTML/CSS验证链接
标尺
禁用cookies
还有其他一系列很多伟大的功能

Web Developer Toolbar

将Script标签放置到页面最底端

我们似乎很少这样做。虽然它并非总是适宜，但是你的确可以通过把script标签放到标签后来提高网站速度很多倍。

....

大多数现代浏览器在同一台服务器上最多同时加载两个内容。但是，当你加载脚本文件的时候，其他的都不会被同时加载。因此，只要情况允许的话，最好将你的脚本文件移动到文件最底端，以便让服务器先加载其他内容（如图片，css等）。

压缩CSS和Javascript文件

如果网站的性能最你来说最重要的话，我强烈建议你考虑在展开之前压缩CSS和Javascript文件。在开发之前不要嫌它麻烦，这会对你非常有帮助的。

Javascript压缩服务

CSS压缩服务

另外两个有用的JavaScript压缩工具是 YUI Compressor, 和 JSMin.

jQuery贴士集

不久前，tvidesign.co.uk的Jon Hobbs-Smith发表了一篇非常棒的文章详述了jQuery的25个实用技巧。请确保将该页面收藏了。这里列举了我非常喜欢用的一些技巧。

检查元素是否已经存在？

if ($(’#myDiv).length) {

// this code will only run if the div with an id of #myDiv exists.

使用Context

很多人都没有意识到这一点，当访问dom元素的时候，jQuery函数会接受第二个参数 – “context”。请往下看：

var myElement = $('#someElement');

该代码将命令jQuery越过整个dom。我们可以通过使用context作为第二个参数来加速网站。

var myElement = $('#someElement', $('.someContainer'));

现在我们将告诉jQuery仅搜索.someContainer 内的元素，并且或略所有该元素以外的东西。

使用ID代替Class

当用jQuery访问ID的时候，通常会使用传统的”getElementById”方式。但是，当访问class元素的时候，jQuery必须使用他自己的方式跨越整个dom，结果这样会花费更长的时间。

产看所有25个技巧!

尽可能使用$_GET代替 $_POST

如果在编写Ajax命令的时候，你可以在$_GET 或者$_POST之间选择的话，那么请选择前者。

” Yahoo! Mail团队发现，当使用XMLHttp请求的时候，POST在浏览器中会通过两个步骤实现：首先发送header，然后再发送数据。因此最好使用GET，它仅使用一个TCP数据分组（除非你有非常多的cookies）。” – Developer.Yahoo.com

请记住：不要轻率的使用$_GET。请先弄清楚你第一步要作什么。

适时使用Library和Framework

无论你使用PHP, ASP.NET, Mootools, jQuery，或他们中的多种，请考虑适时的使用架构。

例如:

如果我要在网站上运行一个简单的静态页面，仅需要一个小的Javascript来实现翻转效果，那么使用jQuery的话就不太合适了。
如果我的静态网站的大多数特性被放在一个XML文件中，我就不需要使用架构。否则，我将会网站额外的带宽付出许多费用。

但是，如果我正在建设一个负责的网站，需要一个完整的CMS系统和复杂的数据访问，那么我将会使用一些我常用的架构。

请记住：架构仅仅是在需要的时候才会为你服务，否则请慎用。

YSlow

YSlow是一款非常棒的工具可以帮助你检查网站的有效性。

这里有一个很好的 YSlow视频教程来讲述该款工具的实用性。我强烈推荐你有机会看一看。

学会使用键盘快捷键

大多数有经验的设计师/开发人员都会同意我的观点，如果我要实现网站或者设计的一个变化我都要去工具栏里面寻找相应的菜单，那会浪费我很多时间。我已经使用快捷键很长时间了，以至于我根本不知道这些命令的正确菜单位置。我就知道”Shift + X” 可以打开我需要的面板。

我建议你可以在Google中搜索 “X 快捷键”（X代表软件的名字，比如Photoshop）。打印这些表单放在你垂手可得的地方。在接下来的几个星期中，试着尽可能用鼠标进行操作，渐渐地你就会养成习惯了。

建立一个 “New Website”模板

让我们来看看如何建立一个网站模板。并非所有的网站都需要大型而复杂的应用。有时候，我们仅仅需要一个可以展示我们简历的网站。这时，我们为何不建立一个简单的“模板”来包含你需要的任何东西呢？

在我的模板文件夹里面，我建立了名为”JS”和”CSS”的二级文件夹。

前者包含了我的“DD_belatedPNG.js” 文件 (支持IE6 PNG背景透明)。
后者包含了一个空白的”default.css” 文件以及我自己的自定义reset文件。

除此之外，我还有一个 “index.html(php)” 文件包含了一些我常用的代码片段。这些并没有什么特别之处，不过会节约我不少时间。

正如你所看到的，我引用了我自己的CSS 和Javascript文件,链接了Google上的 jQuery文件，创建了document.ready() jQuery函数，并且打开了一个标准的”container” div。

这看上去非常简单，但却节省了不少时间。

内联Vs.外联

总的来说，你的所有CSS和Javascript文件应该从页面上移走放入其各自的外部文件中。

为什么这么做?

清理代码
简报和内容分开很重要
使用外部文件，数据会被缓存以备后用。这将降低HTML文件大小而不会导致多余的HTTP请求。

如果你仅有几句简单的样式结构，还是可以有例外的。把他们放在HTML页面内或许还是有益的，但仅限此种情况而已。

使用PHP判定Javascript调本是否被调用

AJAX几乎应用到了现在所有的领域，多数是因为他的用户友好性，这些都要归功于Javascript 库。在有些情况下，你需要考虑是否需要使用Javascrip来调用你的脚本。这需要几天的时间来完成这项任务。

其中一个方法就是当发送POST命令的时候使用Javascript附加上一对独特的键值。然后你可以使用PHP来决定某个特殊的值是否存在。如果存在的话，我们就会知道Javascript被调用了。

一个最好的构建方式就是使用PHP的特性”HTTP_X_REQUESTED_WITH”。

if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {

// write some code and rest assured that the Javascript is enabled.

} else {

// Do something different to compensate for users that have JS turned off.

连接到Google的CDN

不久前，Google主机开始存放一些流行的脚本库如jQuery等。如果你正在使用类似的库，我强烈建议你将它们链接到Google的CDN，而不是使用你自己的脚本。

AJAX Libraries API

使用Firefox扩展

我是Google Chrome的忠实用户。他打开的速度非常快，并且运行Javascript的速度也比其他浏览器快很多，至少到目前为止是这样的。但是，你会发现我并不会很快放弃使用Firefox的。它的一系列非常有用的浏览器插件是令人惊叹的。下面就是我最常用的一些：

如果有用的话，可以使用IDE

现在痛恨微软似乎变得非常流行，攻击那些在开发的时候使用IDE的人似乎非常时髦。事实上，这样看来比较愚蠢。

在很多情况，使用高级的IDE应该还是首选，特别是当你在使用OOP语言工作的时候。现在，如果你仅仅是创建一个小巧的HTML模板，Notepad++和Coda这样的程序已经非常棒了。事实上，在这种情况下我还是建议使用这样的工具的，毕竟多余的功能对你来说没有任何用处。但是，当你开发一些高级程序的时候，还是充分利用IDE的优势吧。

[原文链接]

学习10款常用的jQuery特效

4EB Studio — Wed, 12 Nov 2008 06:28:54 +0000

最近开始学习jQuery，这款大受好评的轻量级javascript库。买了本《jQuery基础教程》(Learning jQuery)，刚开始看。很喜欢看国外的这些书籍，译本也好，原文也好，感觉讲的很透彻，基本都是以最先进的互联网标准作为依托讲解的，帮助读者建立全新的web design观念。这些也是国内类似的书籍出版商和作者应该学习的。多看看这些文章，绝对会使你的设计水平和国际接轨。

今天在Web Designer Wall上看到了这样一篇关于jQuery的文章，感觉非常实用，拿来编译一下和大家分享。当然你也可以直接查看原文。

该篇文章通过10个最常用的jQuery效果向设计师和初学者讲述了如何使用jQuery创建Javascript特效。

jQuery如何运行?

首先你需要下载jQuery库并将其插入到你的html页面中(最好是放在标签内)。然后你需要调用脚本运行函数。下面的图例像你详细解释了jQuery是如何运行的。

如何获取元素?

编写jQuery函数相对来说比较简单。你需要掌握的关键点就是如何准确的使用你所需效果的元素。

$("#header") = 获取id为”header”的元素
$("h3") = 获取所有标签为
的元素
$("div#content .photo") = 获取所有
内类为”photo”的元素
$("ul li") = 获取所有
- 元素
- $("ul li:first") = 获取
  - 元素
  1.简单的滑动版
  
  让我们从最简单的滑动版开始。你可能已经见过很多类似的效果了，当你点击一个链接的时候，一个滑动版便向上(下)展开 (view demo)
  
  当类名为”btn-slide”的元素被点击的时候，它将向上(或下)切换(slideToggle)
  元素，然后切换一个CSS类”active”到
  元素。通过使用css样式，类名为.active的元素将会切换箭头图片的背景位置。
```
$(document).ready(function(){$(".btn-slide").click(function(){$("#panel").slideToggle("slow");$(this).toggleClass("active");});

});
```
  2.简单的消失效果
  该示例向你讲述如何设计点击图片按钮后该区域内容消失的效果 (view demo)
  
  当图片元素被点击的时候，它会查找其父元素
  ，并且缓慢的隐藏其透明度。
```
$(document).ready(function(){$(".pane .delete").click(function(){$(this).parents(".pane").animate({ opacity: "hide" }, "slow");});

});
```
  3Chain-able过渡效果
  
  现在让我们来看看jQuery强大的Chain-able效果。仅需几行代码就可以设计出一个按比例变化大小并且渐变消失的飞行的盒子。(view demo)
  
  第1行和第2行: 创建元素被点击时的函数
  
  第3行: 赋予
  元素的.animate函数不透明度值为0.1, 左边可到达的距离为400px, 速度为1200毫秒
  第4行: 赋予.animate函数不透明度值为0.4，顶部距离160px, 高20, 宽20, 速度为”slow”
  第5行: 接下来赋予.animate函数不透明度值为1, 左边距离为0, 高100, 宽100, 速度为”slow”
  第6行: 设置.animate函数的top值为0,速度为”fast”
  第7行: 调用slideUp函数 (默认速度值为”normal”)
  第8行: 调用slideDown, 速度值为”slow”
  
  $(document).ready(function(){$(".run").click(function(){ $("#box").animate({opacity: "0.1", left: "+=400"}, 1200).animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow").animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow").animate({top: "0"}, "fast").slideUp().slideDown("slow")return false; }); });
  
  4a.折叠效果1
  
  下面是一个折叠效果 (view demo)
  
  第1行：为
  内的第一个
  元素添加名为”active”的类，并应用css样式(“active”类将转换箭头图标的背景位置)。
  第2行：隐藏
  内的非第一行的所有
  元素。
  
  当
  元素被点击的时候，它将滑动并切换(slideToggle)下一个
  元素并且向上滑动(slideUp)它的子元素,然后切换类名为”active”的元素。
  
  $(document).ready(function(){$(".accordion h3:first").addClass("active");$(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ $(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");$(this).toggleClass("active");$(this).siblings("h3").removeClass("active"); }); });
  
  4b.折叠效果2
  
  该示例和上面的很类似，不过可以让你自定义默认展开的面板。 (view demo)
  
  In the CSS stylesheet,将 .accordion p设置为 display:none. 现在，假设你要将第三个面板设置为默认打开的面板。你可以这样写 $(".accordion2 p").eq(2).show(); (eq = equal)。注意起始值为0。
  
  $(document).ready(function(){$(".accordion2 h3").eq(2).addClass("active");$(".accordion2 p").eq(2).show(); $(".accordion2 h3").click(function(){$(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");$(this).toggleClass("active");$(this).siblings("h3").removeClass("active");}); });
  
  5a.动态悬停效果1
  
  该示例将会创建一个非常漂亮的渐入渐出的动画悬停效果 (view demo)
  
  当鼠标悬停在菜单上的时候，将会查找下一个元素，并创建animate函数，设置其不透明度和顶部位置。
  
  $(document).ready(function(){$(".menu a").hover(function() {$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");}, function() {$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");}); });
  
  5b.动态悬停效果2
  
  该示例为菜单链接添加 title属性，并将它放在一个变量里面，然后附加到标签上。 (view demo)
  
  第一行附加了一个空的 标签到菜单的元素上。
  
  当鼠标悬停在链接上时，获取 title 属性，将其存放在”hoverText”变量中，然后将带有标记的文本内容赋予变量hoverText的值。
  
  $(document).ready(function(){$(".menu2 a").append(""); $(".menu2 a").hover(function() {$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");var hoverText = $(this).attr("title");$(this).find("em").text(hoverText);}, function() {$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");}); });
  
  6.整个块元素点击效果
  该示例展示了如何创建整个块元素点击效果变换的方式。(view demo)
  
  假设你有一个类名为”pane-list”的
  a，并让其子元素
  的整个模块可以点击。你可以为”.pane-list li”创建一个点击函数，当其被点击的时候，函数会查找元素，并重新定向到href属性值的地址。
  
  $(document).ready(function(){$(".pane-list li").click(function(){window.location=$(this).find("a").attr("href"); return false;}); });
  
  7.折叠面板
  
  让我们结合前面的一些技术来创建一个可折叠的面板。(view demo)
  
  第1段: 隐藏第一个面板后的所有类名为”message_body”的块
  
  第2段: 隐藏第5个以后的所有
  元素
  第3段：当
  被点击的时候，滑动并且换(slideToggle)到下一个
  块。
  第4段: 当按钮被点击的时候，向上滑动所有的
  块。
  第5段: 当被点击的时候，隐藏该元素，显示元素,并且向下移动(slideDown)所有第5个以后的
  元素
  第6段: 当被点击的时候, 隐藏该元素，显示元素,并且向上移动(slideUp)所有第5个以后的
  元素
  
  $(document).ready(function(){//hide message_body after the first one$(".message_list .message_body:gt(0)").hide(); //hide message li after the 5th$(".message_list li:gt(4)").hide(); //toggle message_body$(".message_head").click(function(){$(this).next(".message_body").slideToggle(500)return false;}); //collapse all messages$(".collpase_all_message").click(function(){$(".message_body").slideUp(500)return false;}); //show all messages$(".show_all_message").click(function(){$(this).hide()$(".show_recent_only").show()$(".message_list li:gt(4)").slideDown()return false;}); //show recent messages only$(".show_recent_only").click(function(){$(this).hide()$(".show_all_message").show()$(".message_list li:gt(4)").slideUp()return false;}); });
  
  8.模仿WordPress的评论后台
  
  我相信大多数人都见过WordPress的Ajax评论管理后台。现在让我们用jQuery来模仿一个。为了制造背景颜色动态效果，你需要使用 Color Animations 插件。(view demo)
  
  第1段: 添加”alt”类到所有偶数行
  块，(隔行添加灰色背景)
  
  第2段: 当被点击的时候, 出现提示信息，并变换
  的背景颜色和不透明度
  第3段: 当被点击的时候, 先将
  的背景颜色变为黄色，然后变为白色，并添加”spam”类
  第4段: 当被点击的时候，先将
  背景颜色变为绿色，然后变为白色，并移走”spam”类
  第5段: 当 is clicked, animate the backgroundColor to red and opacity =”hide”
  
  //don't forget to include the Color Animations plugin//$(document).ready(function(){ $(".pane:even").addClass("alt"); $(".pane .btn-delete").click(function(){alert("This comment will be deleted!"); $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow")return false;}); $(".pane .btn-unapprove").click(function(){$(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast").animate({ backgroundColor: "#ffffff" }, "slow").addClass("spam")return false;}); $(".pane .btn-approve").click(function(){$(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast").animate({ backgroundColor: "#ffffff" }, "slow").removeClass("spam")return false;}); $(".pane .btn-spam").click(function(){$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow")return false;}); });
  
  9.图像替换
  
  假设你有一套个人图片集，需要在一个页面上显示多幅图像而无须切换页面，你可以加载JPG图像到目标元素上。 (viewdemo)
  
  首先在H2元素上添加一个空的。
  
  当
  内的链接被点击的时候：
  
  - 将 href 属性存放在变量 “largePath”中
  - 将 title 属性存放在变量 “largeAlt”中
  - 替换的 scr属性为变量”largePath”，并替换 alt属性为变量 “largeAlt”
  - 将 em内容 (在 h2标签内的)赋予变量largeAlt
  
  $(document).ready(function(){$("h2").append('') $(".thumbs a").click(function(){ var largePath = $(this).attr("href");var largeAlt = $(this).attr("title"); $("#largeImg").attr({ src: largePath, alt: largeAlt }); $("h2 em").html(" (" + largeAlt + ")"); return false;}); });
  
  10.定义不同的链接样式
  
  在大多数现代浏览器中，定义link选择器是非常容易的。例如，定义一个链接到.pdf文件，你可以简单的使用以下css规则： a[href $='.pdf'] { ... }。不幸的是，IE6并不支持这个语法（这是为什么我们恨IE!的另一个原因）。为了实现这样的效果，你可以使用jQuery(view demo)
  
  前三行应该很容易理解，就是根据 href属性为元素添加CSS类样式。
  
  第二段是来获取 href属性中不含有”http://www.webdesignerwall.com”字样或者不是以 “#”开头的元素，然后为其添加”external”属性，并将目标浏览器开启方式设置为”_blank”。
  
  $(document).ready(function(){$("a[@href$=pdf]").addClass("pdf"); $("a[@href$=zip]").addClass("zip"); $("a[@href$=psd]").addClass("psd"); $("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]").addClass("external").attr({ target: "_blank" }); });

四眼天兔工作室 » jQuery

10个极具创意的用户交互界面及其制作方法

1. Alex Buga (滑移，可拖动的页脚以及动态按钮)

制作方法 » 使用超级弹性特效制作极具视觉冲击的网页菜单

制作方法 » 漂亮的动态周线表

制作方法 » 事件委派表中的拖拽以及调整大小

2. Ricoverdeo (幻灯效果)

制作方法 » Easy Slider 1.5 – 简单的制作图片与内容滑动的jQuery插件

制作方法 » 自动滑动标签

制作方法 » 垂直折叠面板

制作方法 » 使用Mootools制作折叠面板

4. Dragon Interactive (动态菜单) 我非常喜欢他那叹为观止的菜单，乍一看以为是一个flash，后来通过查看代码发现就是使用了简单的XHTML，CSS以及Javascript。 3.1 动态菜单 制作方法» 使用jQuery制作动态菜单 查看演示

制作方法» 使用jQuery制作动态菜单

制作方法 » 使用CSS和jQuery显示转换钮

制作方法 » jBreadCrumb

制作方法» Custom Form Elements

8. CSS Ninjas (费用预估滑杆) CSS Ninjas提供了一个非常有趣的费用预估滑杆允许客户估算服务费用。 8.1 滑杆 制作方法 » jQuery UI 1.7 Slider 该款插件的目的就是通过渐进增强来控制jQuery UI Slider插件。 查看演示

制作方法 » jQuery UI 1.7 Slider

9. Facebook (表单自动完成) Facebook的地址自动完成表单是表单自动完成的最好案例。 9.1 表单自动完成 制作方法 » FCBKcomplete v 1.09 一款有趣的facebook样式的动态输入框，可以自动完成或预载值。 查看演示

制作方法 » FCBKcomplete v 1.09

制作方法 » s3Slider

15个网站加速，代码优化的技巧

将图片压缩到最小

学会擅用Snippets

利用Console.log()进行调试

下载网页开发工具

将Script标签放置到页面最底端

压缩CSS和Javascript文件

Javascript压缩服务

CSS压缩服务

jQuery贴士集

检查元素是否已经存在？

使用Context

使用ID代替Class

尽可能使用$_GET代替 $_POST

适时使用Library和Framework

YSlow

学会使用键盘快捷键

建立一个 “New Website”模板

内联Vs.外联

为什么这么做?

使用PHP判定Javascript调本是否被调用

连接到Google的CDN

使用Firefox扩展

如果有用的话，可以使用IDE

学习10款常用的jQuery特效

的元素

制作方法 » 使用 Mootools 制作折叠面板

4. Dragon Interactive (动态菜单)

我非常喜欢他那叹为观止的菜单，乍一看以为是一个flash，后来通过查看代码发现就是使用了简单的XHTML，CSS以及Javascript。

3.1 动态菜单

制作方法» 使用jQuery 制作动态菜单

查看演示

制作方法» 使用jQuery 制作动态菜单

8. CSS Ninjas (费用预估滑杆)

CSS Ninjas提供了一个非常有趣的费用预估滑杆允许客户估算服务费用。

8.1 滑杆

制作方法 » jQuery UI 1.7 Slider

该款插件的目的就是通过渐进增强来控制jQuery UI Slider插件。

查看演示

9. Facebook (表单自动完成)

Facebook的地址自动完成表单是表单自动完成的最好案例。

9.1 表单自动完成

制作方法 » FCBKcomplete v 1.09

一款有趣的facebook样式的动态输入框，可以自动完成或预载值。

查看演示