前几天由于工作需要制作一个分享按钮，考虑到后续其他项目可能也会用到，于是就打算写成插件化，正好也给我自己的插件jquery.hooray增加一个新的功能，为了不浪费大家时间，我先把demo放出来，如果觉得能用到，或者想学是怎么制作的，那就继续往下看。（demo演示）
既然要做成插件，那可制定性肯定要强，不能定死，比如不能把显示个数定死，不能把分享按钮排序定死等等（不过有些东西还是要定死的，太灵活了也就成不了插件了）。这里我的操作办法是……先看代码吧
复制代码 代码如下:
<div>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></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_16x16.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个过来参考下，比如最近很火的腾讯微博和新浪微博。
view sourceprint??title=分享插件 - jquery.HooRay - jQuery插件 - 制作：胡尐睿丶&url=https://saw.caifutang.com/jquery.hooray/HRshare.html&appkey=118cd1d635c44eab9a4840b2fbf8b0fb
view sourceprint??title=分享插件 - jquery.HooRay - jQuery插件 - 制作：胡尐睿丶&url=https://saw.caifutang.com/jquery.hooray/HRshare.html&source=bookmark&appkey=2992571369
发现没有？对，就是一般的分享链接只需要两个参数就行，一是页面的标题，另一个就是页面的链接，至于腾讯微博和新浪微博都需要一个appkey，这个另外再说，如果没有，直接用我提供的这个就行，因为appkey需要去申请，过程略微有点麻烦。
接下来，如果掌握了这个，操作起来就简单了，我们只需要对每个按钮绑定一个点击事件，然后调转到制定的链接，就一切OK了。但是如果手动一个个去绑定，那感觉就很麻烦了，而且如果增加一个新的分享，改动的代码量似乎也有点大，而且代码行数也多。所以，绑定按钮事件我是通过循环绑定的。下面就来看下部分代码片段吧。
首先我定义了这么两个数组（tab键的缩进在这里不起作用了，大家凑合着看吧）：
复制代码 代码如下: