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

前几天由于工作需要制作一个分享按钮,考虑到后续其他项目可能也会用到,于是就打算写成插件化,正好也给我自己的插件jquery.hooray增加一个新的功能,为了不浪费大家时间,我先把demo放出来,如果觉得能用到,或者想学是怎么制作的,那就继续往下看。(demo演示)

既然要做成插件,那可制定性肯定要强,不能定死,比如不能把显示个数定死,不能把分享按钮排序定死等等(不过有些东西还是要定死的,太灵活了也就成不了插件了)。这里我的操作办法是……先看代码吧

我把所有按钮都用A标记来制作,然后用一个div容器把它们都包在里面,只要在这个容器里,用的是A标记,并且class的名称是按我的规定来命名的就一切OK,至于显示数量,排列顺序什么的,随意。

HTML制定好规范后,就可以开始写css样式了,需要注意的是,为了减少http的请求,按钮的图片我是用css sprites拼接在一起了,如

20110919003620928.jpg

同时我也制作了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插件 - 制作:胡尐睿丶&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",

"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.mzph.cn/news/550527.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

北京理工大学珠海学院专业计算机类,北京理工大学珠海学院计算机学院网络工程专业...

北京理工大学珠海学院计算机学院网络工程专业发表时间:2019-10-10作者:211大学网日前,在计算机学院网络工程专业林开荣、张海燕老师的带领下,6名来自北京理工大学珠海学院2016级网络工程专业学生参加了珠海市职业技能竞赛云计算工…

国防科技大学计算机学院教员,我国最好的四所科技大学,第一名排名世界前列,还有一所是铁饭碗...

分享亲子快乐,交流教育知识,欢迎关注陆北老师2021年泰晤士世界大学排名揭晓,中国科技大学进入了前一百名,而南方科技大学也进入了前三百名。其实我国的科技类大学,以中国科技大学为首,有四所的实力非常雄厚…

计算机图形学基础教程论文,计算机图形学小论文

为毕业生写计算机图形学小论文提供计算机图形学小论文范文参考,涵盖硕士、大学本科毕业论文范文和职称论文范文,包括论文选题、开题报告、文献综述、任务书、参考文献等,是优秀免费计算机图形学小论文网站。计算机图形学的发展及应用探讨摘要计算机图形学…

c语言添加变量到数据库+a+ +b+ 的方法,《C程序设计基础》模拟考试题(含答案)...

《C程序设计基础》模拟考试题一、选择题(每题2分。共23道选择题)1、关于C程序的叙述,错误的说法是(B)A、C程序总是从主函数开始执行B、C程序中定义的第一个函数是主函数C、在主函数中可以调用其他函数D、一个C程序可以包括多个函数2、C语言的基本数据类型包括(A)A、…

长沙理工大学计算机网络试题,长沙理工大学考试试卷(计算机网络)要点.docx

长沙理工大学考试试卷????????????????????????????????????????卷 号1 教研室(或教 ) 名易建 教研室主任 名蔡碧野????????????????????????????????????????程名称(含档次) 算机网 原理与技…

暗黑3 和社群服务器连线中断,进入《暗黑3夺魂之镰》必须知道10件事

《暗黑破坏神3》首部资料片自去年德国科隆游戏展首次亮相之后已经过去两年时间,昨天凌晨2:00新版游戏正式在台湾上线(全球其它地区也在陆续开服中),同时台湾战网也向准备进入资料片的玩家给出了10点注意事项,了解这些将帮助大家更…

哔哩哔哩服务器在哪个文件夹,哔哩哔哩缓存在哪个文件夹 具体操作步骤

我们在手机b站中缓存了视频,如果想要找到源文件,就必须要在手机的内部存储中去寻找,实际上,手机b站缓存的视频隐藏的很深,其查看路径为:文件管理/本地/内部存储/android/data/tv.danmaku.bili/download/“随…

layui表单的ajax联动,layui的select联动实现代码

要实现联动效果注意两点:第一要可以监听到select的change事件;第二异步加载的内容,需要重新渲染后才可以 正常使用。html结构:所在省份:请选择省份${provincelist.fullname}#list>所在城市 :所在区域 &a…

