bShare分享插件的使用

bShare分享插件的使用。

1、引用JS文件

[html]   view plain copy

1. <script type="text/javascript" ckharset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=2&lang=zh"></script>  
2. <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>  

 

2、页面HTML代码

分享标签：

 

[html]   view plain copy

1. <div class="bshare-custom" title="" url="" summary="" pic=""></div>  

 

标签说明：

1、class="bshare-custom"：用于识别该标签为分享标签。

2、title：绑定分享标题。

3、url：绑定分享链接。

4、summary：绑定分享摘要。

5、pic：绑定分享图片。

实例：

 

[html]   view plain copy

1. <ul>  
2.     <li>  
3.         分享1：C#面向对象程序设计  
4.         <div class="bshare-custom" title="C#面向对象程序设计" url="http://blog.youkuaiyun.com/pan_junbiao/article/details/5308139" summary="《C#面向对象程序设计》面向对象的三大特性、特性 、优势、封装。保证对象自身数据的完整性、安全性  继承  建立类之间的关系，实现代码复用，方便系统的扩展  多态  相同的方法调用可实现不同的实现方式 一、封装 封装是..." pic="http://i0.sinaimg.cn/ty/g/pl/2014-01-05/U9977P6T12D6966211F1286DT20140105031220.jpg"></div>  
5.     </li>  
6.     <li>  
7.         分享2：Java面向对象程序设计  
8.         <div class="bshare-custom" title="Java面向对象程序设计" url="http://blog.youkuaiyun.com/pan_junbiao/article/details/5297328" summary="《Java面向对象程序设计》面向对象编程（Object Oriented Programming，OOP，面向对象程序设计）是一种计算机编程架构。OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成。OOP 达到了软件工程的三个主要目标：重用性、灵活性和扩展性。"></div>  
9.     </li>  
10. </ul>  

 

3、编写JS脚本

 

[javascript]   view plain copy

1. $(document).ready(function() {  
2.     iBShare.init();    //初始化  
3. });  
4.   
5. //bShare分享  
6. var iBShare = {  
7.     //初始化  
8.     init: function() {  
9.         var $shareBox = $(".bshare-custom");  
10.         //加载分享工具  
11.         var tools = '<a title="分享到QQ空间" class="bshare-qzone"></a>';  
12.         tools += '<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>';  
13.         tools += '<a title="分享到人人网" class="bshare-renren"></a>';  
14.         tools += '<a title="分享到腾讯微博" class="bshare-qqmb"></a>';  
15.         tools += '<a title="分享到网易微博" class="bshare-neteasemb"></a>';  
16.         tools += '<a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>';  
17.         $shareBox.append(tools);  
18.         //绑定分享事件  
19.         $shareBox.children("a").click(function() {  
20.             var parents = $(this).parent();  
21.             bShare.addEntry({  
22.                 title: parents.attr("title"),  
23.                 url: parents.attr("url"),  
24.                 summary: parents.attr("summary"),  
25.                 pic: parents.attr("pic")  
26.             });  
27.         });  
28.     }  
29. }  

 

参考资料：

bShare官网：http://www.bshare.cn/

bShare API：http://www.bshare.cn/help/apiClientJsPage