iShare版本

支持两种初始化方式： 
#1: 单例模式 
#2: 实例化模式 

本文使用实例化模式来完成初始化工作

01/**

02 * usage

03 */

04 

05// 引入样式文件(自定义样式可以不用引入)

06<link rel="stylesheet" type="text/css" href="./style/fonts/iconfont.css">

07<link rel="stylesheet" type="text/css" href="./style/css/ishare.css">

08 

09// 引入脚本文件

10<script href="javascript:;" type="text/javascript" src="iShare.js"></script>

11 

12// 引入HTML脚本

13<div class="iShare iShare-16 iShareClassName"></div> // 容器类名选择器: "iShareClassName"

14 

15 

16// 实例化对象

17<!--

18<script type="text/javascript">

19    (new iShare({container:'.iShare1',config:{

20        title: '分享标题',

21        description: '这是分享描述文本',

22        url: 'https://github.com/zhansingsong',

23        isAbroad: false,

24        isTitle: true,

25        initialized: true,

26        WXoptions:{

27            evenType: 'click',

28            isTitleVisibility: true,

29            title: '二维码标题',

30            isTipVisibility: true,

31            tip: '二维码描述文本',

32            bgcolor: '#2BAD13',

33            qrcodeW: '二维码宽度',

34            qrcodeH: '二维码高度',

35            qrcodeBgc: '二维码背景色',

36            qrcodeFgc: '二维码前景色'

37        }

38    }}));

39</script>

40-->

01/**

02 * 配置项说明

03 */

04container: '.iShare1', //分享容器节点,仅支持'class'和'id'两种选择模式. 'class'模式: '.class'; 'id'模式: '#id'.

05config:

06    {

07        title: 'title',//分享标题. 默认：document.title

08        description: 'description',//分享描述文本. 默认：meta的description

09        url: 'url',//分享的URL. 默认：location.href

10        initialized: true,//自动创建必须开启字段. isAbroad，isTitle才能生效.默认开启

11        isAbroad: false,

12        //默认undefined，开启国外分享接口 + 国内分享接口.

13        //为true时，开启国外分享接口: 'iShare_facebook','iShare_linkedin','iShare_twitter','iShare_googleplus','iShare_tumblr','iShare_pinterest'.

14        //为false时，开启国内分享接口：'iShare_weibo','iShare_qq','iShare_wechat','iShare_tencent','iShare_douban','iShare_qzone','iShare_renren','iShare_youdaonote'.

15        isTitle: true,//开启title提示, 默认是false.

16        WXoptions:{

17            evenType: 'click',//微信二维码的触发方式,仅支持:'click'和'mouseover',默认为'mouseover'.

18            isTitleVisibility: true,//是否显示二维码标题,默认为显示,即为true.

19            title: '二维码标题',//二维码标题.

20            isTipVisibility: true,//是否显示二维码操作提示,默认为显示,即为true.

21            tip: '二维码描述文本',//二维码描述文本

22            bgcolor: '#2BAD13',//二维码的背景颜色

23            qrcodeW: '120',//二维码宽度

24            qrcodeH: '120',//二维码高度

25            qrcodeBgc: '#0f0',//二维码背景色

26            qrcodeFgc: '#000'//二维码前景色

27        }

28    }

实例1：默认配置

默认配置
icon大小：24px



1// 引入HTML脚本

2<!--

3<div class="iShare iShare1"></div>

4-->

1// 引入配置

2(new iShare({container:'.iShare1',config:{}}));

实例2：国外分享接口

分享icon：16px；
isAbroad：true(开启国外分享接口)；
关闭isTitle



1// 引入HTML脚本

2<!--

3<div class="iShare iShare-16 iShare2"></div> //iShare-16: 表示分享icon大小为16px, 提供三种尺寸：16、24(默认)、32.

4-->

1// 引入配置

2(new iShare({container:'.iShare2',config:{

3    title: '分享标题',

4    description: '这是分享描述文本',

5    url: 'http://www.baidu.com',

6    isAbroad: true,

7    isTitle: true,

8    initialized: true

9}}));

