iShare.js分享插件

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: '二維碼描述文本',
            qrcodeW: '120',
            qrcodeH: '120',
            qrcodeBgc: '#e1bee7',
            qrcodeFgc: '#4a148c',
            bgcolor: '#9c27b0'
        }
    }};
</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">
   iShare_config = {container:'.iShare1',config:{
            title: '分享標題',
            description: '這是分享描述文本',
            url: 'https://github.com/zhansingsong',
            WXoptions:{
                evenType: 'click',
                isTitleVisibility: true,
                title: '二維碼標題',
                isTipVisibility: true,
                tip: '二維碼描述文本',
                bgcolor: '#2BAD13',
                qrcodeW: 140,
                qrcodeH: 140,
                qrcodeBgc: '#e1bee7',
                qrcodeFgc: '#4a148c',
                bgcolor: '#9c27b0'
            }
        }};
</script>

更多詳情請參考DEMO

• • iShare版本
  • iShare_tidy版本