自己写的一个分享按钮的插件(可扩展,内附开发制作流程)-阿里云开发者社区

开发者社区> 橘子红了呐> 正文

自己写的一个分享按钮的插件(可扩展,内附开发制作流程)

简介:
+关注继续查看

  中秋了,一个团圆的日子,结果从杭州回到老家,发现家里的狗没了,一问才得知是去世了,虽然一共加起来没见过几次,但还是挺难过的。发一张照片留作纪念吧。

  下面进入正题吧,前几天由于工作需要制作一个分享按钮,考虑到后续其他项目可能也会用到,于是就打算写成插件化,正好也给我自己的插件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个过来参考下,比如最近很火的腾讯微博和新浪微博。

http://v.t.qq.com/share/share.php?title=分享插件 - jquery.HooRay - jQuery插件 - 制作:胡尐睿丶&url=http://saw.caifutang.com/jquery.hooray/HRshare.html&appkey=118cd1d635c44eab9a4840b2fbf8b0fb
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/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的展示效果而已,事件绑定还是上面那段核心代码,如果有兴趣,可以下载我整个插件源码进行查看,插件免费开源使用,可以随意修改,但请保留作者和联系方式。

  完整插件查看地址:点击进入





   本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2011/09/10/2172946.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于阿里的Node全栈之路(七)[源码分享]——打造高效的开发流程
上一篇忘记放github地址了,这份代码可以说是我打造阿里高自动化运维的结晶,基本上,如果是在阿里云上部署项目的Node全栈工程师,应该会有很多借鉴的地方,如果有什么不懂的,也欢迎来找我。
2222 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8660 0
分享到支付宝demo测试流程(Android版)
产品首页:[url]https://openclub.alipay.com/read.php?tid=13656&fid=72[/url] 1、创建应用,并添加功能 如何创建应用:[url]https://openclub.
544 0
支付宝预授权配置芝麻分门槛、借用数量等信息流程分享
说明: 商户签约“支付宝预授权”接口成功,并且成功开通芝麻免押功能后就可以登录:[url]https://b.xin.xin/ant/index.htm[/url]   来自助配置芝麻分门槛、借用数量等信息。
793 0
通用社区登陆组件技术分享(开源)中篇:OAuth 登陆组件流程及组件集成方法
原文http://www.cnblogs.com/cyq1162/archive/2012/11/06/2756247.html   上节内容:通用社区登陆组件技术分享(开源)上篇:OAuth 授权登陆介绍   本节包括以下内容: 1:第三方社区账号登陆的授权流程 2:OAuth2 组件的下载及web.
818 0
3404
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载