iShare.js是一个玲珑的分享插件，纯JS编写，不依赖任何第三方库，运用轻便。

为啥写这个插件？

由于在搭建个人blog时（还没有搭建好(¯﹃¯)），对目前国内比较受欢迎的分享插件都不太惬意，重要以下几点：

• 不太喜好官方供应的款式，想从新定制，但又不太轻易

• 供应的大部份接口都没用到，真正用到就那末几个，显得有点冗余

• 没有举行更新保护，部份接口都是挂掉
  别的，工作中，偶然想要一个能够自定义款式、支撑经常使用的分享接口、运用轻易、不依赖于第三库的自力库。比方写运动页面时(⊙﹏⊙)

基于上述缘由本身就建立了iShare.js，并为自定义款式的建立体式格局定制了特地的精简版：iShare_tidy

展现结果：

二维码定制结果：

支撑分享接口

• QQ挚友

• QQ空间

• 腾讯微博

• 新浪微博

• 微信

• 豆瓣

• 大家

• 有道笔记

• Linkedin

• Facebook

• Twitter

• Google+

• Pinterest

• Tumblr

运用

支撑两种初始化体式格局：

• 单例形式

• 实例化形式

注重：不要同时运用两种形式

单例形式

本实例展现了自定义款式分享的建立历程。别的本库针对自定义款式的建立提炼出一个精简版本：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">&#xe610;</i></a>
    <a href="#" class="iShare_tencent"><i class="iconfont tencent" style="vertical-align: -2px;">&#xe608;</i></a>
    <a href="#" class="iShare_weibo"><i class="iconfont weibo">&#xe609;</i></a>
    <a href="#" class="iShare_wechat"><i class="iconfont wechat" style="vertical-align: -2px;">&#xe613;</i></a>
    <a href="#" class="iShare_facebook"><i class="iconfont facebook" style="vertical-align: 1px;">&#xe601;</i></a>
    <a href="#" class="iShare_googleplus"><i class="iconfont googleplus" style="vertical-align: -1px;">&#xe60b;</i></a>
    <a href="#" class="iShare_linkedin"><i class="iconfont linkedin" style="vertical-align: 2px;">&#xe607;</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>

更多详情请参考DEMO

• iShare版本

• iShare_tidy版本