基本说明
步骤1:在HTML中指定容器:
<html>
<head>
<!-- something here -->
</head>
<body>
<div id="container"></div>
<!-- something here -->
</body>
</html>
步骤二:在JS中按如下方式配置HShare
$("#container").hshare();
hshare方法还可接收用户自定义的配置项:
$("#container").hshare({
size: "large",
copyLink: false,
platforms: [{
name: "wechat"
}, {
name: "qzone"
}]
});
所有可配置的参数如下:
name | type | meaning | value | defaultValue |
---|---|---|---|---|
size | string | 图标的尺寸 | small/medium/large | medium |
copyLink | boolean | 是否显示“复制链接”这一项目 | true/false | false |
boolean | 是否显示“打印页面”这一项目 | true/false | false | |
bookmark | boolean | 是否显示“添加到浏览器收藏夹”这一项目 | true/false | false |
more | boolean | 是否设置一个“更多”面板以显示更多的平台 | true/false | false |
renderText | boolean | 分享按钮是否包含文字 | true/false | false |
platforms | Array | 要显示的平台 | --- | undefined |
extends | Array | 要在“更多”面板中显示的平台 | --- | undefined |
stat | Object | 统计接口 | --- | undefined |
附加说明
- copyLink: 设置该配置项会导致在分享按钮列表中出现一个按钮,点击按钮后当前页面的地址会被复制到剪贴板中。
- print: 设置该配置项会导致在分享按钮列表中出现一个按钮,点击按钮后浏览器会打开打印页面,请求打印当前网页。
- bookmark: 设置该配置项会导致在分享按钮列表中出现一个按钮,点击按钮后浏览器会提示用户使用CTRL+D将页面添加至收藏夹。
- more: 由于HShare支持40种平台,同时显示这些平台会导致页面臃肿化。设置该配置项为true会导致在分享按钮列表中出现一个按钮,鼠标浮动至该按钮上时,未被列入在按钮列表中(或用户自定义)的平台会出现再出现的“更多平台”面板里.
- size/renderText: 当设置renderText为true后,size会默认被设置为small。