Intro.js – 为您的网站提供更好的用户指引
今年腾讯首页和新浪首页相继改版，为了让用户更好的适应新版，都加入用户指引（或叫用户帮助）。如果你也想在自己的网页加入用户指引，那就是试试 Intro.js 吧，它能够很轻松的制作出类似腾讯首页用户指引的效果。
注意：Intro.js 目前兼容 Firefox、Chrome 和 IE8，不兼容 IE6 和 IE7，后续版本将会提供更好的兼容。
&link rel="stylesheet" href="css/introjs.css"&
&script src="js/intro.js"&&/script&
如果需要兼容 IE，还必须添加 introjs ie.css:
&!--[if lte IE 8]&
&link href="css/introjs-ie.css" rel="stylesheet"&
&!-- &![endif]--&
在 HTML 代码中加入步骤和介绍，如：
&div&&input class="btn" type="button" value="开始"&&/div&
&div data-step="2" data-intro="第二步，你好！"&你好，这是第二步。&/div&
&div data-step="1" data-intro="第一步，欢迎！"&欢迎，这是第一步。&/div&
&div data-step="3" data-intro="第三步，很好！"&很好，这是第三步。&/div&
data-step 是步骤，data-intro 是介绍。
JavaScript
$(function(){
var $btn = $('.btn');
$btn.on('click', function(){
introJs().setOptions({
nextLabel: '下一步 &',
prevLabel: '& 上一步',
skipLabel: '退出'
}).start();
注意：上面的代码用使用 jQuery，但 Intro.js 并不是 jQuery 插件，所以它不需要 jQuery 也能运行，如果你使用的是原生 JavaScript，请修改成相应的方法。
另外，nextLabel、prevLabel 和 skipLabel 这三个参数可以省略，但省略后显示的是英文，你可以根据自己页面的语言省略或加入。
Intro.js 的 github 地址是：，里面有更详细的介绍。
& CopyRight电商动态：
电商动态：
电商动态：
电商动态：
电商动态：
电商动态：
电商动态：
电商动态：
电商动态：
电商动态：
电商动态：
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
[导读]百度分享插件
.userStyle{
width:100%;
.userStyle span.bds_more{
background:url("/wap/images/rfhui1.jpg") no-repeat scroll 0 5px rgba(0, 0, 0, 0) !
百度分享插件
.userStyle{
width:100%;
.userStyle span.bds_more{
background:url("/wap/images/rfhui1.jpg") no-repeat scroll 0 5px rgba(0, 0, 0, 0) !
&div class="userStyle"&
&!-- Baidu Button BEGIN --&
&div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare"&
&span class="bds_more"&&/span&
&script type="text/&#106avascript" id="bdshare_js" data="type=tools" &&/script&
&script type="text/&#106avascript" id="bdshell_js"&&/script&
&script type="text/&#106avascript"&
document.getElementById("bdshell_js").src = "http://bdimg./static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
&!-- Baidu Button END --&
bShare分享插件
&div class="bsync-custom icon-medium-blue"&
&a title="一键分享到各大微博和社交网络" class="bshare-bsync" onclick="&#106avascript:bShare.more(event);"&&/a&
&a class="bshareDiv" href="/share"&分享按钮&/a&
type="text/&#106avascript"
charset="utf-8"
src="/b/buttonLite.js#uuid=773faa5d-cee1--d400a5d7a1c1&style=999&img=http%3A%2F%%2Fwap%2Fimages%2Frfhui1.jpg&h=20&w=23&mdiv=0&pop=-1&bp=qqmb,bsharesync,sinaminiblog,qzone,189share,sohuminiblog,renren,xinhuamb,tianya,shouji,ifengmb,neteasemb,qqxiaoyou,kaixin001,weixin,douban,qqim"&
【重要声明】：爱淘宝刊载此文仅为提供更多信息目的，并不代表爱淘宝同意文章的说法或描述，也不构成任何建议，对本文有任何异议，请联系我们。你的位置： > 百度分享插件-分享按钮自定义，bShare分享插件-分享按钮自定义
分享插件-分享按钮自定义
&div class=&bsync-custom icon-medium-blue&&
&a title=&一键分享到各大微博和社交网络& class=&bshare-bsync& onclick=&javascript:bShare.more(event);&&&/a&
&a class=&bshareDiv& href=&/share&&分享按钮&/a&
type=&text/javascript&
charset=&utf-8&
src=&/b/buttonLite.js#uuid=773faa5d-cee1--d400a5d7a1c1&style=999&img=http%3A%2F%%2Fwap%2Fimages%2Frfhui1.jpg&h=20&w=23&mdiv=0&pop=-1&bp=qqmb,bsharesync,sinaminiblog,qzone,189share,sohuminiblog,renren,xinhuamb,tianya,shouji,ifengmb,neteasemb,qqxiaoyou,kaixin001,weixin,douban,qqim&&
bShare分享插件-分享按钮自定义
.userStyle{
width:100%;
.userStyle span.bds_more{
background:url(&/wap/images/rfhui1.jpg&) no-repeat scroll 0 5px rgba(0, 0, 0, 0) !
&div class=&userStyle&&
&!-- Baidu Button BEGIN --&
&div id=&bdshare& class=&bdshare_t bds_tools -codes-bdshare&&
&span class=&bds_more&&&/span&
&script type=&text/javascript& id=&bdshare_js& data=&type=tools& &&/script&
&script type=&text/javascript& id=&bd_js&&&/script&
&script type=&text/javascript&&
document.ElementById(&bd_js&).src = &http://bdimg./static/js/_v2.js?cdnversion=& + Math.ceil(new Date()/3600000);
&!-- Baidu Button END --&
载请注明： &
与本文相关的文章
暂无相关文章！rfyiamcool 的BLOG
用户名：rfyiamcool
文章数：428
评论数：2127
访问量：934163
注册日期：
阅读量：4117
51CTO推荐博文
求监控组的大哥大妹子们干点事，真不容易 ！ 要问他们是谁？ &他们是神 。轻易别找他们，因为找了也是白找。 &上次因为python和redis长时间brpop的时候，会有线程休眠挂起的情况，所有通知报警平台被下线了。这次算是完美解决了。再把他给上线。这两公司的告警已经开始往我这边的接口开始仍了。这边正在改zabbix cmdb的控制，所以暂时不能登录。等搞好了后，让他们搞下redis和mogodb的监控，居然还让我发邮件和提供脚本及思路啥的。。。 & 一寻思，又要去zabbix，又要写脚本，还不如把监控都集合在自己的平台上的了。&这次没用选用钟爱的ganglia，麻烦。 也没用另一个graphite，而是用的是munin 。 & 一个直接yum后就可以访问的性能监控页面。官方的redis监控和mongodb看起来很麻烦的样子，算了。直接看他们是怎么写的。源码是perl写的，插件好多是shell写的。&写法是相当的简单，只需要指明下图片的显示Y X 轴 ,然后echo就可以了！ &下面是redis 的token使用热点数据，队列的数据，及mongodb count的数据。&650) this.width=650;" src="/wyfs02/M02/2E/AD/wKioL1OayeiSm67yAAZy_JZX3lI404.jpg" title=" 17:48:35的屏幕截图.png" alt="wKioL1OayeiSm67yAAZy_JZX3lI404.jpg" />上面的图数据没有打满，今天在补上：650) this.width=650;" src="/wyfs02/M00/2E/E8/wKiom1OeShrQi5X4AAZtSaeAL3Y326.jpg" title=" 09:31:03的屏幕截图.png" alt="wKiom1OeShrQi5X4AAZtSaeAL3Y326.jpg" />原文：脚本的位置： &&/etc/munin/plugins监控mongodb的脚本：#xiaorui.cc
if&[&"$1"&=&"autoconf"&];&then
&&&&&&&&echo&yes
&&&&&&&&exit&0
if&[&"$1"&=&"config"&];&then
&&&&&&&&echo&'graph_title&mongodb&count&mail'
&&&&&&&&echo&'graph_args&--base&1000&-l&0'
&&&&&&&&echo&'graph_vlabel&mail&queue'
&&&&&&&&echo&'graph_scale&no'
&&&&&&&&echo&'graph_category&system'
&&&&&&&&echo&'load.label&load'
&&&&&&&&echo&'graph_info&The&load&average&of&the&machine&describes&how&many&processes&are&in&the&run-queue&(scheduled&to&run&"immediately").'
&&&&&&&&echo&'&5&minute&load&average'
&&&&&&&&exit&0
echo&-n&"load.value&"
mongo&reportops&--eval&"db.reportops_log_mail.count()"|tail&-n1原文：监控redis队列的脚本：#xiaorui.cc
if&[&"$1"&=&"config"&];&then
&&&&&&&&#&The&host&name&this&plugin&is&for.&(Can&be&overridden&to&have
&&&&&&&&#&one&machine&answer&for&several)
&&&&&&&&#&The&title&of&the&graph
&&&&&&&&echo&'graph_title&redis&mail'
&&&&&&&&#&Arguments&to&"rrdtool&graph".&In&this&case,&tell&it&that&the
&&&&&&&&#&lower&limit&of&the&graph&is&'0',&and&that&1k=1000&(not&1024)
&&&&&&&&echo&'graph_args&--base&1000&-l&0'
&&&&&&&&#&The&Y-axis&label
&&&&&&&&echo&'graph_vlabel&load'
&&&&&&&&#&We&want&Cur/Min/Avg/Max&unscaled&(i.e.&0.42&load&instead&of
&&&&&&&&#&420&milliload)
&&&&&&&&echo&'graph_scale&no'
&&&&&&&&#&Graph&category.&Defaults&to&'other'
&&&&&&&&echo&'graph_category&system'
&&&&&&&&#&The&fields.&"label"&is&used&in&the&legend.&"label"&is&the&only
&&&&&&&&#&required&subfield.
&&&&&&&&echo&'load.label&load'
&&&&&&&&#&These&two&read&the&environment&for&warning&values&for&the&field
&&&&&&&&#&"load".&&If&"load_warning"&or&"warning"&aren't&set&in&the
&&&&&&&&#&environment,&no&warning&levels&are&set.&&Likewise&for&"load_critical"
&&&&&&&&#&and&"critical".
&&&&&&&&print_warning&load
&&&&&&&&print_critical&load
&&&&&&&&#&This&one&is&purely&to&add&an&explanation&to&the&web&page.&The&first
&&&&&&&&#&one&is&for&the&graph&itself,&while&the&second&one&is&for&the&field
&&&&&&&&#&"load".
&&&&&&&&echo&'graph_info&The&load&average&of&the&machine&describes&how&many&processes&are&in&the&run-queue&(scheduled&to&run&"immediately").'
&&&&&&&&echo&'&5&minute&load&average'
&&&&&&&&#&Last,&if&run&with&the&"config"-parameter,&quit&here&(don't
&&&&&&&&#&display&any&data)
&&&&&&&&exit&0
#&If&not&run&with&any&parameters&at&all&(or&only&unknown&ones),&do&the
#&real&work&-&i.e.&display&the&data.&Almost&always&this&will&be
#&"value"&subfield&for&every&data&field.
echo&-n&"load.value&"
redis-cli&LLEN&sendmaillist|cut&-d&''&-f2写完了后，/etc/init.d/munin-node restart 就可以了。等一会刷新下页面就出来了。关键就是最后那两行。。echo&-n&"load.value&"
redis-cli&LLEN&sendmaillist|cut&-d&''&-f2网上有人做了python的munin操作模块，有兴趣的朋友可以试试。#!/usr/bin/env&python
from&munin&import&MuninPlugin
class&LoadAVGPlugin(MuninPlugin):
&&&&title&=&"Load&average"
&&&&args&=&"--base&1000&-l&0"
&&&&vlabel&=&"load"
&&&&scale&=&False
&&&&category&=&"system"
&&&&@property
&&&&def&fields(self):
&&&&&&&&warning&=&os.environ.get('load_warn',&10)
&&&&&&&&critical&=&os.environ.get('load_crit',&120)
&&&&&&&&return&[("load",&dict(
&&&&&&&&&&&&&&&&label&=&"load",
&&&&&&&&&&&&&&&&info&=&'The&load&average&of&the&machine&describes&how&many&processes&are&in&the&run-queue&(scheduled&to&run&"immediately").',
&&&&&&&&&&&&&&&&type&=&"GAUGE",
&&&&&&&&&&&&&&&&min&=&"0",
&&&&&&&&&&&&&&&&warning&=&str(warning),
&&&&&&&&&&&&&&&&critical&=&str(critical)))]
&&&&def&execute(self):
&&&&&&&&if&os.path.exists("/proc/loadavg"):
&&&&&&&&&&&&loadavg&=&open("/proc/loadavg",&"r").read().strip().split('&')
&&&&&&&&else:
&&&&&&&&&&&&from&subprocess&import&Popen,&PIPE
&&&&&&&&&&&&output&=&Popen(["uptime"],&stdout=PIPE).communicate()[0]
&&&&&&&&&&&&loadavg&=&output.rsplit(':',&1)[1].strip().split('&')[:3]
&&&&&&&&return&dict(load=loadavg[1])
if&__name__&==&"__main__":
&&&&LoadAVGPlugin().run()原文：总结下，munin真的够简单的了，他的简单也意味着，他也就 适合我这样的运维研发人员临时做些统计的场景。 &记得以前使用munin，当时做zeromq的统计，超过几十台是没啥问题，当然这话是（feihua），要是几十台都有问题，那这监控的水准确实够烂。 &这东西的局限确实够大。也就临时画画图还行。本文出自 “” 博客，谢绝转载！
了这篇文章
类别：┆阅读(0)┆评论(0)
07:11:42 21:31:44 20:35:51 22:23:46 11:37:45 06:47:43 11:47:46 13:52:57页面导航：
→ 正文内容 自定义百度、bshare分享按钮
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
在项目中我们常用到百度分享插件或者bshare分享插件，虽然官方都有自定义按钮的功能，但是毕竟还是只有少数几种，我们如何来制作有自己特色的分享按钮呢？
百度分享插件
.userStyle{
width:100%;
.userStyle span.bds_more{
background:url("/wap/images/rfhui1.jpg") no-repeat scroll 0 5px rgba(0, 0, 0, 0) !
&div class="userStyle"&
&!-- Baidu Button BEGIN --&
&div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare"&
&span class="bds_more"&&/span&
&script type="text/javascript" id="bdshare_js" data="type=tools" &&/script&
&script type="text/javascript" id="bdshell_js"&&/script&
&script type="text/javascript"&
document.getElementById("bdshell_js").src = "http://bdimg./static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
&!-- Baidu Button END --&
bShare分享插件
&div class="bsync-custom icon-medium-blue"&
&a title="一键分享到各大微博和社交网络" class="bshare-bsync" onclick="javascript:bShare.more(event);"&&/a&
&a class="bshareDiv" href="/share"&分享按钮&/a&
type="text/javascript"
charset="utf-8"
src="/b/buttonLite.js#uuid=773faa5d-cee1--d400a5d7a1c1&style=999&img=http%3A%2F%%2Fwap%2Fimages%2Frfhui1.jpg&h=20&w=23&mdiv=0&pop=-1&bp=qqmb,bsharesync,sinaminiblog,qzone,189share,sohuminiblog,renren,xinhuamb,tianya,shouji,ifengmb,neteasemb,qqxiaoyou,kaixin001,weixin,douban,qqim"&
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910