给设计师的jQuery教程（第三部分）

发布时间：2018-08-19 18:17:26 所属栏目：业界来源：站长网

导读：副标题#e# 文章导读：给设计师的jQuery教程（第一部分）给设计师的jQuery教程（第二部分） 7.可折叠面板（Demo）结合前面的技巧我们来实现一个可折叠的面板列（类似于gmail的邮件面板）。是否注意到我在Web Designer Wall的留言列表也运用了这种个效果？

9.图片展览馆（Demo）

你想无刷新的展览一些你的图片作品集？可以的，往元素中加载图片就可以了。

给设计师的jQuery教程（第三部分）

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] $(document).ready(function(){

$("h2").append('<em></em>')

$(".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;
});

});

过程

在<h2>后面添加兄弟元素<em>
当一个链接.thumbs a被点击把被点击的<a>标签的href键值存储到”IargePath”变量中，把它的title键值存储到”IargeAlt”变量中。
用”largePath”替换<img id=”IargeImg”>的src键值，”LargeAlt”为alt的键值。
“LargeAlt”外加括号添加给<em>

10.样式化不同的类型的链接（Demo）

绝大多数的浏览器，样式化链接选择器很简单，比如说：样式化一个.pdf链接，你只需简单如此写CSS选择器：a[href $=’.pdf’]{……}。不幸的是，IE6不支持这种选择器（这也是我们讨厌IE的又一个原因！）。但是可以运用jQuery修补这个问题。

给设计师的jQuery教程（第三部分）

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] $(document).ready(function(){

$("a[@href$=pdf]").addClass("pdf");

$("a[@href$=zip]").addClass("zip");

$("a[@href$=psd]").addClass("psd");

$("a:not([@href*=http://www.veryhuo.com])").not("[href^=#]")
.addClass("external")
.attr({ target: "_blank" });

});

（编辑：惠州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2/4

首页

尾页