一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)

2020-05-18 08:58:45易采站长站整理

.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?http://v.t.qq.com/share/share.php?title=分享插件 – jquery.HooRay – jQuery插件 – 制作:胡尐睿丶&url=http://saw.caifutang.com/jquery.hooray/HRshare.html&appkey=118cd1d635c44eab9a4840b2fbf8b0fb
view sourceprint?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.renren.com/share/buttonshare.do?link={url}&title={title}”,
“baidu” :”http://cang.baidu.com/do/add?it={title}&iu={url}&fr=ien#nw=1″,