Bootstrap 插件【一】

学习要点:

  • 模拟对话框
  • 下拉菜单
  • 滚动监听

1.模拟对话框

<!-- href="#login" 与id="login" 对应 -->
<!-- data-toggle="modal" 触发遮罩,调用 -->
<a href="#login" class="btn" data-toggle="modal" data-backdrop="false>打开模拟对话框</a> <!-- modal 遮罩样式 --> <!-- hide 点击隐藏 --> <!-- fade 淡入淡出显示 --> <div id="login" class="modal hide fade">
    <!-- modal-header 遮罩的头部 -->
    <div class="modal-header">
        <!-- close 关闭样式 -->
        <!-- data-dismiss="modal" 点击触发关闭模拟对话框 -->
        <button class="close" data-dismiss="modal">×</button>
        <h3>会员登录</h3>
    </div>
    <!-- modal-body 遮罩的主体 -->
    <div class="modal-body">
        <label for="user"></label>
        <input type="text" name="user">
    </div>
    <!-- 遮罩的尾部 -->
    <div class="modal-footer">
        <button class="btn btn-success">登录</button>
    </div>
</div>

调用 :
第一种 :使用 data-toggle=”modal”方法,上述就是
第二种 :使用JS调用
HTML仅仅去掉data-toggle=”modal”

<a href="#login" class="btn" id="login_a" >打开模拟对话框</a>
PS : show、shown、hide、hidden打开关闭对话框的4个事件
$(function () {
    $("#login").on("show", function () {
        console.log("显示中");
    });
    $("#login").on("shown", function () {
        console.log("显示完毕");
    });
    $("#login").on("hide", function () {
        console.log("关闭中");
    });
    $("#login").on("hidden", function () {
        console.log("关闭完毕");
    });
    $("#login_a").click(function () {
        $("#login").modal({
            // 是否显示遮罩
            backdrop : false,
            // 按ESC关闭对话框
            keyborard : false,
        });
    });
})
2.下拉项
<div class="dropdown">
    <a href="#" class="btn" data-toggle="dropdown">球队<i class="caret"></i></a>
    <ul class="dropdown-menu">
        <li><a href="#" >勇士</a></li>
        <li><a href="#" >雷霆</a></li>
        <li><a href="#" >灰熊</a></li>
    </ul>
</div>

调用:
第一种 :使用 data-toggle=”dropdown”方法

第二种 :使用JS调用
HTML仅仅去掉data-toggle=”dropdown”

$(function () {
    // 点击触发下拉行为
    $(".btn").dropdown();
});
3.滚动监听 伴随着滚动条的滚动,列表项被不断切换激活
<!-- id="menu" 为data-target="#menu" 的监听对象-->
<!-- navbar navbar-inner nav navbar-fixed-top 固定导航条 -->
<div id="menu" class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="nav">
            <li><a href="#1">列表1</a></li>
            <li><a href="#2">列表2</a></li>
            <!-- dropdown dropdown-menu 下拉菜单 -->
            <li class="dropdown">
                <!-- data-toggle="dropdown" 调用下拉行为 -->
                <a href="#" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#3">列表3</a></li>
                    <li><a href="#4">列表4</a></li>
                    <li><a href="#5">列表5</a></li>
                </ul>
            </li>
        </div>
    </div>
</div>
<!-- data-spy="scroll"为监听对象设置data属性 -->
<!-- data-target="#menu"设置监听对象 -->
<!-- data-offset="30"设置偏移量 -->
<div class="scrollspy" data-spy="scroll" data-target="#menu" data-offset="30">
    <h3 id="1">列表1</h3>
    <p><img src="img/1.jpg"></p>
    <h3 id="2">列表2</h3>
    <p><img src="img/2.jpg"></p>
    <h3 id="3">列表3</h3>
    <p><img src="img/3.jpg"></p>
    <h3 id="4">列表4</h3>
    <p><img src="img/4.jpg"></p>
    <h3 id="5">列表5</h3>
    <p><img src="img/5.jpg"></p>
</div>

滚动监听

<body data-spy="scroll" data-target="#navbar" data-offset="0">
<div id="navbar">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#1">列表1</a></li>
        <li><a href="#2">列表2</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#3">列表3</a></li>
                <li><a href="#4">列表4</a></li>
                <li><a href="#5">列表5</a></li>
            </ul>
        </li>
    </ul>
</div>
<!-- data-spy="scroll"为监听对象设置data属性 -->
<!-- data-target="#menu"设置监听对象 -->
<!-- data-offset="30"设置偏移量 -->
<div class="scrollspy" >
    <h3 id="1">列表1</h3>
    <p><img src="img/1.jpg"></p>
    <h3 id="2">列表2</h3>
    <p><img src="img/2.jpg"></p>
    <h3 id="3">列表3</h3>
    <p><img src="img/3.jpg"></p>
    <h3 id="4">列表4</h3>
    <p><img src="img/4.jpg"></p>
    <h3 id="5">列表5</h3>
    <p><img src="img/5.jpg"></p>
</div>

CSS样式

#navbar { position: fixed; right: 10px; top: 50px; width: 200px; background-color: #fff; }

调用:
第一种 :使用 data-spy=”scroll”方法,上述就是
第二种 :使用JS调用
HTML仅仅去掉data-spy=”scroll”

$(function () {
    $("body").scrollspy();
    // 当一个新导航条的项目被激活时触发
    $("body").on("activate", function (e) {
        if (e.target && $(e.target).hasClass("dropdown")){
            $(e.target).children("ul.dropdown-menu").css("display", "block");
        } else {
            $(e.target).parent().find("ul.dropdown-menu").css("display", "none");
        }
    })
});

你可能感兴趣的:(bootstrap,插件,下拉菜单,滚动监听,模拟对话框)