Bootstro.js,网站引导,分步引导使用教程 作于2014-12-01

【提示】

已经将这个插件封装到:http://uikoo9.com/bootstrapQ

其中封装了很多bootstrap常用的插件,之后还会陆续添加,

使用简单,快捷方便。


【引导】

什么叫网站引导或分步引导呢?

其实你在很多网站都应该见过,就是初次登录的时候网站会一步一步引导你熟悉网站的功能,

可以看一个例子:http://uikoo9.com/bootstrapQ/docs#bootstrapq-bstro

对你看到的效果就是网站引导,附图:

31.png


【bootstro.js】

1.基于bootstrap,支持bootstrap3.0

2.网站引导插件,效果不错

3.官网:http://clu3.github.io/bootstro.js/


【说明】

1.其实官网的例子也挺简单,这里相当于翻译加总结


【依赖】

1.jquery

2.bootstrap


【引入】

在jq和bs后引入以下文件:

<link rel="stylesheet" href="${base}/WUI/bootstro/bootstro.min.css">
<script type="text/javascript" src="${base}/WUI/bootstro/bootstro.min.js"></script>


【原理】

1.突出元素

正如上图你说看的,高亮的就是要突出的元素

2.突出元素添加属性

突出的元素需要添加以下几个属性:

data-bootstro-title:引导标题

data-bootstro-content:引导内容

data-bootstro-placement:引导块位置,top,bottom,right,left

data-bootstro-nextButtonText:下一步按钮的文字内容,例如“next”

data-bootstro-html:引导内容是否允许html显示,true or flase

data-bootstro-step:第几步引导

3.利用bootstro启动

bootstro.start(selector, options);

其中selector一般是class,因为大部分引导都是多步的,

options是一些配置,比较有用的有:

prevButtonText:前一步按钮的文字内容,例如“prev”

finishButton:完成按钮的html内容

stopOnBackdropClickstopOnEsc:点击遮罩和按下esc是否退出

onExit:点击完成的回调函数


【总结】

1.希望上面的原理你可以明白,

假如页面有5个div你需要高亮引导,

那么第一步需要给5个div添加相关属性,

第二步激活bootstro

2.优化

原理明白后应该就可以实现,效果了,但是一个一个div添加属性是不是很麻烦呢?

所以封装了一下,

大概原理是,用js给div数组一次添加属性,然后激活bootstro


【代码】

封装代码:

var qiao={};
qiao.bs={};

qiao.bs.bstrooptions = {
    width     : '500px',
    html     : 'true',
    nbtext    : '下一步',
    place     : 'bottom',
    title     : '提示',
    content : 'content'
};
qiao.bs.bstroinit = function(selector, options, step){
    if(selector){
        var $element = $(selector);
        if($element.length > 0){
            var opt = $.extend({}, qiao.bs.bstrooptions, options);
            if(typeof options == 'string'){
                opt.content = options;
            }else{
                $.extend(opt, options);
            }
            
            $element.each(function(){
                $(this).attr({
                    'data-bootstro-width'            : opt.width, 
                    'data-bootstro-title'             : opt.title, 
                    'data-bootstro-html'            : opt.html,
                    'data-bootstro-content'            : opt.content, 
                    'data-bootstro-placement'        : opt.place,
                    'data-bootstro-nextButtonText'    : opt.nbtext,
                    'data-bootstro-step'            : step
                }).addClass('bootstro');
            });
        }
    }
};
qiao.bs.bstroopts = {
    prevButtonText : '上一步',
    finishButton : '<button class="btn btn-lg btn-success bootstro-finish-btn"><i class="icon-ok"></i>完成</button>',
    stopOnBackdropClick : false,
    stopOnEsc : false
};
qiao.bs.bstro = function(bss, options){
    if(bss && bss.length > 0){
        for(var i=0; i<bss.length; i++){
            qiao.bs.bstroinit(bss[i][0], bss[i][1], i);
        }
        
        var opt = $.extend({}, qiao.bs.bstroopts);
        if(options){
            if(options.hasOwnProperty('pbtn')){
                opt.prevButtonText = options.pbtn;
            }
            if(options.hasOwnProperty('obtn')){
                if(options.obtn == ''){
                    opt.finishButton = '';
                }else{
                    opt.finishButton = '<button class="btn btn-mini btn-success bootstro-finish-btn"><i class="icon-ok"></i>'+options.obtn+'</button>';
                }
            }
            if(options.hasOwnProperty('stop')){
                opt.stopOnBackdropClick = options.stop;
                opt.stopOnEsc = options.stop;
            }
        }
        
        bootstro.start('.bootstro', opt);
    }
};

页面代码:

        qiao.bs.bstro([
            ['#md5input','<h3 style="margin-top:10px;">使用关键字检索问题或知识点~</h3>'],
            ['.breadcrumb','<h3 style="margin-top:10px;">也可以分类检索问题知识点哟~</h3>'],
            ['#questionsDiv',{content:'<h3 style="margin-top:10px;">这里是问题知识点列表~</h3>',place:'right'}],
            ['#addQuestionLi','<h3 style="margin-top:10px;">提问,或添加知识点在这里~</h3>'],
            ['#userRankLi','<h3 style="margin-top:10px;">用户最佳回答排行榜~</h3>'],
            ['#userLoginLi','<h3 style="margin-top:10px;">从这里登录哦~</h3>']
        ],{
            obtn : '我已了解,下次不再提示!',
            exit : function(){$.cookie('bootstro','ok',{expires:30, path:'/'});}
        });

与cookie结合,实现的效果:点击下次不再提示后,下次访问不再提示:

    var isbstro = $.cookie('bootstro');
    if(!isbstro){
        qiao.bs.bstro([
            ['#md5input','<h3 style="margin-top:10px;">使用关键字检索问题或知识点~</h3>'],
            ['.breadcrumb','<h3 style="margin-top:10px;">也可以分类检索问题知识点哟~</h3>'],
            ['#questionsDiv',{content:'<h3 style="margin-top:10px;">这里是问题知识点列表~</h3>',place:'right'}],
            ['#addQuestionLi','<h3 style="margin-top:10px;">提问,或添加知识点在这里~</h3>'],
            ['#userRankLi','<h3 style="margin-top:10px;">用户最佳回答排行榜~</h3>'],
            ['#userLoginLi','<h3 style="margin-top:10px;">从这里登录哦~</h3>']
        ],{
            obtn : '我已了解,下次不再提示!',
            exit : function(){$.cookie('bootstro','ok',{expires:30, path:'/'});}
        });
    }



【ok】

给网页添加引导之后感觉是不是很炫呢~,

例如:http://uikoo9.com/bootstrapQ/docs#bootstrapq-bstro


http://uikoo9.com/
更多精彩内容

求打赏(长按图片即可识别)~
微信 捐助列表:http://uikoo9.com/donate/

阅读:12064