一个分享按钮的插件使用介绍(可扩展,内附开(2)


var shareico = {
"tqq" :"http://v.t.qq.com/share/share.php?title={title}&url={url}&appkey=118cd1d635c44eab9a4840b2fbf8b0fb",
"tsina" :"http://service.weibo.com/share/share.php?title={title}&url={url}&source=bookmark&appkey=2992571369",
"qzone" :"http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&title={title}",
"renren" :"http://share.renren.com/share/buttonshare.do?link={url}&title={title}",
"baidu" :"http://cang.baidu.com/do/add?it={title}&iu={url}&fr=ien#nw=1",
"115" :"http://sc.115.com/add?url={url}&title={title}",
"tsohu" :"http://t.sohu.com/third/post.jsp?url={url}&title={title}&content=utf-8",
"taobao" :"http://share.jianghu.taobao.com/share/addShare.htm?url={url}",
"xiaoyou" :"http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url={url}",
"hi" :"http://apps.hi.baidu.com/share/?url={url}&title={title}",
"fanfou" :"http://fanfou.com/sharer?u={url}&t={title}",
"sohubai" :"http://bai.sohu.com/share/blank/add.do?link={url}",
"feixin" :"http://space3.feixin.10086.cn/api/share?title={title}&url={url}",
"youshi" :"http://www.ushi.cn/feedShare/feedShare!sharetomicroblog.jhtml?type=button&loginflag=share&title={title}&url={url}",
"tianya" :"http://share.tianya.cn/openapp/restpage/activity/appendDiv.jsp?app_id=jiathis&ccTitle={title}&ccUrl={url}&jtss=tianya&ccBody=",
"msn" :"http://profile.live.com/P.mvc#!/badge?url={url}&screenshot=",
"douban" :"http://shuo.douban.com/!service/share?image=&href={url}&name={title}",
"twangyi" :"http://t.163.com/article/user/checkLogin.do?source={title}&info={title}+{url}&images=",
"mop" :"http://tk.mop.com/api/post.htm?url={url}&title={title}"
};
var shareiconame = {
"tqq" :"腾讯微博",
"tsina" :"新浪微博",
"qzone" :"QQ空间",
"renren" :"人人网",
"baidu" :"百度收藏",
"115" :"115",
"tsohu" :"搜狐微博",
"taobao" :"淘江湖",
"xiaoyou" :"腾讯朋友",
"hi" :"百度空间",
"fanfou" :"饭否",
"sohubai" :"搜狐白社会",
"feixin" :"飞信",
"tianya" :"天涯社区",
"youshi" :"优士网",
"msn" :"MSN",
"douban" :"豆瓣",
"twangyi" :"网易微博",
"mop" :"猫扑推客"
};


第一个数组很明了,就是每个分享按钮对应的链接地址,我把其中title和url都替换成了{title}和{url},之后在循环绑定的时候,通过正则去替换掉。第二个数组就是对应各自的中文名称,用于显示前台每个按钮的title,如:分享到腾讯微博、分享到新浪微博等。
  因为js没有多维数组的概念,所以我就定义了2数组。接下来就是js代码实现部分了(为了当作教程,我把一些参数直接写死了,便于大家理解)。

复制代码 代码如下:


$("div").addClass("hr-share-16");
var title = document.title;
var url = window.location.href;
function eFunction(str){
return function(){
window.open(formatmodel(shareico[str],{title:title, url:url}));
}
}
for(si in shareico){
$(".hr-share-"+si).die('click').live('click',eFunction(si)).attr("title","分享到"+shareiconame[si]);
}


这里,我首先给最外面那个div容器添加了一个class样式,就是我上面说到的那个,执行到这句代码后,你会发现页面上按钮的样式都出来了。
  接着,我分别通过document.title和window.location.href获取到了当前页面的标题和链接。然后是一个叫eFunction的方法,这个跳过下,等会说。
  下面是一个for循环,这里就是实现了循环绑定点击事件的效果。这里需要注意两点:一,因为我是写成插件,所以页面上可能不止一处用到分享按钮,为了防止重复事件绑定,所以我在绑定每个事件前都用die去解除绑定;二,我用的是live,而不是bind,因为我担心可能有的项目里的分享插件是通过ajax在页面载入完毕之后再载入进来的,所以我绑定就直接用live绑定了。
  再说下那个eFunction的问题,肯定有人会问为什么不把eFunction里的内容直接写在live的click事件里。其实我最开始也是这么做的,但不这么做的原因很简单,我无法把自定义的参数传进去。至于为什么,我问了下一些JS高人,是个闭包的问题,这个东西我不是很清楚,总之就是找了这么一个办法来解决了。如果有人能给我具体讲解下闭包的问题,我非常感谢。
  在绑定事件里还有一个formatmodel方法,这个是替换用的,也就是我上面说的,用正则去替换掉{title}和{url},这个function大家可以参考学习下,能用在很多地方:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjsxs.html