文章

bootstrap第六小节

文章目录

滚动监听

—— 通过 data 属性调用

滚动监听(Scrollspy)插件是用来根据滚动条所处的位置自动更新导航项目, 显示导航项目高亮显示。

通过 data 属性调用

为监控对象设置被监控的 data 属性:data-spy="scroll";
指定监控的导航条:data-target="#nav";
定义监控过程中滚动条偏移位置 data-offset="0"(默认值为10)。

代码如下:

<div data-offset="0" data-target="#nav" data-spy="scroll">
    ....
</div>

具体实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 滚动监听</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="nav" class="navbar navbar-default">
    <ul class="nav navbar-nav">
        <li>
            <a href="#html5">HTML5</a>
        </li>
        <li>
            <a href="#bootstrap">Bootstrap</a>
        </li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li>
                    <a href="#jquery">jQuery</a>
                </li>
                <li>
                    <a href="#yui">Yui</a>
                </li>
                <li>
                    <a href="#extjs">Extjs</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

<div data-offset="0" data-target="#nav" data-spy="scroll" style="height: 200px; overflow: auto; position: relative;padding: 0 10px;">
    <h4 id="html5">HTML5</h4>
    <p>为了推动 Web 标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group(Web 超文本应用技术工作组 -WHATWG) 的组织。WHATWG 致力于 Web 表单和应用程序,而 W3C(World Wide Web Consortium,万维网联盟) 专注于 XHTML2.0。在 2006 年, 双方决定进行合作,来创建一个新版本的 HTML。 </p>
    <h4 id="bootstrap">Bootstrap</h4>
    <p> Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的。</p>
    <h4 id="jquery">jQuery</h4>
    <p> JQuery 是继 prototype 之后又一个优秀的 Javascript 库。 它是轻量级的 js库 ,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) ,jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML(标准通用标记语言下的一个应用) 、 events、 实现动画效果, 并且方便地为网站提供 AJAX交互。jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页面保持代码和 html 内容分离, 也就是说, 不用再在 html 里面插入一堆 js 来调用命令了, 只需要定义 id 即可。 </p>
    <h4 id="yui">Yui</h4>
    <p> 近几年随着 jQuery、Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野, 可谓应接不暇。 不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了开发素材,也方便了大家的开发。这些框架各有特点,本文对这些框架进行初步的介绍与比较, 希望能够为大家选择框架提供一点帮助, 也为后续详细研究这些框架的抛砖引玉。 </p>
    <h4 id="extjs">Extjs</h4>
    <p> ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用,是一个用 javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端 ajax 框架。因此,可以把 ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。ExtJs 最开始基于 YUI 技术,由开发人员 JackSlocum 开发,通过参考 JavaSwing 等机制来组织可视化组件,无论从 UI 界面上 CSS 样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript 客户端技术的精品。 </p>
</div>
</body>
</html>

滚动监听 —— 通过 JavaScript 调用
在 Bootstrap 框架中,使用 JavaScript 方法触发滚动监控器只需要指定两个容器的名称即可。

比如下面的结构:

<nav id="navbar-menu" class="navbar navbar-default">
  ...
</nav>
<div class="scrollspy" id="scrollspy">
  ...
</div>

如果使用 JavaScript 触发, 可以去掉 data-*, 使用脚本属性定义: offset、 spy 和 target。

具体方法如下:

$('#scrollspy').scrollspy({
    offset : 0,
    target: "#navbar-menu",
}); 

无论何种实现方式,滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。

方法

方法
Bootstrap 的滚动监控还提供了一个更新容器 DOM 的方法 scrollspy("refresh")。

当滚动监控所作用的 DOM 有增加或删除页面元素的操作时,需要调用下面的refresh方法:

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

注意:这个方法必须使用 data-*声明式。

事件

滚动监听还有一个切换到新条目的事件。

事件绑定在导航上的实例:

$('#nav').on('activate.bs.scrollspy', function() {
    ...
}); 

标签页

标签页(Tab)也就是通常所说的选项卡功能。

标签页是 Web 中一种非常常用的功能。

用户点击或悬浮对应的菜单项,能切换出对应的内容。如下图所示:

标签页的结构

一个标签页主要包括两个部分:

菜单项
内容面板

菜单项结构实例如下:

<!-- 标签页组件(菜单项nav-tabs)-->                                                                                       <ul class="nav nav-tabs">
    <li class="active">
        <a href="#bootstrap" data-toggle="tab">bootstrap</a>
    </li>
        ...
</ul>

内容面板结构如下:

<div class="tab-content">
    <div class="tab-pane" id="bootstrap">
        <p>bootstrap ... </p>
    </div>
      ...
</div>

实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 标签页(Tab)插件</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 选项卡组件(菜单项nav-tabs)-->
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#html5" data-toggle="tab">HTML5</a>
    </li>
    <li>
        <a href="#bootstrap" data-toggle="tab">Bootstrap</a>
    </li>
    <li>
        <a href="#jquery" data-toggle="tab">jQuery</a>
    </li>
    <li>
        <a href="#extjs" data-toggle="tab">ExtJS</a>
    </li>
</ul>
    <!-- 选项卡面板 -->
<div class="tab-content" style="padding: 10px;">
    <div class="tab-pane active" id="html5">
        <p>为了推动 Web 标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group(Web 超文本应用技术工作组 -WHATWG) 的组织。WHATWG 致力于 Web 表单和应用程序,而 W3C(World Wide Web Consortium,万维网联盟) 专注于 XHTML2.0。在 2006 年, 双方决定进行合作,来创建一个新版本的 HTML。 </p></div>
    <div class="tab-pane" id="bootstrap">
        <p>
            Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的。
        </p>
    </div>
    <div class="tab-pane" id="jquery">JQuery 是继 prototype 之后又一个优秀的 Javascript 库。 它是轻量级的 js库 ,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) ,jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML(标准通用标记语言下的一个应用) 、 events、 实现动画效果, 并且方便地为网站提供 AJAX交互。jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页面保持代码和 html 内容分离, 也就是说,不用再在 html 里面插入一堆 js 来调用命令了, 只需要定义 id 即可。 </div>
    <div class="tab-pane" id="extjs">ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用,是一个用 javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端 ajax 框架。因此,可以把 ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。ExtJs 最开始基于 YUI 技术,由开发人员 JackSlocum 开发,通过参考 JavaSwing 等机制来组织可视化组件,无论从 UI 界面上 CSS 样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript 客户端技术的精品。 </div>
</div>
</body>
</html>

通过 data 属性

标签页也定义 data 属性来触发切换效果。

声明式触发需要满足以下几点:

  1. 标签页导航链接中要设置 data-toggle="tab";

  2. 面板内容统一放在 tab-content 容器中,而且每个内容面板 tab-pane 都需要设置一个独立的选择符(最好是ID)与标签页中的 data-target 或 href 的值匹配。

    使用 data-target 绑定或不绑定效果都是一样的

通过 JavaScript
除了在 HTML 设置 data-toggle 来触发选项卡之外,还可以通过 Javascript 来启用标签页。

直接使用 tab 方法:

$('#nav a').on('click', function(e) {
    e.preventDefault();
    $(this).tab('show'); 
})

标签页 —— 基本用法

淡入淡出
我们可以为标签页设置淡入淡出效果,添加 .fade 到每个 .tab-pane 后面。最初的默认显示的内容面板一定要加上 in 类名,不然其内容用户无法看到。

<div class="tab-pane fade in active" id="html5">

胶囊式标签页
Bootstrap 除了可以让 nav-tabs 具有标签页的切换功能之外,还可以对胶囊式导航也具有标签页的功能。

添加 nav 和 nav-pills 类到 ul 中,将会应用 Bootstrap 胶囊式样式。

<ul class="nav nav-pills">

事件
下表列出了标签页(Tab)插件中要用到的事件

事件实例(其他事件雷同):

$('#nav a').on('show.bs.tab', function() {
    alert('调用 tab 时触发!');
});

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

  e.target // 激活的标签页

  e.relatedTarget // 前一个激活的标签页

})

JS 触发提示工具方法

Bootstrap 框架中的提示工具的触发方式和前面介绍的插件略有不同。

它不直接通过自定义的属性 data-* 来触发,必须得依赖于 JavaScript 的代码触发。

启用页面上所有工具提示的一种方法是通过数据切换属性选择它们:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

除此之外,也可单独指定一个元素,在该元素上调用提示工具且可无需定义一些 data 属性。

使用 JavaScript 来设置提示工具参数,如:

$(function(){
    $('#myTooltip').tooltip({
       title:"超文本标识符"
    });
});

方法

提示工具(Tooltip)插件中有四种方法:show、hide、toggle 和 destroy 。

$('#element').tooltip('show'); //显示元素
$('#element').tooltip('hide'); //隐藏元素
$('#element').tooltip('toggle'); //切换显示/隐藏元素
$('#element').tooltip('destroy');//隐藏并销毁元素

事件

Tooltip 中事件有四种,如下:

事件实例(其他雷同):

$('#element').on('show.bs.tooltip', function() {
    alert('调用 show 时触发!');
}); 

弹出框

弹出框:点击一个元素弹出一个包含标题和内容的容器。

弹出框的结构
弹出框(Popover)和提示工具(tooltip)相比,就多了一个 data-content 属性,我们可以使用 data-content 来定义弹出框中的内容。

同样可以使用 button 或者 a 标签来制作弹出框,如下:

HTML 部分:

<button class="btn btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件"> 点我 </button>

JS 部分:

$('button').popover();

Bootstrap 框架中触发弹出框和提示工具一样,不能直接通过 HTML 的自定义 data 属性来触发,需要依赖于JavaScript脚本

除了上面的触发方式外,也可通过 JavaScript 的各种参数来(与提示工具中的自定义的 data 属性基本相同)实现,无需定义一些data属性,如:

 $(function(){

        $('[data-toggle="popover"]').popover({

            title:"我是弹出框的标题",

            content:"我是弹出框的内容",

            placement:"right"

        });

});

弹出框 -- 方法和事件

通过 JavaScript 执行的方法有四个:

$('#element').popover('show'); //显示元素
$('#element').popover('hide'); //隐藏元素
$('#element').popover('toggle'); //切换显示/隐藏元素
$('#element').popover('destroy');//隐藏并销毁元素

Popover 插件中事件有四种:

事件实例(其他雷同):

$('button').on('show.bs.tab', function() {
    alert('调用 show 方法时触发!');
}); 

弹出框和提示工具的异同
弹出框中 HTML 自定义的 data 属性和提示框中的自定义的 data 属性基本相同,只不过在其基础上增加了一个 data-content 属性,用来设置弹出框的内容。

两插件也有不同之处:

提示工具(tooltip)的默认触发事件是 hover 和 focus,而弹出框(popover)是 click
提示工具(tooltip)只有一个内容(title),而弹出框不仅可以设置标题(title)还可以设置内容(content)

警告框

警告框插件是在警告框组件的基础上添加单击 X 号能关闭警告框的功能。
所以警告框插件结构只需要在其组件的基础上添加一个按钮即可:

<div class="alert " role="alert">
    <button class="close" type="button" >×</button>
    恭喜恭喜!
</div>

使用 JS 代码来触发警告框

如果通过自定义的 HTML 属性(声明式)来触发警告框,需要在关闭按钮上设置自定义属性data-dismiss="alert",这点已在警告框组件中学过,这里不再赘述。
除了通过自定义data-dismiss="alert"属性来触发警告框关闭之外,还可以通过 JavaScript 方法。

只需要在关闭按钮上绑定一个事件。如下所示:

html代码:

<div class="alert alert-warning">

    <button class="close" type="button">

        <span>×</span>

    </button>

    <p> 警告:您的浏览器不支持!</p>

</div>

通过下面的JavaScript代码来触发:

    $('.close').on('click', function() {

        $('.alert').alert('close');

    })                                                         

注意:.alert('close'):关闭方法,关闭所有的警告框。

事件

Alert 插件中事件有两种:

事件实例(其他类似):

$('#alert').on('close.bs.alert', function() {
    alert('当 close 方法被触发时调用!');
}); 

我们还可以添加淡入淡出效果,添加 .fade 和 .in 类即可。如下:

<div class="alert alert-warning fade in">
原文来自:bootstrap第六小节,尊重自己,尊重每一个人;转发请注明来源!
0 0

发表评论