首页 > 代码库 > bshare分享插件的ajax应用
bshare分享插件的ajax应用
在做新浪某个项目的时候,在ajax动态加载的时候,想增加分享功能,采用bshare插件。怎么办呢,看API?可是采用方法调用的时候,不是会重复绑定事件,就是会丢失事件,原因我想在于异步加载的原因。
后来联系客服,不断地调配,终于成功了。分享一下方法
function makeActives(activePage,activeClass)//theClassify为分类参数,在condition里面定义{ //GET请求地址 var category=activeClass, page=activePage, size=5, loadMoreApplyURL=‘/api/event/get_list/?category=‘+category+‘&size=‘+size+‘&page=‘+page; arr1={"上海": "31","云南": "53","其他": "100","内蒙古": "15","北京": "11","台湾地区": "71","吉林": "22","四川": "51","天津": "12","宁夏": "64","安徽": "34","山东": "37","山西": "14","广东": "44","广西": "45","新疆": "65","江苏": "32","江西": "36","河北": "13","河南": "41","浙江": "33","海南": "46","海外": "400","湖北": "42","湖南": "43","澳门地区": "82","甘肃": "62","福建": "35","西藏": "54","贵州": "52","辽宁": "21","重庆": "50","陕西": "61","青海": "63","香港地区": "81","黑龙江": "23"}, arr2={‘高考‘:"1","国际学校":"2","留学":"3","中小学":"4","商学院":"5","外语":"6","其他":"7"}, arr3={‘线上‘:"1","线下":"2"} $.ajax({ url: loadMoreApplyURL, async: false, type: ‘GET‘, dataType: ‘jsonp‘, success: function(data){ callbackFunction(data, activePage); }, error: function(xhr,type){ //报错信息 alert("读取json失败"); } }); function callbackFunction(json, activePage) { if(json.result.status.code=="0"){ var pageN=json.result.data["total_number"]; $(".scroll-data").attr("total-page",pageN); if (creatPages==true) { $("#subShowContent1_page").html(""); findPageNum(activeClass); creatPages=false; } for(var i=0;i<5;i++) { var arr=[]; if (json.result.data.list[i]==undefined) { break; } //标题 3月15日…… var title=json.result.data.list[i].title, //标题的url titleUrl = json.result.data.list[i].url, //左侧 //图片地址 imgUrl = json.result.data.list[i].image, //活动生成日期 creatTime = json.result.data.list[i].publish_time, //分类信息 province = json.result.data.list[i].province, provinceId = arr1[province], category = json.result.data.list[i].category, categoryId = arr2[category], online = json.result.data.list[i].online, onlineId = arr3[online], //右侧 //活动概要前40个字符 summary = (json.result.data.list[i].summary.length > 40) ? (json.result.data.list[i].summary.substring(0,40) + ‘...‘) : json.result.data.list[i].summary, //活动时间 activeTime = json.result.data.list[i].event_time, //活动地点 activePlace = json.result.data.list[i].address, //适合人群 activePerson = json.result.data.list[i].viewer, //活动嘉宾 vip = json.result.data.list[i].guest, //已经报名的人数 hasApplyNum = json.result.data.list[i].sign_num, //未报名的人数 ApplyLeftNum = json.result.data.list[i].left_num, //评论数 commentNum = json.result.data.list[i].commentNum, //评论url commentUrl = json.result.data.list[i].commentUrl, //标题栏的时间 titleTime = json.result.data.list[i].event_date, //id activeId = json.result.data.list[i].id, //是否报名 // btnObj.removeClass(‘btn-regis2 thisFloat‘).addClass(‘btn-regis-ed‘).text(‘已报名‘); // btnObj2.removeClass(‘link-none‘); isBaoMing = json.result.data.list[i].event_status, user_event_sign = json.result.data.list[i].user_event_sign, detailUrl = ‘http://events.edu.sina.com.cn/event/detail/‘+activeId; arr.push(‘<li class="liPage‘+startBind+‘" data-title="‘+title+‘" data-url="‘+titleUrl+‘" data-summary="‘+summary+‘" data-pic="‘+imgUrl+‘"><h3 class="tit2"><em>‘+titleTime+‘</em>‘); arr.push(‘<a href="http://www.mamicode.com/‘+titleUrl+‘" class="title">‘+title+‘</a></h3>‘); arr.push(‘<div class="cont1 clearfix"><a href="http://www.mamicode.com/‘+titleUrl+‘" class="with-map2 left"><img src=http://www.mamicode.com/‘+imgUrl); arr.push(" ‘alt=‘‘></a><div class=‘infor1‘><p class=‘w1‘>"+"<span class=‘summary‘>"+summary+"</span>"); arr.push(‘<a href="http://www.mamicode.com/‘+titleUrl+‘">[详细]</a></p>‘); arr.push(‘<p class="msg2"><span class="contr">活动时间:</span><span>‘+activeTime+‘</span></p>‘); arr.push(‘<p class="msg2"><span class="contr">活动地点:</span><span>‘+activePlace+‘</span></p>‘); arr.push(‘<p class="msg2"><span class="contr">适合人群:</span><span>‘+activePerson+‘</span></p>‘); arr.push(‘<p class="msg2"><span class="contr">活动嘉宾:</span><span>‘+vip); arr.push(‘<a href="http://www.mamicode.com/‘+titleUrl+‘#guests">更多</a></span></p>‘); if (user_event_sign==1) { arr.push(‘<div class="btn-wrap2"><a href="javascript:void(0);" class="btn2 btn-regis-ed jsBtnSignup" id="‘+activeId+‘">已报名</a>‘); arr.push(‘<a href="javascript:void(0);" class="baomingCancel" style="margin-left: 15px;color: #008acb;">取消</a>‘); } if (user_event_sign==0){ if(isBaoMing==0){ arr.push(‘<div class="btn-wrap2"><a href="javascript:void(0);" class="btn2 btn-regis2 jsBtnSignup" id="‘+activeId+‘">立即报名</a>‘); arr.push(‘<a href="javascript:void(0);" class="baomingCancel" style="display:none;margin-left: 15px;color: #008acb;">取消</a>‘); } if(isBaoMing==1){ arr.push(‘<div class="btn-wrap2"><a href="javascript:void(0);" class="btn2 btn-regis-ed jsBtnSignup" id="‘+activeId+‘">报名结束</a>‘); } if(isBaoMing==2 || isBaoMing==3){ arr.push(‘<div class="btn-wrap2"><a href="http://www.mamicode.com/‘+detailUrl+‘" class="btn2 btn-regis-ed jsBtnSignup" id="‘+activeId+‘">查看详情</a>‘); } } // 更改deatil套页面的时候,一处style="margin-left: 10px;",两处style="font-size: 14px;"都分别加上 arr.push(‘<span class="msg3" style="margin-left: 10px;">已报<em style="font-size: 14px;">‘+hasApplyNum+‘</em>人</span>‘); arr.push(‘<span class="msg3">还剩<em style="font-size: 14px;">‘+ApplyLeftNum+‘</em>个名额</span></div></div></div>‘); // 更改结束 arr.push(‘<div class="msgshop clearfix"><p class="date-msg left">‘+creatTime+‘</p>‘); arr.push(‘<dl class="msg4 left"><dt>分类:</dt>‘+‘<dd><a href="http://www.mamicode.com/event/search/?province=‘+provinceId+‘">‘+province+‘</a></dd>‘+‘<dd><a href="http://www.mamicode.com/event/search/?category=‘+categoryId+‘">‘+category+‘</a></dd>‘+‘<dd><a href="http://www.mamicode.com/event/search/?online=‘+onlineId+‘">‘+online+‘</a></dd>‘+‘</dl><div class="link1 right">‘); // 更改detail套页面的时候,相应的地方加上 ,没评论的时候把括号和数字去了 if(commentNum=="0"){ arr.push(‘<div style="float:left;"><a href="http://www.mamicode.com/‘+commentUrl+‘">评论 | </a>‘); } else{ arr.push(‘<div style="float:left;"><a href="http://www.mamicode.com/‘+commentUrl+‘">评论(‘+commentNum+‘) | </a>‘); } arr.push(‘<span>分享</span></div><div class="button-share"><a title="分享到新浪微博" class="share-weibo" id="weibo‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘sinaminiblog‘,"+startBind+‘)"></a><a title="分享到微信" class="weixin" id="weixin‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘weixin‘,"+startBind+‘)"></a><a title="分享到QQ空间" class="qzone" id="qzone‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘qzone‘,"+startBind+‘)"></a><a title="更多平台" class="share-more" id="more‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘shareMore‘,"+startBind+‘)"></a></div>‘); // 新更改 var html=arr.join(‘‘); $(".main-active-list").append(html); if ($(‘.jsBtnSignup‘).text()=="立即报名"){ $(‘.baomingCancel‘).show(); } startBind+=1; // 更改 } } }}
重点在于这一段
arr.push(‘<span>分享</span></div><div class="button-share"><a title="分享到新浪微博" class="share-weibo" id="weibo‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘sinaminiblog‘,"+startBind+‘)"></a><a title="分享到微信" class="weixin" id="weixin‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘weixin‘,"+startBind+‘)"></a><a title="分享到QQ空间" class="qzone" id="qzone‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘qzone‘,"+startBind+‘)"></a><a title="更多平台" class="share-more" id="more‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘shareMore‘,"+startBind+‘)"></a></div>‘);
因为是动态加载到dom里面,因此会有些问题,解决方法如下:先放置一个占位的图片,给每一个动态加载的元素赋上一个独特的id,保证分享的内容准确,然后给一个onlick调用shareTo方法,传三个参数,分别是self,分享平台的短名,分享内容的编号。
function shareTo(event, shortName,startBind) { //自定义设置内容,可动态获取当前页面内相应的参数进行传递 var jq=$("#weibo"+startBind), title=jq.parents(".msgshop").siblings(".tit2").find("a").text(), titleUrl=jq.parents(".msgshop").siblings(".tit2").find("a").attr("href"), summary=jq.parents(".msgshop").siblings(".cont1").find(".summary").text(), imgUrl=jq.parents(".msgshop").siblings(".cont1").find("img").attr("src"); //清除自定义分享内容的方法,在设置前清空,重新自定义内容 bShare.entries = []; //添加自定义分享内容方法,不需要自定义的可以传递,bshare js会主动抓取页面相应值默认 bShare.addEntry({ title: title, url: titleUrl, summary: summary, pic:imgUrl }); if(bShare.isReady == true&& bShare.completed == true){ // alert("hello!"); }else{ bShare.isReady = false; bShare.completed = false; bShare.start(); } //调用相应的分享方法, if (shortName=="shareMore") { bShare.more(event); } else{ bShare.share(event, shortName); }}
完美的解决分享的问题,这个方法在官方API上没有例子,得牢记
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。