首页 > 代码库 > 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套页面的时候,相应的地方加上&nbsp;&nbsp;,没评论的时候把括号和数字去了                if(commentNum=="0"){                    arr.push(‘<div style="float:left;"><a href="http://www.mamicode.com/‘+commentUrl+‘">评论&nbsp;&nbsp;|&nbsp;&nbsp;</a>‘);                }                else{                    arr.push(‘<div style="float:left;"><a href="http://www.mamicode.com/‘+commentUrl+‘">评论(‘+commentNum+‘)&nbsp;&nbsp;|&nbsp;&nbsp;</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上没有例子,得牢记