超算和服务器性能,烽火GPU高性能服务器助力武大超算中心建设

近日,继“武汉大学100G高速网络及网格计算集群采购项目”中标后,烽火GPU高性能服务器再次中标“武汉大学GPU集群采购项目”。作为行业首例,此次烽火将在武大超算中心同时提供Intel KNL以及NVIDIA GPU超算解决方案,两种顶尖HPC方案…

ajax成功之后在执行,ajax传入成功后执行后台方法

做一个网站,再页面读取一段文字后,点击按钮,用ajax将文字传回后台,现在我希望ajax返回成功后,执行另外一段后台方法,请问有什么好方法吗?[WebMethod]public static string GetStr(string s){lin…

Ajax用证书调用,跨域的jQuery AJAX调用,带证书(Cross domain jQuery ajax call

我已经遵循以下步骤:获取服务器允许跨域调用(与所有的标题和东西) 这个工程测试服务器与一些跨域调用此作品获取服务器以强制证书这工作一起去参加一个浏览器的服务器上的文件,选择合适的证书,并看到该文件仍然有效现在,我们得到了…

C++PrimerPlus学习——第四章编程练习

**疫情期间学习C 4-1 需要使用cin.get()设置读取位数&#xff0c;避免空格导致无法读取多个词 #include <iostream> struct info_people //define structure {char first_name[20];char last_name[20];char grade;unsigned int age; }; int main() {using namespace std…

C++PrimerPlus学习——第六章编程练习

6-1 有个问题&#xff0c;如果输入的字符既不是数字也不是字母是不是应该原样输出呢&#xff1f; #include <iostream> #include <cctype>int main() {using namespace std;char ch;cout << "Please enter something.\n";while (cin.get(ch) &…

C++PrimerPlus学习——第七章编程练习

感觉变困难了很多&#xff0c;必须要注意细节&#xff0c;不如就会出各种bug 7-1 #include <iostream> double average(double a, double b);int main() {using namespace std;double a, b;a b 0;cout << "Enter ta number:" << endl;cin >…

C++PrimerPlus学习——第九章编程练习

前两天有事情去了&#xff0c;没有好好学&#xff0c;之后要补回来 9-1 main.cpp #include <string.h> #include <iostream> #include"golf.h"const int GolfSize 3; int main() {golf ann;setgolf(ann, "Ann Birdfree", 24);showgolf(ann);…

C++PrimerPlus学习——第十一章编程练习

11-1 应该是修改list11.15&#xff0c;当当官方店买的&#xff0c;难道是盗版书吗。。。 打开file之后&#xff0c;操作跟cout类似 vect.h #ifndef VECT_h_ #define VECT_h_ #include <iostream> namespace VECTOR {class Vector{public:enum Mode { RECT, POL };privat…

C++PrimerPlus学习——第十三章编程练习

13-1 注意char*前面加const&#xff0c;不然就会报错 Classis.h #ifndef CLASSIC_H_ #define CLASS_H_ #include <string> class Cd { private:char performers[50];char label[20];int selections;double playtime; public:Cd(const char* s1, const char* s2, int n, …

C++PrimerPlus学习——第十四章编程练习

14-1 参考14.19 winec.h #ifndef WINEC_H_ #define WINEC_H_ #include <string> #include <valarray> using std::string;template<class T1, class T2> class Pair { private:T1 year;T2 bottles; public:Pair() {};Pair(const T1 y, const T2 b) :year(y)…

C++PrimerPlus学习——第十七章编程练习

17-1 不知道有没有理解错题意&#xff0c;参考list17.14 #include <iostream>int main() {using std::cout;using std::cin;using std::endl;char ch;int count 0;while (cin.peek() ! $){cin.get(ch);count;cout << ch;}cout << "\nThere are "…

数字图像处理基础与应用学习,第二章

计算灰度直方图和RGB三个通道的灰度直方图 Tips 1.计算灰度 cv2.calcHist(images, channels, mask, histSize, ranges[, hist[, accumulate ]]) imaes:输入的图像 channels:选择图像的通道 mask:掩膜&#xff0c;是一个大小和image一样的np数组&#xff0c;其中把需要处理的部分…