百度分享插件使用[通俗易懂]

百度分享插件使用[通俗易懂]这一篇写的比较全面,各种参数也基本都有了:百度分享代码–一键分享BaiduShareBEGIN这里完整的展示一下插件如何编写。首先需要插入百度分享插件js文件:Tip:这个插件不支持htt

大家好,又见面了,我是你们的朋友全栈君。

这一篇写的比较全面,各种参数也基本都有了:百度分享代码–一键分享Baidu Share BEGIN

 

这里完整的展示一下插件如何编写。

首先需要插入百度分享插件js文件:

Tip:这个插件不支持https,如果要用https的话就直接把 static 文件夹放在网站的根目录下,并将百度分享代码中的 http://bdimg.share.baidu.com/ 改为 / 。下载支持HTTPS百度分享插件

with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src =
    'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];

 

DOM中需要添加的内容:

<div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more">更多</a>
    <a href="#" class="bds_qzone" data-cmd="qzone">QQ空间</a>
</div>

<div class=”bdsharebuttonbox”>是必须要有的,在其内部可以添加各种分享按钮,具体请看最上面提到的文章

class=”bds_moredata-cmd=”more”  分享按钮的 class 和 data-cmd 要相互对应

js 部分,插件的初始化属性配置:

 1  window._bd_share_config = {  2  common: {  3         bdText: '分享的内容',  4         bdMini: "2",                // 下拉浮层分享按钮的列数
 5         bdMiniList: ['mshare', 'qzone', 'tsina', 'weixin', 'tqq', 'tieba', 'copy', 'print'],   // 下拉浮层显示的内容,默认显示为 false
 6         bdPic: '/assets/share.jpg',    // 分享的图片
 7         bdStyle: "0",  8         bdSize: "16",  9         bdUrl: '',                  // 分享的地址
10         onBeforeClick: setConf      // 在用户点击分享按钮时执行代码,更改配置。function(cmd,config){} cmd为分享目标id,config为当前设置,返回值为更新后的设置。
11  }, 12  share: [] 13 };
bdMiniList 可以配置鼠标悬浮时具体显示哪些分享按钮,按照如上配置会显示为:
百度分享插件使用[通俗易懂]

 如果改为 false ,则会显示:

百度分享插件使用[通俗易懂]

如果一个页面需要分享不同的内容,就要在分享之前重新配置。这里用 mouseover 事件监听,动态修改参数,等待 onBeforeClick  被触发,从而达到动态配置分享内容的目的:

 1 function setConf(cmd, config) {  2     if (url) {  3         config.bdUrl = url;  4         config.bdText = title;  5  }  6     return config;  7 }  8 $('.bdsharebuttonbox a').on('mouseover', function () {  9     title = $(this).data('title'); 10     url = window.location.origin+$(this).data('url'); 11 })

但是对于点击“更多”出来的分享弹出框中的内容如何自定义还没有找到方法。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155480.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • PHP永久激活码2021(最新序列号破解)

    PHP永久激活码2021(最新序列号破解),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 应届毕业生java面试准备_Java应届生面试

    应届毕业生java面试准备_Java应届生面试应届没工作经验的可以看看。背景介绍:非名校,软件工程专业,无相关工作经验,实际编程只有在学校学习时。刚刚毕业,找工作中。大家都知道,开发这一行没有工作经验相当的吃亏,如果没有丰富的知识,对知识良好的理解,与优秀的自学能力,很难找到工作。经过近一个月的面试,总结一些信息。面试过程…

  • matlab 矩阵除法

    matlab 矩阵除法Matlab提供了两种除法运算:左除(/)和右除(/)。一般情况下,x=a/b是方程a*x=b的解,而x=b/a是方程x*a=b的解。例:a=[1  2  3;4  2  6;7  4  9]b=[4;1;2];x=a/b则显示:x=      -1.5000        2.0000        0.5000如果a为非奇异矩阵,则a/b和b/a可通过a的逆矩阵与

  • gpsgate 配置过程

    gpsgate 配置过程gpsgate是一个虚拟串口的软件。通过gpsgate虚拟出来的串口可以同时连接N个应用程序。举个例子来说,QIGI智能手机的gps通讯端口是com3,波特率手是9600。我们通过gpsgate虚拟出

  • vb存储柜的实现,【一个超实用的小软件】

    vb存储柜的实现,【一个超实用的小软件】

  • 001-圆周率1万位「建议收藏」

    001-圆周率1万位「建议收藏」3.14159265358979323846264338327950288419716939937510582097494459230781640628620899862803482534211706798214808651328230664709384460955058223172535940812848111745028410270193852110555964462294895493038196442881097566593344612847564823378678316527120190914564

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号