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


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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
var与Javascript变量隐式声明
Sep 17 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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
杏林同学录(六)
2006/10/09 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python聚类算法之基本K均值实例详解
2015/11/20 Python
django中模板的html自动转意方法
2018/05/27 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
python中有函数重载吗
2020/05/28 Python
Django封装交互接口代码
2020/07/12 Python
python爬虫请求头设置代码
2020/07/28 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
四种会话跟踪技术
2015/05/20 面试题
团结主题班会
2015/08/13 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL