网站优化建设扬州,品牌营销策略论文,政务类网站,广州展厅设计公司有哪些前几天由于工作需要制作一个分享按钮#xff0c;考虑到后续其他项目可能也会用到#xff0c;于是就打算写成插件化#xff0c;正好也给我自己的插件jquery.hooray增加一个新的功能#xff0c;为了不浪费大家时间#xff0c;我先把demo放出来#xff0c;如果觉得能用到考虑到后续其他项目可能也会用到于是就打算写成插件化正好也给我自己的插件jquery.hooray增加一个新的功能为了不浪费大家时间我先把demo放出来如果觉得能用到或者想学是怎么制作的那就继续往下看。(demo演示)既然要做成插件那可制定性肯定要强不能定死比如不能把显示个数定死不能把分享按钮排序定死等等(不过有些东西还是要定死的太灵活了也就成不了插件了)。这里我的操作办法是……先看代码吧我把所有按钮都用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插件 - 制作胡尐睿丶urlhttp://saw.caifutang.com/jquery.hooray/HRshare.htmlappkey118cd1d635c44eab9a4840b2fbf8b0fbview sourceprint?http://service.weibo.com/share/share.php?title分享插件 - jquery.HooRay - jQuery插件 - 制作胡尐睿丶urlhttp://saw.caifutang.com/jquery.hooray/HRshare.htmlsourcebookmarkappkey2992571369发现没有对就是一般的分享链接只需要两个参数就行一是页面的标题另一个就是页面的链接至于腾讯微博和新浪微博都需要一个appkey这个另外再说如果没有直接用我提供的这个就行因为appkey需要去申请过程略微有点麻烦。接下来如果掌握了这个操作起来就简单了我们只需要对每个按钮绑定一个点击事件然后调转到制定的链接就一切OK了。但是如果手动一个个去绑定那感觉就很麻烦了而且如果增加一个新的分享改动的代码量似乎也有点大而且代码行数也多。所以绑定按钮事件我是通过循环绑定的。下面就来看下部分代码片段吧。首先我定义了这么两个数组(tab键的缩进在这里不起作用了大家凑合着看吧)var shareico {tqq :http://v.t.qq.com/share/share.php?title{title}url{url}appkey118cd1d635c44eab9a4840b2fbf8b0fb,tsina :http://service.weibo.com/share/share.php?title{title}url{url}sourcebookmarkappkey2992571369,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}frien#nw1,115 :http://sc.115.com/add?url{url}title{title},tsohu :http://t.sohu.com/third/post.jsp?url{url}title{title}contentutf-8,taobao :http://share.jianghu.taobao.com/share/addShare.htm?url{url},xiaoyou :http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?topengyouurl{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?typebuttonloginflagsharetitle{title}url{url},tianya :http://share.tianya.cn/openapp/restpage/activity/appendDiv.jsp?app_idjiathisccTitle{title}ccUrl{url}jtsstianyaccBody,msn :http://profile.live.com/P.mvc#!/badge?url{url}screenshot,douban :http://shuo.douban.com/!service/share?imagehref{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没有太大联系了只是htmlcss的展示效果而已事件绑定还是上面那段核心代码如果有兴趣可以下载我整个插件源码进行查看插件免费开源使用可以随意修改但请保留作者和联系方式。完整插件查看地址点击进入
