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


Posted in Javascript onSeptember 19, 2011

前几天由于工作需要制作一个分享按钮,考虑到后续其他项目可能也会用到,于是就打算写成插件化,正好也给我自己的插件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_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?http://v.t.qq.com/share/share.php?title=分享插件 - jquery.HooRay - jQuery插件 - 制作:胡??X?amp;url=http://saw.caifutang.com/jquery.hooray/HRshare.html&appkey=118cd1d635c44eab9a4840b2fbf8b0fb
view sourceprint?http://service.weibo.com/share/share.php?title=分享插件 - jquery.HooRay - jQuery插件 - 制作:胡??X?amp;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", 
"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的展示效果而已,事件绑定还是上面那段核心代码,如果有兴趣,可以下载我整个插件源码进行查看,插件免费开源使用,可以随意修改,但请保留作者和联系方式。
完整插件查看地址:点击进入
Javascript 相关文章推荐
jquery获取input的value问题说明
Aug 19 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
jquery实现页面加载效果
Feb 21 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
50个比较实用jQuery代码段
Sep 18 #Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 #Javascript
Jquery 表格合并的问题分享
Sep 17 #Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 #Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 #Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 #Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 #Javascript
You might like
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
餐饮营销方案
2014/02/23 职场文书
教师党员公开承诺书
2014/03/25 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
消防标语大全
2014/06/07 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
上下班时间调整通知
2015/04/23 职场文书
2019入党申请书格式
2019/06/25 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
图文详解Nginx版本平滑升级方案
2021/09/15 Servers