iShare.js分享插件

iShare.js是一个小巧的分享插件,纯JS编写,不依赖任何第三方库,使用简便。

为啥写这个插件?

因为在搭建个人blog时(还没有搭建好(¯﹃¯)),对目前国内比较受欢迎的分享插件都不太满意,主要如下几点:

  1. 不太喜欢官方提供的样式,想重新定制,但又不太方便

  2. 提供的大部分接口都没用到,真正用到就那么几个,显得有点冗余

  3. 没有进行更新维护,部分接口都是挂掉
    另外,工作中,有时想要一个可以自定义样式、支持常用的分享接口、使用方便、不依赖于第三库的独立库。比如写活动页面时(⊙﹏⊙)

基于上述原因自己就创建了iShare.js,并为自定义样式的创建方式定制了专门的精简版:iShare_tidy

支持分享接口

  1. QQ好友

  2. QQ空间

  3. 腾讯微博

  4. 新浪微博

  5. 微信

  6. 豆瓣

  7. 人人

  8. 有道笔记

  9. Linkedin

  10. Facebook

  11. Twitter

  12. Google+

  13. Pinterest

  14. Tumblr

使用

支持两种初始化方式:

  1. 单例模式

  2. 实例化模式

注意:不要同时使用两种模式

单例模式

本实例展示了自定义样式分享的创建过程。另外本库针对自定义样式的创建提炼出一个精简版本:iShare_tidy版本

// 引入脚本文件

// 引入HTML脚本

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

//子元素需要指定如下的类名:
//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

iShare_config = {container:'.iShare1',config:{
title: '分享标题',
description: '这是分享描述文本',
url: 'https://github.com/zhansingsong',
WXoptions:{
evenType: 'click',
isTitleVisibility: true,
title: '二维码标题',
isTipVisibility: true,
tip: '二维码描述文本',
bgcolor: '# 2BAD13',
}
}};

实例化模式

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

// 引入脚本文件

// 引入HTML脚本
// 容器类名选择器: "iShareClassName"
// 实例化对象

(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',    }}}));

更多详情请参考DEMO

  1. iShare版本

  2. iShare_tidy版本

关键字:分享, 分享组件, JavaScript


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部