Bootstrap之JS插件

JavaScript插件

1动画过渡效果——$.support.transition

;function($){
    'use strict';
    function transitionEnd(){
        var el=document.createElement('bootstrap');
        var transEndEventNames={
            'webkitTransition':'webkitTransitonEnd',
            'MozTransition':'transitionend',
            'OTransition':'oTransitionEnd otransitionend',
            'transition':'transitionend'
        };
        for(var name in transEndEventNames){
            if(el.style[name]!==undefined){
                return {
                    end:transEndEventNames[name]
                }
            }
        }
        return false;
    }
    $.fn.emulateTransitionEnd=function(duration){
        var called=false,
            $.el=this;
        $(this).one($support.transition.end,function(){called=true});
        var caalback=function(){
            if(!called)
                $($el).trigger($.support.transition.end)
        };
        setTimeout(callback,duration);
        return this
    }
    $(function(){
        $.support.transition=transitionEnd
    })
}(jQuery);

2模态弹窗——Modal

弹窗布局与样式

弹窗弹出层背景——modal

弹窗对话框——modal-dialog

弹窗内容——modal-content——modal-header、modal-body、modal-footer

弹窗最底层大背景——modal-backdrop

 

 

<button data-toggle="modal" data-target="myModal" class="btn btn-primary">
    弹出内容
</button>

<div class="modal show" id="myModal" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>这里是弹窗的具体内容 </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

声明式用法

——data-toggle=”modal”

——data-target=弹出弹窗ID值或唯一的CSS样式

<button data-toggle="modal" data-target="popupCSS" class="btn btn-primary">
    弹出内容
</button>
<div class="modal fade popupCSS"></div>

如果触发元素为a元素，也可以使用href的值作为data-target

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<div class="modal fade" id="myModal"></div>

——data-backdrop

——data-keyboard

——data-show

——href

JavaScript用法

用法——$(页面元素).modal([options])

属性：

——backdrop

——keyboard

——show

——remote

$("#myModal").modal({
    backdrop:true,
    keyboard:false
})

参数：

反转弹窗状态——toggle

$("#myModal").modal('toggle')

关闭弹窗——show

$("#myModal").modal('show')

隐藏弹窗——hide

$("#myModal").modal('hide')

事件：

弹出前——show.bs.modal

弹出后——shown.bs.modal

关闭前——hide.bs.modal

关闭后——hidden.bs.modal

$("#myModal").on('hidden.bs.modal',function(e){
    //处理代码
})

插件框架：

Ø  立即调用的函数

Ø  插件核心代码——Modal核心类函数的定义、默认参数的定义和原型方法

Ø  JQuery插件的定义

Ø  防冲突处理

Ø  绑定触发事件

