wshare 微博分享插件

wshare 是一个可以自定义网页分享内容的一个 jQuery 插件，可以方便的自定义分享按钮点击之后的分享内容/链接/图片/视频。

同时，wshare 仅保留少数的分享站点，对比起现有的一些分享插件更加简洁，更加轻便。

wshare 插件依赖 jQuery 库，所以在使用之前需要先引用 jQuery 库，并加载 wshare 插件：

<script src="path/jquery.min.js"></script> <script src="path/wshare.js"></script>

指定好 data-toggle 和 data-type 属性即可直接使用。

<a id="wshare-demo" data-toggole="wshare" data-type="weibo" href="javascript:;">分享到微博</a> JavaScript

在没有指定 data-type 属性的时候可以通过 JavaScript 绑定。

$(function() { $('#wshare-demo').wshare(); }) 默认分享

如果你是用以上的代码，默认的分享内容是网页的标题，默认的链接是当前页面的 URL，图片跟视频为空。

给你需要绑定 wshare 插件的元素增加 data-toggle="wshare" 和 data-type="weibo" 属性即可。

（该样例的演示的是绑定 wshare 插件，分享方式使用的是新浪微博）

在默认的情况下你甚至不用编写 JavaScript 代码，就能指定需要分享的内容：

<!-- 你需要先指定好绑定元素的 ID，这里是 wshare-demo --> <a id="wshare-demo" data-toggle="wshare" data-type="weibo" href="javascript:;">分享到微博</a>

你可以根据下面的 HTML 代码指定这个按钮点击之后的分享内容，这是在没有使用 JavaScript 控制的时候优先级最高的方法：

<!-- 根据绑定元素的 ID 可以指定该 ID 的分享内容，ID 设置为 ID_wsContent --> <input id="wshare-demo_wsContent" type="hidden" value="wshare 是一个简洁轻便的网页分享插件"> <!-- 根据绑定元素的 ID 可以指定该 ID 的分享链接，ID 设置为 ID_wsUrl --> <input id="wshare-demo_wsUrl" type="hidden" value="http://github.com/loo2k/wshare"> <!-- 根据绑定元素的 ID 可以指定该 ID 的分享图片，ID 设置为 ID_wsPic --> <input id="wshare-demo_wsPic" type="hidden" value="http://placehold.it/150x150"> <!-- 根据绑定元素的 ID 可以指定该 ID 的分享视频，ID 设置为 ID_wsVideo --> <input id="wshare-demo_wsVideo" type="hidden" value="http://v.youku.com/v_show/id_XMTA5MjI1Nzcy.html">

同时，你可以根据下面的 HTML 代码指定网页内所有分享按钮点击之后的分享内容：

<!-- 指定全局的分享内容 --> <input id="wsContent" type="hidden" value="wshare 是一个简洁轻便的网页分享插件"> <!-- 指定全局的分享链接 --> <input id="wsUrl" type="hidden" value="http://github.com/loo2k/wshare"> <!-- 指定全局的分享图片 --> <input id="wsPic" type="hidden" value="http://placehold.it/150x150"> <!-- 指定全局的分享视频 --> <input id="wsVideo" type="hidden" value="http://v.youku.com/v_show/id_XMTA5MjI1Nzcy.html">

如果你给 #wshare-demo 元素指定了 data-target 属性的话，插件会优先调用以 data-target 属性指定的值来匹配 ID，如：

<a id="wshare-demo" data-toggle="wshare" data-type="weibo" data-target="Weibo" href="javascript:;">分享到微博</a>

则会优先调用：

<!-- 分享内容 --> <input id="Weibo_wsContent" type="hidden" value="wshare 是一个简洁轻便的网页分享插件"> <!-- 分享链接/图片/视频同理... --> 通过 JavaScript 使用

通过 JavaScript 使用你也可以使用跟 HTML 一样的方法进行绑定，但是在这里的演示将尽量使用 JavaScript 操作。

首先，你有一个需要绑定的 HTML 元素：

<a id="wshare-demo" href="javascirpt:;">分享到微博</a>

使用 JavaScript 对元素进行绑定：

// 默认的绑定方法 $(function() { $('#wshare-demo').wshare(); })

这样绑定了的元素也会像 HTML 绑定一样，寻找指定的元素获得需要分享的内容，而且会根据网页中的 window 对象获得指定的分享内容。

// 根据绑定元素的 ID 可以指定该 ID 的分享内容，增加 window 子对象 ID_wsContent window['wshare-demo_wsContent'] = 'wshare 是一个简洁轻便的网页分享插件'; // 根据绑定元素的 ID 可以指定该 ID 的分享链接，增加 window 子对象 ID_wsUrl window['wshare-demo_wsUrl'] = 'http://github.com/loo2k/wshare'; // 图片/视频等同理...

你也可以用在 window 对象中设置全局的分享内容

// 指定全局的分享内容 window['wsContent'] = 'wshare 是一个简洁轻便的网页分享插件'; // 链接/图片/视频同理...

你也可以在绑定事件的时候指定 target：

$(function() { $('#wshare-demo').wshare({ target: 'Weibo' }) }) // 按照以上方法绑定则会优先获取 window 对象中的 Weibo_wsContent 的内容 window['Weibo_wsContent'] = "wshare 是一个简洁轻便的网页分享插件"; 选项