首 页
关于方维
网站案例
网站建设
小程序开发
解决方案
建站资讯
联系方维
400-800-9385
网站分享插件之Share分享插件
发表日期:2023-04-10 10:25:26 作者来源:黎云辉 浏览:955 标签:
网站建设
当前位置:
首页
-
建站资讯
-
网站建设
最近发现
bshare以及百度分享插件,有一大堆问题,类似于样式错乱,分享链接不生效等不兼容性问题,调整起来也相当麻烦,所以干脆换一种插件。于是被我找到了
Share.js
,这
是一款一键转发工具,它可以一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站
,调用起来也相当简单。
引入项目
:
JS,CSS:
<link rel="stylesheet" href="__CSS__/share.min.css">
<script src="__JS__/social-share.js"></script>
<script src="__JS__/qrcode.js"></script>
Html:
<div class="social-share"></div>
其中“social-share”这个是必须的类名,此外还有一些特殊的参数设置如下:
例如:
禁用 google、twitter、facebook
,需要用到
data-disabled
<div class="social-share"
data-disabled
="google,twitter,facebook"></div>
设置微信二维码标题
,需要用到
data-wechat-qrcode-title
<div class="social-share" data-wechat-qrcode-title="请打开微信扫一扫"></div>
针对特定站点使用不同的属性(title, url, description,image...)
<div class="social-share" data-weibo-title="这个标题只有的分享到微博时有用,其它标题为全局标题" data-qq-title="分享到QQ时用此标题"></div>
你也可以
自定义图标
:
使用: data-initialized="true" 标签来禁用自动生成icon功能。
<div class="social-share" data-initialized="true">
<a href="#" class="social-share-icon icon-weibo"></a>
<a href="#" class="social-share-icon icon-qq"></a>
<a href="#" class="social-share-icon icon-qzone"></a>
</div>
以上a
标签
会自动加上分享链接(a 标签必须带 icon-NAME 属性,不然分享链接不会自动加上)。
如果你想在分享icon列表中内置一些元素,比如放一个收藏按钮在分享按钮的后面:
<div class="social-share">
<a href="javascript:;" class="social-share-icon icon-heart"></a>
</div>
这样
的
结果是所有的分享按钮都创建在了收藏按钮
(
icon-heart
)
的后面了,这时候你就可以用 data-mode="prepend" 来确定分享按钮创建的方式。
<div class="social-share" data-mode="prepend">
<a href="javascript:;" class="social-share-icon icon-heart"></a>
</div>
这样
一来
所有的分享图标就会创建在容器的内容前面
。
以下是下载链接:
https://github.com/overtrue/share.js/zipball/master
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6736.html
上一篇:
前端开发之使用新的 CSS sin() 和 cos() 三角函数创建一个时钟
下一篇:
小白网站建设三部曲-第一篇建设网站的初入门
相关网站设计案例
上海巴克斯酒业有限公司(锐澳)
亿联无限
依诺生物
相关资讯
常见问题
企业网站建设常见问题整理合集【置顶】
在深圳建设一个公司网站多少钱
开发网站需要多久跟这九个因素有关
最新文章
在页面上切换显示多个动态的高德地图
浏览量:1676
网页设计中什么是字距、字距和行距?
浏览量:1444
通过ip获取用户国家城市信息
浏览量:920
【签约】百达联康生物科技中英文响...
浏览量:2991
华大网站内页优化可行性方案
浏览量:905
字体心理学:如何使用它来创建...
浏览量:1305
400-800-9385
97798819
回到顶部