加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

给设计师的jQuery教程(第三部分)

发布时间:2018-08-18 06:02:28 所属栏目:业界 来源:站长网
导读:文章导读: 给设计师的jQuery教程(第一部分) 给设计师的jQuery教程(第二部分) 7.可折叠面板(Demo) 结合前面的技巧我们来实现一个可折叠的面板列(类似于gmail的邮件面板)。是否注意到我在Web Designer Wall的留言列表也运用了这种个效果? Copy to

9.图片展览馆(Demo)

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

给设计师的jQuery教程(第三部分)

 

Copy to ClipboardLiehuo.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 ClipboardLiehuo.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" });

});

前三行很简单,就是根据a的href的不同为其添加不同的CSS class。

接下来为所有href中有”http://www.veryhuo.com“字符串并且不以”#”开头的<a>添加class “esternal”并且设置target=”_blank”。

本文由:http://www.cnblogs.com/island205/ 翻译自:web designer wall

全部实例下载:jquery-tutorials.zip

(完) 欢迎您继续阅读烈火网的其它文章。

(编辑:核心网)

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

热点阅读