jQuery实现社会化分享插件

所属分类：其他-独立的部件

100181 527 查看评论 (24)

分享到微信朋友圈

查看演示立即下载

插件描述：社会化分享插件简单高效酷炫顺畅的交互体验目前可以分享的平台有:腾讯微博新浪微博QQ空间豆瓣微信二维码分享

此插件是基于jquery的,因此需要先引入jquery文件,之后在引入样式及js文件:

<link rel="stylesheet" href="css/share.css" type="text/css" />
<script src="js/share.js" type="text/javascript"></script>

组件分享

组件的方式使用,代码如下:

<div id="socialShare"></div>
 $(function() {
     $("#socialShare").socialShare({
           content: '自己动手编写jquery插件',
           url:'http://kiritor.github.io/2015/09/28/shiro-Authentication/',
           titile:'自己动手编写jquery插件title'
     });
 });

单独分享

也可以自己定义单个按钮的样式,独立分享,例如:

<a id="shareQQ" class="className">分享到QQ空间</a>$("#shareQQ").on("click",function(){
    $(this).socialShare("tQQ");
})

插件提供一些单独的分享方法,当然也可以自己定义参数

$("#shareQQ").on("click",function(){
    $(this).socialShare("tQQ",{
        url:'',
        content,'',
        title:''
    });
})

参数

当前支持4个参数:

{
    url: '分享的网址',  
    title: '分享的标题',
    content: '内容',
    pic: '图片'}

参数为可选,其中url和title的默认值为当前页面的url和title

方法

方法名	参数	描述
init	param:{url,content,title,pic}	初始化插件
tQQ	param:{url,content,title,pic}	分享到腾讯微博
qZone	param:{url,content,title,pic}	分享到QQ空间
sinaWeibo	param:{url,content,title,pic}	分享到新浪微博
doubanShare	param:{url,content,title,pic}	分享到豆瓣
weixinShare	param:{url,content,title,pic}	分享到微信