中秋了，一个团圆的日子，结果从杭州回到老家，发现家里的狗没了，一问才得知是去世了，虽然一共加起来没见过几次，但还是挺难过的。发一张照片留作纪念吧。
下面进入正题吧，前几天由于工作需要制作一个分享按钮，考虑到后续其他项目可能也会用到，于是就打算写成插件化，正好也给我自己的插件jquery.hooray增加一个新的功能，为了不浪费大家时间，我先把demo放出来，如果觉得能用到，或者想学是怎么制作的，那就继续往下看。（demo演示）
既然要做成插件，那可制定性肯定要强，不能定死，比如不能把显示个数定死，不能把分享按钮排序定死等等（不过有些东西还是要定死的，太灵活了也就成不了插件了）。这里我的操作办法是……先看代码吧
<
div
class="HRshare1">
<
a
class="hr-share-tsina"></
a
>
<
a
class="hr-share-tqq"></
a
>
<
a
class="hr-share-qzone"></
a
>
<
a
class="hr-share-renren"></
a
>
<
a
class="hr-share-baidu"></
a
>
<
a
class="hr-share-115"></
a
>
<
a
class="hr-share-tsohu"></
a
>
<
a
class="hr-share-taobao"></
a
>
<
a
class="hr-share-xiaoyou"></
a
>
<
a
class="hr-share-more"></
a
>
</
div
>
|
我把所有按钮都用A标记来制作，然后用一个div容器把它们都包在里面，只要在这个容器里，用的是A标记，并且class的名称是按我的规定来命名的就一切OK，至于显示数量，排列顺序什么的，随意。
HTML制定好规范后，就可以开始写css样式了，需要注意的是，为了减少http的请求，按钮的图片我是用css sprites拼接在一起了，如
同时我也制作了32*32的大图标版本，当然你也可以制作其他尺寸的，按个人需求来就行。下面是css代码，没有太多好介绍的，看下就行。
.hr-share
-16
a{
display
:
block
;
width
:
18px
;
height
:
16px
;
background
:
url
(HRico_
16
x
16
.png)
no-repeat
;
float
:
left
;
cursor
:
pointer
}
.hr-share
-16
a:hover{opacity:
0.8
}
.hr-share
-16
a.hr-share-more{
background-position
:
0
0
}
.hr-share
-16
a.hr-share-tsina{
background-position
:
0
-16px
}
.hr-share
-16
a.hr-share-tqq{
background-position
:
0
-32px
}
.hr-share
-16
a.hr-share-qzone{
background-position
:
0
-48px
}
.hr-share
-16
a.hr-share-renren{
background-position
:
0
-64px
}
.hr-share
-16
a.hr-share-baidu{
background-position
:
0
-80px
}
.hr-share
-16
a.hr-share
-115
{
background-position
:
0
-96px
}
.hr-share
-16
a.hr-share-tsohu{
background-position
:
0
-112px
}
.hr-share
-16
a.hr-share-taobao{
background-position
:
0
-128px
}
.hr-share
-16
a.hr-share-xiaoyou{
background-position
:
0
-144px
}
.hr-share
-16
a.hr-share-hi{
background-position
:
0
-160px
}
.hr-share
-16
a.hr-share-fanfou{
background-position
:
0
-176px
}
.hr-share
-16
a.hr-share-sohubai{
background-position
:
0
-192px
}
.hr-share
-16
a.hr-share-feixin{
background-position
:
0
-208px
}
.hr-share
-16
a.hr-share-youshi{
background-position
:
0
-224px
}
.hr-share
-16
a.hr-share-tianya{
background-position
:
0
-240px
}
.hr-share
-16
a.hr-share-msn{
background-position
:
0
-256px
}
.hr-share
-16
a.hr-share-douban{
background-position
:
0
-272px
}
.hr-share
-16
a.hr-share-twangyi{
background-position
:
0
-288px
}
.hr-share
-16
a.hr-share-mop{
background-position
:
0
-304px
}
|
这里我特地为每个按钮的样式加了个.hr-share-16这个前缀，目的一是为了区分出16*16和32*32的图标样式，二是为了之后js代码部分的操作，后面我会讲到。
做完了上面这两步，接下来重点就来了，就是JS的编写，在此之前，我们先把思路理一下，防止在编写完JS后发现有更好的方法，导致重新编写。
首先，每个网站都有自己特定分享链接的代码，我们随机拿2个过来参考下，比如最近很火的腾讯微博和新浪微博。
http://v.t.qq.com/share/share.php?title=分享插件 - jquery.HooRay - jQuery插件 - 制作：胡尐睿丶&url=http://saw.caifutang.com/jquery.hooray/HRshare.html&appkey=118cd1d635c44eab9a4840b2fbf8b0fb
|
http://service.weibo.com/share/share.php?title=分享插件 - jquery.HooRay - jQuery插件 - 制作：胡尐睿丶&url=http://saw.caifutang.com/jquery.hooray/HRshare.html&source=bookmark&appkey=2992571369
|
发现没有？对，就是一般的分享链接只需要两个参数就行，一是页面的标题，另一个就是页面的链接，至于腾讯微博和新浪微博都需要一个appkey，这个另外再说，如果没有，直接用我提供的这个就行，因为appkey需要去申请，过程略微有点麻烦。
接下来，如果掌握了这个，操作起来就简单了，我们只需要对每个按钮绑定一个点击事件，然后调转到制定的链接，就一切OK了。但是如果手动一个个去绑定，那感觉就很麻烦了，而且如果增加一个新的分享，改动的代码量似乎也有点大，而且代码行数也多。所以，绑定按钮事件我是通过循环绑定的。下面就来看下部分代码片段吧。
首先我定义了这么两个数组（tab键的缩进在这里不起作用了，大家凑合着看吧）：
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/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大家可以参考学习下，能用在很多地方：
function
formatmodel(str,model){
for
(
var
k
in
model){
var
re =
new
RegExp(
"{"
+k+
"}"
,
"g"
);
str = str.replace(re,model[k]);
}
return
str;
}
|
做到这一步，就已经全部OK了。有人会问那个“更多”按钮的怎么没说，其实那个和js没有太大联系了，只是html+css的展示效果而已，事件绑定还是上面那段核心代码，如果有兴趣，可以下载我整个插件源码进行查看，插件免费开源使用，可以随意修改，但请保留作者和联系方式。
完整插件查看地址：点击进入
本文转自胡尐睿丶博客园博客，原文链接：http://www.cnblogs.com/hooray/archive/2011/09/10/2172946.html，如需转载请自行联系原作者
