400 186 1886
标签添加"active"类方法（用来切换箭头图标的背景位置）；在第二行，隐藏第一个除外的所有中的标签。
[p]点击
标签时，牵引下一个
标签并向上滑动其所有的同类标签。[/p]
[b]代码如下：[/b]$(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");
});
});
[p][b]4b，折叠样式2[/b][/p]
[p]这个效果跟4a中的效果基本一致，唯一不同的是指定了初始默认打开的层([url=http://bbon.cn/wp-content/uploads/demo/jquery/accordion2.html]点击观看效果[/url])。[/p]
[b]工作原理：[/b]在css样式表中设置.accordion p的display:none。假如你想设置第三个层为默认的打开状态，那么你就可以这样写：
$(".accordion2 p").eq(2).show(); //(eq = equal)默认从0开始计数
[b]代码如下：[/b]$(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");
});
});
[p][b]5a，漂亮的鼠标hover悬停效果1[/b][/p]
[p]本例实现的是一个精美的鼠标悬停时的渐隐渐现效果([url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover1.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover1.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample4.gif[/img][/url]
图6 漂亮的鼠标hover悬停效果1
[b]工作原理：[/b]鼠标悬停在链接菜单上时，找到下面的并激活其opacity不透明属性和top位置。
[b]代码如下：[/b]$(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");
});
});
[p][color=#000000][b]5b，漂亮的鼠标hover悬停效果2[/b][/color][/p]
[p][color=#000000]这个例子是获取链接菜单的title属性，保存在一个变量里面，然后附加给标签([url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover2.html]点击观看效果[/url])。[/color][/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover2.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample4b.gif[/img][/url]
图7 漂亮的鼠标hover悬停效果2
[b]工作原理：[/b]在第一行将一个空的赋值给链接菜单的元素。鼠标悬停在链接菜单上时，就会获取title的属性，保存给一个"hovertext"变量，然后把"hovertext"的值赋给的文本内容。
[b]代码如下：[/b]$(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");
});
});
[p][color=#000000][b]6，块级鼠标样式[/b][/color][/p]
[p]本例展示的是一个块级鼠标样式，就像[url=http://bestwebgallery.com/]best web gallery[/url]这个网站的侧边栏效果似的([url=http://bbon.cn/wp-content/uploads/demo/jquery/block-clickable.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/block-clickable.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample5.gif[/img][/url]
图8 [color=#000000]块级鼠标样式[/color]
[b]工作原理：[/b]假设你有一个class属性为”pane-list”的列表，你希望嵌套在其内部的- 可以实现块状点击样式，你就可以把这个点击方法赋值给”.pane-list li”。在点击时，这个方法就会找到元素，并重定向浏览器位置到它的href属性值。
[b]代码如下：[/b]$(document).ready(function(){ $(".pane-list li").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
});
[p][b]7，折叠面板[/b][/p]
[p]现在，让我们结合上面例子的技巧方法，创建一个折叠面板效果吧（跟gmail收件箱效果差不多）([url=http://bbon.cn/wp-content/uploads/demo/jquery/collapsible-panels.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/collapsible-panels.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample6.gif[/img][/url]
图9 [color=#000000]折叠面板样式[/color]
[b]工作原理：[/b]
[p]第一行：隐藏除第一个以外的所有[/p]
[p]第二行：隐藏第五个后面的所有
- 标签[/p]
[p]第三行：当点击[/p]
[p]第四行：当点击按钮时，向上滑动所有的[/p]
[p]第五行：当点击，并向下滑动第五个以后的所有
- [/p]
[p]最后一行：当点击时，隐藏本身，显示class=”show_all_message”>，并向上滑动第五个以后的所有
- [/p]
[b]代码如下：[/b]$(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;
});
});
[p][b]8，模仿wordpress后台评论管理[/b][/p]
[p]可能我们绝大多数人都看到过wordpress aiax后台评论管理效果。在这个例子中，我们就用jquery模仿出这个效果，不过首先你要用到一个[url=http://plugins.jquery.com/project/color][b]color animations[/b][/url]插件）([url=http://bbon.cn/wp-content/uploads/demo/jquery/wordpress-comments.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/wordpress-comments.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample7.gif[/img][/url]
图10 [color=#000000]wordpress后台评论管理样式[/color]
[b]工作原理：[/b]
[p]第一行：添加”alt”类给（给每个赋值灰色背景）[/p]
[p]第二行：在点击时，弹出警告框信息后，激活层的背景色和不透明度[/p]
[p]第三行：点击时，使层的背景色变黄再变白，并增加”spam”类样式[/p]
[p]第四行：点击时，使层的背景色变绿再变白，并移除”spam”类样式[/p]
[p]最后一行：点击时，背景色变红，并设置不透明度为”hide”[/p]
[b]代码如下：[/b]//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;
});
});
[p][b]9，图片展示切换[/b][/p]
[p]如果你不想通过页面跳转的方式来展示多幅图片的话，那么这个例子的方法绝对是可行的。你可以把jpg图片加载到一个target中去([url=http://bbon.cn/wp-content/uploads/demo/jquery/img-replacement.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/img-replacement.html][img]http://bbon.cn/wp-content/themes/wpink//images/grey.gif[/img][/url]
图11 [color=#000000]图片展示切换样式[/color]
[b]工作原理：[/b]首先为h2添加一个空的。当一个
内的链接被触发时，把href属性赋给一个”largepath”变量；把title属性赋给一个”largealt”变量；用变量”largepath”替换![]()
的scr属性；用变量”largealt”替换alt属性；最后，用变量的largealt（附加在brackets中）设置h2内em内容。
[b]代码如下：[/b]$(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;
});
});
[p][b][color=#000000]10，样式化不同链接类型[/color][/b][/p]
对于大多数流行的浏览器来说，定义不同类型的链接样式是非常容易的。例如，定义一个.pdf格式文件的链接样式，我们可以使用这样的css规则实现：a[href $='.pdf'] { ... }.但不幸的是，ie6并不支持这种定义（这也是我们为什么讨厌ie浏览器的一个原因）。为了实现浏览器间的兼容性，我们可以用jquery实现([url=http://bbon.cn/wp-content/uploads/demo/jquery/link-types.html]点击观看效果[/url])。
[url=http://bbon.cn/wp-content/uploads/demo/jquery/link-types.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample9.gif[/img][/url]
图12 [color=#000000]图片展示切换样式[/color]
[b]工作原理：[/b]前三个链接样式要各自定义实现，根据他们的href属性分别调用css样式给各自的；其他的部分，使得所有没有"[url=http://webdesignerwall.com/]http://webdesignerwall.com[/url]"和/或在href属性中不是以”#”开头的标签，然后添加”external”样式，并设置打开target为”_blank”。
[b]代码如下：[/b]$(document).ready(function(){ $("a[@href$=pdf]").addclass("pdf");
$("a[@href$=zip]").addclass("zip");
$("a[@href$=psd]").addclass("psd");
$("a:not([@href*=http://webdesignerwall.com])").not("[href^=#]")
.addclass("external")
.attr({ target: "_blank" });
});
[p][b]ｐｓ：[/b]其实看到这篇文章好几天了，只是没时间翻译过来分享。今天弄到了半夜终于搞定了，翻译比较粗糙，如有错误瑕疵，请一定指正。翻译的过程中，学到了很多东西，加深了我对jquery的爱。[/p]
[p][url=http://bbon.cn/]菠菜博[/url]下载：[url=http://bbon.cn/wp-content/uploads/2008/03/jquery-tutorials.zip]网站设计师jquery指南打包下载[/url] [url=http://webdesignerwall.com/file/jquery-tutorials.zip]原文下载地址[/url][/p]
[p][url=http://bbon.cn/]菠菜博[/url]demo：[url=http://bbon.cn/wp-content/uploads/demo/jquery]点击浏览[/url] [url=http://webdesignerwall.com/demo/jquery/]原文demo[/url][/p]
[p]原文地址：[url=http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers/]jquery tutorials for designers[/url][/p]
[p]中文翻译：[url=http://bbon.cn/post/283]网站设计师jquery上手指南[/url][/p]
[p]翻译博客：[url=http://bbon.cn/]菠菜博[/url][/p]
[p][url=http://bbon.cn/2008/03/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1%e5%b8%88jquery%e4%b8%8a%e6%89%8b%e6%8c%87%e5%8d%97.html]http://bbon.cn/2008/03/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1%e5%b8%88jquery%e4%b8%8a%e6%89%8b%e6%8c%87%e5%8d%97.html[/url][/p]
该文章在 2010/4/27 2:48:12 编辑过
标签。 [p]点击
标签时，牵引下一个
标签并向上滑动其所有的同类标签。[/p]
[b]代码如下：[/b]$(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");
});
});
[p][b]4b，折叠样式2[/b][/p]
[p]这个效果跟4a中的效果基本一致，唯一不同的是指定了初始默认打开的层([url=http://bbon.cn/wp-content/uploads/demo/jquery/accordion2.html]点击观看效果[/url])。[/p]
[b]工作原理：[/b]在css样式表中设置.accordion p的display:none。假如你想设置第三个层为默认的打开状态，那么你就可以这样写：
$(".accordion2 p").eq(2).show(); //(eq = equal)默认从0开始计数
[b]代码如下：[/b]$(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");
});
});
[p][b]5a，漂亮的鼠标hover悬停效果1[/b][/p]
[p]本例实现的是一个精美的鼠标悬停时的渐隐渐现效果([url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover1.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover1.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample4.gif[/img][/url]
图6 漂亮的鼠标hover悬停效果1
[b]工作原理：[/b]鼠标悬停在链接菜单上时，找到下面的并激活其opacity不透明属性和top位置。
[b]代码如下：[/b]$(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");
});
});
[p][color=#000000][b]5b，漂亮的鼠标hover悬停效果2[/b][/color][/p]
[p][color=#000000]这个例子是获取链接菜单的title属性，保存在一个变量里面，然后附加给标签([url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover2.html]点击观看效果[/url])。[/color][/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover2.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample4b.gif[/img][/url]
图7 漂亮的鼠标hover悬停效果2
[b]工作原理：[/b]在第一行将一个空的赋值给链接菜单的元素。鼠标悬停在链接菜单上时，就会获取title的属性，保存给一个"hovertext"变量，然后把"hovertext"的值赋给的文本内容。
[b]代码如下：[/b]$(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");
});
});
[p][color=#000000][b]6，块级鼠标样式[/b][/color][/p]
[p]本例展示的是一个块级鼠标样式，就像[url=http://bestwebgallery.com/]best web gallery[/url]这个网站的侧边栏效果似的([url=http://bbon.cn/wp-content/uploads/demo/jquery/block-clickable.html]点击观看效果[/url])。[/p]
[url=http://bbon.cn/wp-content/uploads/demo/jquery/block-clickable.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample5.gif[/img][/url]
图8 [color=#000000]块级鼠标样式[/color]
[b]工作原理：[/b]假设你有一个class属性为”pane-list”的 内的链接被触发时，把href属性赋给一个”largepath”变量；把title属性赋给一个”largealt”变量；用变量”largepath”替换列表，你希望嵌套在其内部的
的scr属性；用变量”largealt”替换alt属性；最后，用变量的largealt（附加在brackets中）设置h2内em内容。
[b]代码如下：[/b]$(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;
});
});
[p][b][color=#000000]10，样式化不同链接类型[/color][/b][/p]
对于大多数流行的浏览器来说，定义不同类型的链接样式是非常容易的。例如，定义一个.pdf格式文件的链接样式，我们可以使用这样的css规则实现：a[href $='.pdf'] { ... }.但不幸的是，ie6并不支持这种定义（这也是我们为什么讨厌ie浏览器的一个原因）。为了实现浏览器间的兼容性，我们可以用jquery实现([url=http://bbon.cn/wp-content/uploads/demo/jquery/link-types.html]点击观看效果[/url])。
[url=http://bbon.cn/wp-content/uploads/demo/jquery/link-types.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample9.gif[/img][/url]
图12 [color=#000000]图片展示切换样式[/color]
[b]工作原理：[/b]前三个链接样式要各自定义实现，根据他们的href属性分别调用css样式给各自的；其他的部分，使得所有没有"[url=http://webdesignerwall.com/]http://webdesignerwall.com[/url]"和/或在href属性中不是以”#”开头的标签，然后添加”external”样式，并设置打开target为”_blank”。
[b]代码如下：[/b]$(document).ready(function(){ $("a[@href$=pdf]").addclass("pdf");
$("a[@href$=zip]").addclass("zip");
$("a[@href$=psd]").addclass("psd");
$("a:not([@href*=http://webdesignerwall.com])").not("[href^=#]")
.addclass("external")
.attr({ target: "_blank" });
});
[p][b]ｐｓ：[/b]其实看到这篇文章好几天了，只是没时间翻译过来分享。今天弄到了半夜终于搞定了，翻译比较粗糙，如有错误瑕疵，请一定指正。翻译的过程中，学到了很多东西，加深了我对jquery的爱。[/p]
[p][url=http://bbon.cn/]菠菜博[/url]下载：[url=http://bbon.cn/wp-content/uploads/2008/03/jquery-tutorials.zip]网站设计师jquery指南打包下载[/url] [url=http://webdesignerwall.com/file/jquery-tutorials.zip]原文下载地址[/url][/p]
[p][url=http://bbon.cn/]菠菜博[/url]demo：[url=http://bbon.cn/wp-content/uploads/demo/jquery]点击浏览[/url] [url=http://webdesignerwall.com/demo/jquery/]原文demo[/url][/p]
[p]原文地址：[url=http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers/]jquery tutorials for designers[/url][/p]
[p]中文翻译：[url=http://bbon.cn/post/283]网站设计师jquery上手指南[/url][/p]
[p]翻译博客：[url=http://bbon.cn/]菠菜博[/url][/p]
[p][url=http://bbon.cn/2008/03/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1%e5%b8%88jquery%e4%b8%8a%e6%89%8b%e6%8c%87%e5%8d%97.html]http://bbon.cn/2008/03/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1%e5%b8%88jquery%e4%b8%8a%e6%89%8b%e6%8c%87%e5%8d%97.html[/url][/p]
该文章在 2010/4/27 2:48:12 编辑过
