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"></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: '二维码描述文本',
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.js分享插件的更多相关文章

  1. 自己动手写js分享插件 [支持https] (可以分享QQ空间,微信,新浪微博。。。)

    由于百度分享,jiathis 等分享插件在https下均会报错,就萌生了自己动手写一个分享插件的念头,其实实现起来一点都不难,以下代码都已在https网站运行通过,特附上以下代码:还请各位看官不吝赐教 ...

  2. js分享插件

    这是个在线版的分享插件 <div class="share-icon"> <span>分享:</span> <div class=&quo ...

  3. 自己动手写js分享插件 [支持https] (QQ空间,微信,新浪微博。。。)

    转载:https://blog.csdn.net/libin_1/article/details/52424340 废话不多说,传送门:http://download.csdn.net/detail/ ...

  4. 自己动手写js分享插件(QQ空间,微信,新浪微博。。。)

    参考博客:http://blog.csdn.net/libin_1/article/details/52424340 下载链接:http://download.csdn.net/detail/come ...

  5. 自己封装的一个JS分享组件

    因为工作的需求之前也封装过一个JS分享插件,集成了我们公司常用的几个分享平台. 但是总感觉之前的结构上很不理想,样式,行为揉成一起,心里想的做的完美,实际上总是很多的偏差,所以这次我对其进行了改版. ...

  6. weixinShare.js / 极简微信分享插件

    weixinShare.js / 极简微信分享插件 / 版本:0.1 这是一个很简单.很实用的微信分享插件,无需jQuery,只需要在网页里加入一行JS代码,即可自动识别微信浏览器并启动微信分享的提示 ...

  7. js分享功能(微信,QQ,微博,空间,豆瓣等)

    日常编程中,我们可能会碰到项目中的分享功能,各大平台都有分享接口和文档说明,当然也有一些一键分享插件,例如:sosh,iShare.js等等 但有些同学不想引用插件,那么我整理了一些常用的分享至平台功 ...

  8. 15 款 jQuery 社交分享插件

    过去几年中社交媒体越来越流行了,能够分享音乐.视频.图像甚至是其他的 docs 文档到互联网上去,这样子还能够提高页面的点击量.通常,一些社交媒体插件都能允许你的用户分享你网站上的内容到其他的社交平台 ...

  9. ckplayer播放器去掉右边的开关灯分享插件

    在上一篇文章中介绍了如何使用ckplayer播放器,但是有的人不需要CK播放器右边的开关灯分享插件,那么就需要把该插件给去掉,方法也很简单. 第一步:先打开ckplayer.js里找到下面三行删除掉 ...

随机推荐

  1. Linux中Screen命令使用方法

    一.使用Screen创建一个Session screen -S sessionName 注:sessionName是要删除的session名字 二.结束一个Screen创建的session 1.首先使 ...

  2. Python’s SQLAlchemy vs Other ORMs[转发 4]peewee

    peewee peewee is a small, expressive ORM. Compared to other ORMs, peewee focuses on the principal of ...

  3. 去除 Google 重定向

    1. 安装插件 redirector : https://code.google.com/p/chrome-redirector/ 2. 配置规则,如下: 匹配:https?://www\.googl ...

  4. 使用robot frame selenium中遇到的问题汇总

    1.问题:robot运行时提示:[ WARN ] Keyword 'Capture Page Screenshot' could not be run on failure: No browser i ...

  5. sass2:

    ass学习笔记2 今天介绍sass在重用代码时最具威力的两个功能.一个是嵌套(Nesting),一个混合(Mixin). 我们在写CSS通过需要多个后代选择器组合到一起才能定位到目标元素上,而这定义过 ...

  6. Tomcat环境配置

    1.安装java Path = 已有的值;%MYSQL%\bin;%CATALINA_HOME%\bin;%JAVA_HOME%\bin JAVA_HOME = C:\apps\Java\jdk1.8 ...

  7. Eclipse 创建maven项目

    新建maven project

  8. mongodump 备份

    规划 副本集,其中加了个隐藏节点,用来做备份,所以备份脚本直接在隐藏节点做,目前数据不大,直接本机磁盘存储,后续如果数据集大,那么在本地存最近一天的备份,远程根据需求存储几天的备份 创建备份用户 db ...

  9. iOS UIView上添加mp4视频

    ViewController.h文件中添加如下代码: #import <MediaPlayer/MediaPlayer.h> @property(nonatomic,retain) MPM ...

  10. Codeforces Round #313 (Div. 1)

    官方英文题解:http://codeforces.com/blog/entry/19237 Problem A: 题目大意: 给出内角和均为120°的六边形的六条边长(均为正整数),求最多能划分成多少 ...