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


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 相关文章推荐
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
js实现网页抽奖实例
Aug 05 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
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
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js数组去重的hash方法
2016/12/22 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
Python MD5文件生成码
2009/01/12 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python读取文本中的坐标方法
2018/10/14 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python三大神器之fabric使用教程
2019/06/10 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
python实现无边框进度条的实例代码
2020/12/30 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
工地资料员岗位职责
2013/12/31 职场文书
个人简历自我评价范文
2014/02/04 职场文书
合理化建议书范文
2015/09/14 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL