Bootstrap 插件【一】

来源：互联网发布：mp4下载软件编辑：程序博客网时间：2024/06/01 20:40

学习要点：

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

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");        }    })});

0 0