shareList — jquery收藏&分享插件

国内很多第三方提供收藏&分享的站点，比如jiathis、addthis等，这些站点提供的插件虽然引用方便，但都有个问题，点击收藏&分享按钮后事先跳转到该第三方的站点，然后才转向真正的分享插件，而且分享列表上面还是这第三方的logo之类的，而效果又是千篇一律，因此明河就想写一个没有任何第三方logo和中转而且效果出众的收藏&分享插件，我将其命名为$.shareList。

demo

由于有用到了ajax，请在服务器端启动

使用教程

1、引入jquery和$.shareList，还有css

1 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2 <script type="text/javascript" src="js/jquery.shareList.js"></script>
3  
4 <link href="style/css/base.css" rel="stylesheet" type="text/css" />
5 <link href="style/css/shareList.css" rel="stylesheet" type="text/css" />

2、初始化插件

1 $(function(){
2     $("#share").shareList();
3 })

3、关于IE6与其他浏览器效果不同的说明

由于IE6无法支持png，尽管可以通过其他方式修正，但由于我会动画修改阴影的宽度和透明度，导致修正后的效果会出问题，所以加了个判断在IE6下，无法显示阴影。

4、shareListData.js文件说明

shareListData.js是一个json数据源，存放着所有的分享列表的数据，数据结果类似如下：

1 {
2     "localName": "豆瓣",
3     "name": "douban",
4     "href" : "http://www.douban.com/recommend/?url={url}&title={title}"
5 }

• name 非常重要，分享站点的英文名
• localName 中文名
• href 链接，这里我使用了模板{url}页面链接，{title}页面标题

有需要的朋友可以自行添加。

5、分享站点图标说明

分享站点图标我整成了一张图片，请看shareList.png，第一列为收藏书签类站点，第二列为微博站点，第三列为SNS站点
如何修改图标呢
请看shareList.css

1 .icon-facebook{background-position:-101px -242px !important;}

移动图片的背景。
class的类名是有规律的，“icon-”+“站点的英文名”

6、如何控制显示的分享站点及其顺序？

需要用到一个参数： shareSites 
使用举例：

1 $("#share").shareList({shareSites : ["9dian","sinaminiblog","renren","zhuaxia","xianguo"]
2                           });

shareSites参数是个数组，排在越前面，显示也是越前面，你可以自由控制显示顺序和显示的站点，站点的英文名可以看shareListData.js

7、API参数说明

shareSites	Array	分享站点列表 比如： shareSites : ["9dian","sinaminiblog","renren","zhuaxia","xianguo"]
getListAjaxOptions	Object	获取分享站点列表的ajax配置 比如： getListAjaxOptions : { type: "GET", url : "js/shareListData.js", dataType : "json" }
allowSroll	Boolean	是否允许列表随鼠标滚动
showShadow	Boolean	是否显示阴影，此参数在IE6下无效
shadowSrc	String	阴影图片路径
preloadImgSrc	String	预加载动画图片
speed	Number	动画速度
style	Object	列表容器样式
effect	Object	效果设置（采用默认即可)
cls	Object	样式名集合（采用默认即可)
tpl	Object	模板（采用默认即可)

转载于:https://www.cnblogs.com/kopheece/archive/2012/03/23/2414392.html