Ø  ;function($){
    "use strict";
    var Modal=function(element,options){
        this.options=options;
        this.$element=$(element);
        this.$backdrop=
            ths.isShown=null
        if(this.options.remote){
            this.$element.find('.modal-content')
                .load(this.options.remote, $.proxy(function(){
                    this.$element.trigger('loaded.bs.modal')
                },this))
        }
    }
    Modal.DEFAULTS= {
        backdrop: true,
        keyboard: true,
        show: true
    }
    Modal.prototype.toggle=function(_relatedTarget){
        return thsi[!this.isShown?'show':'hide'](_relatedTarget)
    }
    Modal.prototype.show=function(){};
    Modal.prototype.hide=function(e){};
    Modal.prototype.enforceFocus=function(){};
    Modal.prototype.escape=function(){};
    Modal.prototype.hideModal=function(){};
    Modal.prototype.removeBackdrop=function(){};
    Modal.prototype.backdrop=function(){};

    var old= $.fn.modal;
    $.fn.modal=function(option,_relatedTarget){
        return this.each(function(){
            var $this=$(this);
            var data=$this.data("bs.modal")
            var options= $.extend({},Modal.DEFAULTS,$this.data(),typeof option=="object"&& option);
            if(!data){
                $this.data("bs.modal",(data=new Modal(this,options)))
            }
            if(typeof options=="string"){
                data[option](_relatedTarget)
            }
            else if(options.show){
                data.show(_relatedTarget)
            }
        })
    }
    $.fn.modal.Constructor=Modal;

    $.fn.modal.noConflict=function() {
        $.fn.modal = old;
        return this;
    }
    $(document).on('click.bs.modal.data-api','[data-toggle="modal"]',function(e){
        var $this=$(this);
        var href=$this.attr('href');
        var $target=$($this.attr('data-target')||(href&&href.replace(/?=#[^\s]+$)/,''));
        var option=$target.data('bs.modal')?'toggle': $.extend({remote:!/#/.test(href)&&href},$target.data(),$this.data())
        if($this.is('a')){
            e.preventDefault()
        }
        $target.modal(option,this)
            .one('hide',function(){
                $this.is(':visible') && $this.focus()
            })
    })
    $(document).on('show.bs.modal','.modal',function(){
        $(docuement.body).addClass('modal-open')
    }).on('hidden.bs.modal','modal',function(){
        $(document.body).removeClass('modal-open')
    })
}

3下拉菜单——dropdown

声明式用法

 ——data-toggle=”dropdown”

<button id="btn" data-toggle="dropdown" data-target="#menutest1">外部按钮</button>
<ul class="nav nav-pills">
    <li class="dropdown" id="menutest1">
        <ul class="dropdown-menu">
            <li><a href="#">动作</a></li>
            <li><a href="#">动作</a></li>
            <li class="divider"></li>
            <li><a href="#">动作</a></li>
        </ul>
    </li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

JavaScript用法

——$.(页面元素).dropdown()

$(function(){
    $(".dropdown-toggle").dropdown();
})

参数：

切换状态——toggle

$("#btnDropdown").dropdown('toggle')

显示——show

$("#btnDropdown").dropdown('show')

隐藏——hide

$("#btnDropdown").dropdown('hide')

例：

$(function9){
  $("#btnDropdown").one("click",function(){
      $(this).dropdown("toggle");
  }) 

 

事件

——show.bs.dropdown

——shown.bs. dropdown l

——hide.bs. dropdown

——hidden.bs. dropdown

$("#myDropdown").on("show.bs.dropdown",function(){

    //do something

})

4滚动侦测——scrollspy

声明式用法

——data-spy=”scroll”

——data-target=”#selector”

1.固定一个元素的高度，进行滚动

<div id="selector">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#fat">@fat</a></li>
            <li ><a href="#mdo">@mdo</a></li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#one">one</a></li>
                    <li><a href="#two">two</a></li>
                    <li class="divider"></li>
                    <li><a href="#three">three</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>
<div data-offset="0" data-target="#selector" data-spy="scroll" >
    <h4 id="fat">@fat</h4><p>...</p>
    <h4 id="mdo">@mdo</h4><p>...</p>
    <h4 id="one">one</h4><p>...</p>
    <h4 id="two">two</h4><p>...</p>
    <h4 id="three">three</h4><p>...</p>
</div>

2.对整个页面进行滚动侦测（将滚动侦测容器挪到body上即可）

<body data-target="#selector" data-spy="scroll">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="selector">
    ...
</nav>
<h4 id="fat">@fat</h4><p>...</p>
....
</body>

JavaScript用法

$(滚动侦测容器选择符).scrollspy({target:’#菜单容器的选择符’})

$("body").scrollspy({
    target:'#selector'
})

参数

$('[data-spy="scroll"]').each({
    var $spy=$(this).scrollspy('refresh')
})

事件

——activate.bs.scrollspy

$("#fat").on("activate.bs.scrollspy",function(){
    //处理代码
})

5选项卡——tab

声明式用法

——data-toggle=”tab”

——data-target=”选择符”

<ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">profile</a></li>
    <li><a href="#message" data-toggle="tab">message</a></li>
    <li><a href="#setting" data-toggle="tab">setting</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="message">...</div>
    <div class="tab-pane" id="setting">...</div>
</div>

JavaScript用法

$(页面元素).tab()

参数

$(".nav a:first").tab('show')

事件

——show.bs.tab

——shown.bs.tab

$('a[data-toggle="tab"]').on("shown.bs.tab",function(){
    e.target
    e.relatedTarget
})

6提示框——tootip

声明式用法

——data-original-title

——data-toggle=”tooltip”

<a href="#" data-toggle="tooltip" data-original-title="这里是提示内容">链接</a>
<a href="#" data-toggle="tooltip" title="设置title也可以">链接</a>

声明式属性

在tooltip上应用一个CSS fade动画——data-animation

提示框的显示位置——data-placement

——data-selector

提示语的内容——data-original-title

提示语的内容——title

如何触发tooltip——data-trigger

延迟——data-delay

将tooltip附加到特定的元素上——data-container

提示语的HTML模版——data-template

JavaScript用法

——$(页面元素).tooltip([options])

属性

——animation

——html

——placement

——selector

——original-title

——title

——trigger

——delay

——container

——template

$(function(){
       $("#element").tooltip({
        title:"提示语内容",
        placement:'top'
    });
})

参数

显示——show

关闭——hide

反转——toggle

隐藏或销毁——destroy

$(function(){
    $("#element").tooltip('show');
})

事件

——show.bs.tooltip

——shown.bs.tooltip

——hide.bs.tooltip

——hidden.bs.tooltip

$(function(){
    $("#myTooltip").on('hidden.bs.tooltip',function(){
        //do something
    });
})

7弹出框——popver

弹出框即特殊的提示框，相比提示框只多了一个title标题

<div class="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>
<div class="popover">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
</div>

声明式用法

——data-toggle=”popover”

——data-original-title

——data-content

注：同tooltip，增加了data-content

<a data-toggle="popover" data-original-title="a title" title="" data-content="It's very engaging.right?" class="btn btn-lg btn-danger" href="#">单击反转按钮</a>

声明式属性

在tooltip上应用一个CSS fade动画——data-animation

提示框的显示位置——data-placement

——data-selector

提示语的内容——data-original-title

提示语的内容——title

如何触发tooltip——data-trigger

延迟——data-delay

将tooltip附加到特定的元素上——data-container

提示语的HTML模版——data-template

JavaScript用法

——$(页面元素).tooltip([options])

注：同tooltip

属性

——animation

——html

——placement

——selector

——original-title

——title

——trigger

——delay

——container

——template

$(function(){
       $("#element").popover({
        title:"提示语内容",
        placement:'top'
    });
})

参数

显示——show

关闭——hide

反转——toggle

隐藏或销毁——destroy

$(function(){
    $("#element").popover('show');
})

事件

——show.bs.popover

——shown.bs.popover

——hide.bs.popover

——hidden.bs.popover

$(function(){
    $("#myTooltip").on('hidden.bs.popover',function(){
        //do something
    });
})

8警告框——alert

声明式用法

——data-dismiss=”alert”

——data-target

<div class="alert alert-warning fade in">
    <button data-dismiss="alert" class="close" type="button">X</button>
    <h4>alert title</h4>
    <p>change this and that and try again</p>
</div>

JavaScript用法

——$(页面元素).alert()

事件

——close.bs.alert

——closed.bs.alert

$(function(){
    $("#btnClose").on('close.bs.alert',function(){
        //do something
    });
})

9按钮

声明式用法

按钮 ——data-toggle=”button”

复选框、单选框——data-toggle=”buttons”

<button type="button" class="btn btn-primary" data-toggle="button">反转状态</button>

设置自定义状态

正在加载——data-loading-text

加载完成——data-complete-text

参数

——loading

——complete

——reset

$(function(){
    $("#btn1").click(function(){
        var btn=$(this);
        btn.button('loading');
    });
})
$(function(){
    $("#btn1").button('loading');
})

JavaScript用法

  $("#btn1").button('loading');

  $("#btn1").button('toggle');

  $("#btn1").button('reset');

  $("#btn1").button();

——$(页面元素).button()

——data-参数名-text

——$(页面元素).button(‘参数名’)

10折叠——collapse

声明式用法

——data-toggle=”collapse”

——data-target

默认显示折叠区域

<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">触改按钮</button>
<div id="demo" class="collapse in">折叠区域</div>

默认隐藏折叠区域

<button class="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">触改按钮</button>
<div id="demo" class="collapse">折叠区域</div>

 

JavaScript用法

$(页面元素).collapse()

属性

指定了parent，在单击一个特定触发元素时，该parent下的所有折叠区域都会隐藏——parent

反转——toggle

$(function(){
    $("#element").collapse({
        parent:"#accordion",
        toggle:false
    });
})

参数

——show

——hide

——toggle

$(function(){
    $("#element").collapse('show');
})

事件

——show.bs.collapse

——shown.bs.collapse

——hide.bs.collapse

——hidden.bs.collapse

 

$(function(){
    $("#myCollapsible").on('hidden.bs.collapse',function(){
        //do something
    });
})

11传送带——carousel

布局与样式

图片容器样式——carousel-inner

圆圈指示符——carousel-indicators

左右控制按钮样式——left carousel-control、right carousel-control

字幕说明样式——carousel-caption

<div data-ride="carousel" class="carousel slide" id="carousel-container">
    <div class="carousel-inner">
        <div class="item"><img alt="第一张图" src="Image/Flint01.jpg"/></div>
        <div class="item"><img alt="第二张图" src="Image/Flint02.jpg"/></div>
        <div class="item"><img alt="第三张图" src="Image/Flint03.jpg"/></div>
    </div>
    <ol class="carousel-indicators">
        <li data-slide-to="0" data-target="#carousel-container"></li>
        <li data-slide-to="1" data-target="#carousel-container"></li>
        <li data-slide-to="2" data-target="#carousel-container"></li>
    </ol>
    <a data-slide="prev" href="#carousel-container" class="left carousel-control">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a data-slide="next" href="#carousel-container" class="left carousel-control">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

声明式用法

——data-ride=”carousel”

——data-slide-to

——data-slide

等待时间——data-interval

默认鼠标停留在幻灯片区域即暂停轮播——data-pause

轮播是否持续循环——data-wrap

JavaScript用法

$(页面元素).carousel()

属性

——interval

——pause

——wrap

$(function(){
    $(".carousel").carousel({
        interval:2000
    });
})

事件

——slide.bs.carousel

——slid.bs.carousel

$(function(){
    $("#myCarousel").on('slide.bs.carousel',function(){
        //do somethign
    });
})

方法

——.carousel(‘cycle’)

——.carousel(‘pause’)

——.carousel(‘number’)

——.carousel(‘prev’)

——.carousel(‘next’)

$(function(){

    var data=$("#carousel-container").data('bs.carousel');

    if(data instanceof Carousel){

        data.carousel(0);

        data.carousel('next');

    }

})

12自动定位浮标

布局样式

正常文档流中的状态定义时的状态——affix-top

以fixed方式定位时的状态——affix

以absolute方式定位时的状态——affix-bottom

声明式用法

——data-spy=”affix”

一个完整的网页——data-offset-top

距离最底部距离——data-offset-bottom

<div data-spy="affix" data-offset="60">导航内容</div>

<div data-spy="affix" data-offset-top="100" data-offset-bottom="60">导航内容</div>

JavaScript用法

$(页面元素).affix()

$(function(){

    $("#myAffix").affix({

        offset:{

            top:100,

            bottom:funciton(){

        return (this.bottom=$('.bs-footer').outerHeight(true))

    }

        }

    })

})

事件

——affix.bs.affix

——affixed.bs.affix

——affix-top.bs.affix

——affixed-top.bs.affix

——affix-bottom.bs.affix

——affixed-bottom.bs.affix

转载于:https://my.oschina.net/u/3240534/blog/843177