黑马程序员技术交流社区

标题: 【广州前端】-- 一款十分简单的分享插件介绍—Jquery.share.js [打印本页]

---

作者: 李盼盼老师    时间: 2017-12-21 16:19
标题: 【广州前端】-- 一款十分简单的分享插件介绍—Jquery.share.js

一款十分简单的基于jquery的分享插件—Jquery.share.js

查看更多精彩前端资源

【简介】

   jQuery.share.js是一个简单、重量轻、灵活、好看的jquery分享按钮提示插件。所有主要的社交网络有自己的jquery分享按钮，你可以将他们放在你的页面上。如下图所示：

【使用步骤】

1.     需要引入的文件

[HTML] 纯文本查看 复制代码

<linkrel="stylesheet" href="share.min.css">

<script src="jquery-1.10.2.js"></script>

<scriptsrc="jquery.share.min.js"></script>

<!-- 这里的案例的字体图标已在share.min.css中引入 -->

2.     分享按钮的实现代码

2.1第一种实现方式

只需要写html结构代码,把jquery.share.js引入即可实现分享按钮!

<!—a.全部可支持的分享平台都会显示出来-->

[HTML] 纯文本查看 复制代码

<divclass="social-share"></div>

<!-- b 定义可显示出来的分享平台,例如我只想显示

weibo,qq,qzone,tencent,那么就把这些想显示的平台写在

data-sites 属性里面-->

   

[HTML] 纯文本查看 复制代码

<divclass="social-share"data-sites="weibo,qq,qzone,tencent"></div>

<!-- c 自己定义分享链接,如果以上的所有分享平台都不满足你的需要,那么你还可以自己定义自己想要的分享平台,  加上属性data-initialized="true"即可,把要分享的链接写在a标签里面 -->

[HTML] 纯文本查看 复制代码

<div class="social-share"data-initialized="true">

     <ahref="#" class="social-share-icon icon-weibo"></a>

     <ahref="#" class="social-share-icon icon-qq"></a>

     <ahref="#" class="social-share-icon icon-qzone"></a>

</div>

2.2第二种实现方式

下面这种方式,同样需要引入前面提到的文件,然后还需写一些简单的初始化代码

a.    全部分享平台都显示

Html结构代码

[HTML] 纯文本查看 复制代码

<divid="share-1"></div>

Js代码

[JavaScript] 纯文本查看 复制代码

$('#share-1').share();

b.    只显示所需的分享平台

Html结构代码

[HTML] 纯文本查看 复制代码

<divid="share-2"></div>

Js代码

[JavaScript] 纯文本查看 复制代码

$('#share-2').share({sites: ['qzone', 'qq','weibo','wechat']});

【案例分享】

   1、案例演示

      

myshare.rar

2017-12-21 16:18 上传

点击文件名下载附件

65.2 KB, 下载次数: 279

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2