iShare.js
iShare.js是一个小巧的分享插件，纯JS编写，不依赖任何第三方库，使用简便。
目前国内比较受欢迎的分享插件，都集成了很多常用的分享接口，功能都很丰富。不过个人体验后，总结如下不足（个人观点）：
- 定制度不高，特别在自定义样式上╮(╯﹏╰)╭。
- 没有更新维护，部分接口都是挂掉的。
- 提供的大部分接口都是没有用到，而真正用到就那么几个，显得有点冗余。
iShare.js是针对上述问题而诞生的，并为自定义样式的创建方式定制了专门的精简版：iShare_tidy
定制二维码样式：
安装
npm install zhansingsong-ishare || bower install zhansingsong-ishare
Features
- 支持UMD模式（AMD，CMD, Globals）
- 纯js编写，不依赖任何库
- 多种配置方式
- 兼容性好
- 支持常用的分享接口
支持分享接口
- QQ好友
- QQ空间
- 腾讯微博
- 新浪微博
- 微信
- 豆瓣
- 人人
- 有道笔记
- Google+
- Tumblr
配置项
container: '.iShare1',
config:
{
title: 'title',
description: 'description',
url: 'url',
img: 'imgurl'，
description: 'description',
sites: ['iShare_weibo','iShare_qq','iShare_wechat','iShare_tencent','iShare_douban','iShare_qzone','iShare_renren','iShare_youdaonote','iShare_facebook','iShare_linkedin','iShare_twitter','iShare_googleplus','iShare_tumblr','iShare_pinterest'],
initialized: true,
isAbroad: false,
isTitle: true,
WXoptions:{
evenType: 'click',
isTitleVisibility: true,
title: '二维码标题',
isTipVisibility: true,
tip: '二维码描述文本',
bgcolor: '#2BAD13',
qrcodeW: '二维码宽度',
qrcodeH: '二维码高度',
qrcodeBgc: '二维码背景色',
qrcodeFgc: '二维码前景色'
}
}- container: 分享容器节点,仅支持
'class'和'id'两种选择模式。'class'模式:'.class';'id'模式:'#id'. - config:
- title：分享标题. 默认:
document.title - url：分享的URL. 默认：
location.href - description：分享的summary或description，默认为meta的description
- image：指定分享图片的src，默认为页面第一图片
- sites：指定使用那些分享接口
- initialized：自动创建必须开启字段.
isAbroad，isTitle才能生效.默认开启 - isTitle：如果为
true,会开启a标签的title属性, 默认是为false - isAbroad：
- 默认
undefined，开启国外分享接口 + 国内分享接口. - 为true时，开启国外分享接口:
'iShare_facebook','iShare_linkedin','iShare_twitter','iShare_googleplus','iShare_tumblr','iShare_pinterest'. - 为false时，开启国内分享接口：
'iShare_weibo','iShare_qq','iShare_wechat','iShare_tencent','iShare_douban','iShare_qzone','iShare_renren','iShare_youdaonote'.
- 默认
- WXoptions：
- evenType：微信二维码的触发方式，仅支持:
'click'和'mouseover'，默认为'mouseover'. - isTitleVisibility：是否显示二维码标题，默认为显示，即为
true. - title：二维码标题.
- isTipVisibility：是否显示二维码描述信息，默认为显示，即为
true. - tip：二维码描述文本
- bgcolor：二维码的背景颜色
- qrcodeW：二维码宽度, 默认
120 - qrcodeH：二维码高度, 默认
120 - qrcodeBgc：二维码背景色, 默认
#fff - qrcodeFgc：二维码前景色, 默认
#000
- evenType：微信二维码的触发方式，仅支持:
- title：分享标题. 默认:
使用
支持两种初始化方式：
- 单例模式
- 实例化模式
注意：不要同时使用两种模式
如果存在微信分享，需要引入qrcode.min.js文件，并存放在iShare.js|iShare_tidy.js同级目录中。插件会自动加载。
单例模式
本实例展示了自定义样式分享的创建过程。另外本库针对自定义样式的创建提炼出一个精简版本：iShare_tidy版本
// 引入脚本文件
<script type="text/javascript" src="iShare_tidy.js"></script>// 引入HTML脚本
<div class="iShare iShare1">
<a href="#" class="iShare_qzone"><i class="iconfont qzone"></i></a>
<a href="#" class="iShare_tencent"><i class="iconfont tencent" style="vertical-align: -2px;"></i></a>
<a href="#" class="iShare_weibo"><i class="iconfont weibo"></i></a>
<a href="#" class="iShare_wechat"><i class="iconfont wechat" style="vertical-align: -2px;"></i></a>
<a href="#" class="iShare_facebook"><i class="iconfont facebook" style="vertical-align: 1px;"></i></a>
<a href="#" class="iShare_googleplus"><i class="iconfont googleplus" style="vertical-align: -1px;"></i></a>
<a href="#" class="iShare_linkedin"><i class="iconfont linkedin" style="vertical-align: 2px;"></i></a>
<a href="#">我是酱油一号</a>
<a href="#">我是酱油二号</a>
</div>
//子元素需要指定如下的类名：
//iShare_qq : 'QQ好友',
//iShare_qzone : 'QQ空间',
//iShare_tencent : '腾讯微博',
//iShare_weibo : '新浪微博',
//iShare_wechat : '微信',
//iShare_douban : '豆瓣',
//iShare_renren : '人人',
//iShare_youdaonote : '有道笔记',
//iShare_linkedin : 'Linkedin',
//iShare_facebook : 'Facebook',
//iShare_twitter : 'Twitter',
//iShare_googleplus : 'Google+',
//iShare_pinterest : 'Pinterest',
//iShare_tumblr : 'Tumblr'
//插件会根据类名自动处理，如果存在不包含上述类名的子元素，该元素就不作任何处理。// 配置全局变量iShare_config
<script type="text/javascript">
iShare_config = {container:'.iShare1',config:{
title: '分享标题',
description: '这是分享描述文本',
url: 'https://github.com/zhansingsong',
WXoptions:{
evenType: 'click',
isTitleVisibility: true,
title: '二维码标题',
isTipVisibility: true,
tip: '二维码描述文本',
bgcolor: '#2BAD13',
qrcodeW: 120,
qrcodeH: 120,
qrcodeBgc: #fff,
qrcodeFgc: #000
}
}};
</script>实例化模式
// 引入样式文件(自定义样式可以不用引入)
<link rel="stylesheet" type="text/css" href="./style/fonts/iconfont.css">
<link rel="stylesheet" type="text/css" href="./style/css/ishare.css">// 引入脚本文件
<script href="javascript:;" type="text/javascript" src="iShare.js"></script>// 引入HTML脚本
<div class="iShare iShare-16 iShareClassName"></div> // 容器类名选择器: "iShareClassName"// 实例化对象
<script type="text/javascript">
(new iShare({container:'.iShare1',config:{
title: '分享标题',
description: '这是分享描述文本',
url: 'https://github.com/zhansingsong',
isAbroad: false,
isTitle: true,
initialized: true,
WXoptions:{
evenType: 'click',
isTitleVisibility: true,
title: '二维码标题',
isTipVisibility: true,
tip: '二维码描述文本',
bgcolor: '#2BAD13',
qrcodeW: 120,
qrcodeH: 120,
qrcodeBgc: #fff,
qrcodeFgc: #000
}
}}));
</script>Changelog
- 1.1.0：修改二维码的生成接口，现由
https://github.com/davidshimjs/qrcodejs库来生成。并增加qrcodeW,qrcodeH,qrcodeBgc,qrcodeFgc配置项。
更多详情请参考DEMO
License
iShare.js is covered by the MIT License.