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"></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',}}};
</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',}}}));
</script>

更多详情请参考DEMO

  • iShare版本
  • iShare_tidy版本

iShare.js分享插件相关推荐

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

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

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

    废话不多说,传送门:http://download.csdn.net/detail/cometwo/9620943 支持https:https://www.aishandian.com/news-63 ...

  3. 前端js分享插件运用(空间,QQ,微信,微博,豆瓣)

    直接上代码 <div class="share"><div id="share-2"></div> </div> ...

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

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

  5. php转发朋友圈缩略图片,解释最全的,手把手教的微信JS sdk分享设置教程-微信分享插件PHP源码JS-SDK接口,分享到朋友圈 转发好友带缩略图...

    亲们,此文是我上传的有关微信分享插件PHP源码JS-SDK接口的.rar和.zip的说明使用文件 许多朋友都面临自己编写的网站通过微信转发时,无论是分享微信好友或是微信朋友圈时,出现无缩略图显示的问题 ...

  6. 网站一键分享插件Share.js

    老牌的Jiathis已破产 大佬百度分享已下线 坚挺的bshare不知还能撑到什么时候,况且还有个问题分享的时候中文全是???问号我也不晓得怎么解决(Ps:如果有大佬知道还望告知!!!) 今天偶然发现 ...

  7. 百度分享插件 js异步添加的内容如何实现分享的功能

    window._bd_share_main.init(); 其实,就是一句话的事,分享插件重新初始化,这句代码,在ajax执行完毕后就行了.

  8. JS进阶篇--ckplayer.js视频播放插件

    网页中常见的功能就是播放视频,下面介绍的这个ckplayer.js既可以在pc端播放,也可以在手机网页上播放. 可调用flash也可以调用html5播放器: <div id="a1&q ...

  9. 移动端分享插件使用总结

    对于分享插件来说,大家肯定都很熟悉,最常用的就是百度分享.jiathis分享等,可分享的媒体也非常多,当然最常用的需求无非也就新浪微博.QQ空间.QQ好友.微信朋友圈.微信好友,其他什么乱七八糟的人人 ...

  10. js脚本锁计算机软件,JS使用插件cryptojs进行加密解密数据实例

    本文实例讲述了JS使用插件cryptojs进行加密解密数据.分享给大家供大家参考,具体如下: Testing websockets var key = 'BOTWAVEE'; //CBC模式加密 fu ...

最新文章

  1. 这个AI学院取名黄埔,30%学生都是CTO/技术总监,没有落地成果不许毕业
  2. SPOJ 694 Distinct Substrings(后缀数组)
  3. How to Install apk to Android Devices from Mac OS X
  4. MFC小笔记:TabCtrl父子窗口传递消息
  5. Nexus1000v部署
  6. debian的甘特图工具
  7. 有了malloc/free为什么还要new/delete ?
  8. ModuleNotFoundError: No module named ‘yaml‘
  9. 数据分析,如何做才算“深入”?
  10. select默认选中及赋值问题
  11. 产品管理 OKR:最佳实践和示例
  12. php之——常用的字符串函数
  13. svchost是什么程序
  14. 数据介绍与描述性分析——以NBA球员薪酬影响因素分析为例
  15. Mysql-innoDB锁总结
  16. 【轮子1】造一个炫酷的DEBUG输出
  17. 王阳明心学主要讲了什么
  18. 回首过去展望未来——14年年终总结
  19. 小黑跟老黑们夜骑车拍完了毕业照面试了两场的leetcode之旅:793. 阶乘函数后 K 个零
  20. arch安装veil

热门文章

  1. 苹果CMS影视双端APP源码
  2. 116道iOS面试题+答案,希望对你的面试有帮助
  3. java判断一个数是否为素数/质数
  4. 工作时间管理之番茄工作法
  5. 最新版本kindle安卓app导入mobi图书和设置自定义字体的方法2020.01.09
  6. 通用型二阶卡尔曼滤波算法
  7. STM32CubeMonitor使用教程
  8. 英文打字测试C语言课程设计,语言设计打字练习题库.doc
  9. linux网络配置方法
  10. 深度:ATM互联网巨头加紧入局的中老年线上市场,你是选择流量收割还是内容为王?