实例3：国内分享接口

分享icon大小：32px；
isAbroad：false(开启国内分享接口)； 
evenType：'click'(修改二维码触发方式为click)；
isTipVisibility：true(隐藏二维码的tip)



1// 引入HTML脚本

2<!--

3<div class="iShare iShare-32 iShare3"></div> //iShare-32: 表示分享icon大小为32px, 提供三种尺寸：16(默认)、24、32.

4-->

01// 引入配置

02(new iShare({container:'.iShare1',config:{

03    title: '分享标题',

04    description: '这是分享描述文本',

05    url: 'http://www.baidu.com',

06    isAbroad: false,

07    isTitle: true,

08    initialized: true,

09    WXoptions:{

10        evenType: 'click',

11        isTitleVisibility: true,

12        title: '二维码标题',

13        isTipVisibility: true,

14        tip: '二维码描述文本',

15        qrcodeW: 140,

16        qrcodeH: 140,

17        qrcodeBgc: '#fff',

18        qrcodeFgc: '#000',

19        bgcolor: '#2BAD13'

20    }

21}}));

实例4：自定义样式

initialized: false(关闭自动创建分享)
自定义样式只需要引入脚本文件即可，不需要引入样式文件。但需要指定为子元素指定类名

自定义样式推荐使用: iShare_tidy版本(主要用于自定义样式)

       我是酱油一号 我是酱油二号

1// 引入脚本文件

2<!-- <script type="text/javascript" src="iShare.js"></script> -->

view source

print?

01// 引入HTML脚本

02<!--

03<div class="iShare iShare4">

04    <a href="#" class="iShare_qzone"><i class="iconfont qzone"></i></a>

05    <a href="#" class="iShare_tencent"><i class="iconfont tencent" style="vertical-align: -2px;"></i></a>

06    <a href="#" class="iShare_weibo"><i class="iconfont weibo"></i></a>

07    <a href="#" class="iShare_wechat"><i class="iconfont wechat" style="vertical-align: -2px;"></i></a>

08    <a href="#" class="iShare_facebook"><i class="iconfont facebook" style="vertical-align: 1px;"></i></a>

09    <a href="#" class="iShare_googleplus"><i class="iconfont googleplus" style="vertical-align: -1px;"></i></a>

10    <a href="#" class="iShare_linkedin"><i class="iconfont linkedin" style="vertical-align: 2px;"></i></a>

11    <a href="#">我是酱油一号</a>

12    <a href="#">我是酱油二号</a>

13</div>

14//子元素需要指定如下的类名：

15//iShare_qq         : 'QQ好友',

16//iShare_qzone      : 'QQ空间',

17//iShare_tencent    : '腾讯微博',

18//iShare_weibo      : '新浪微博',

19//iShare_wechat     : '微信',

20//iShare_douban     : '豆瓣',

21//iShare_renren         : '人人',

22//iShare_youdaonote : '有道笔记',

23//iShare_linkedin   : 'Linkedin',

24//iShare_facebook   : 'Facebook',

25//iShare_twitter    : 'Twitter',

26//iShare_googleplus : 'Google+',

27//iShare_pinterest  : 'Pinterest',

28//iShare_tumblr         : 'Tumblr'

29//插件会根据类名自动处理，如果存在不包含上述类名的子元素，该元素就不作任何处理。

30-->

01// 引入配置

02(new iShare({container:'.iShare4',config:{

03    title: '分享标题',

04    description: '这是分享描述文本',

05    url: 'http://www.baidu.com',

06    initialized: false,

07    WXoptions:{

08        evenType: 'click',

09        isTitleVisibility: true,

10        title: '二维码标题',

11        isTipVisibility: true,

12        tip: '二维码描述文本',

13        qrcodeW: 180,

14        qrcodeH: 180,

15        qrcodeBgc: '#fce4ec',

16        qrcodeFgc: '#000',

17        bgcolor: '#e91e63'

18    }

19}}));