zoukankan      html  css  js  c++  java
  • 第 15 章 标签页和工具提示插件

    学习要点:

    1.标签页
    2.工具提示

    主讲教师:李炎恢

    本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件。

    一.标签页
    标签页也就是通常所说的选项卡功能。
    //基本用法

    <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">
            ...
        </div>
        <div class="tab-pane" id="bootstrap">
            ...
        </div>
        <div class="tab-pane" id="jquery">
            ...
        </div>
        <div class="tab-pane" id="extjs">
            ...
        </div>
    </div>

    //可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示

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

    //也可以换成胶囊式

    <ul class="nav nav-pills">

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

    //使用 JavaScript,直接使用 tab 方法。

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

    //事件,其他雷同

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

    二.工具提示
    工具提示就是通过鼠标移动选定在特定的元素上时,显示相关的提示语。
    //基本实例

    <a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>

    //JS 部分需要声明

    $('#section').tooltip();

    工具提示有很多属性来配置提示的显示,具体如下:

    <a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符"
        data-animation="false"
        data-html="true"
        data-placement="auto"
        data-selector="a[rel=tooltip]"
        data-trigger="click"
        data-delay="500"
        data-template="<b>123</b>"
    >HTML5</a>

    JavaScript 方式直接去掉前面的 data 即可。包括:animation、html、placement、selector、original-title、title、trigger、delay、container 和 template 等属性。
    //JavaScript 方式

    $('#section a').tooltip({
        delay : {
            show : 500,
            hide : 100,
        },
        container : 'body'
    }); 

    JavaScript 有四个方法:show、hide、toggle 和 destroy 四种。

    //显示
    $('#section a').tooltip('show');
    //隐藏
    $('#section a').tooltip('hide');
    //反转显示和隐藏
    $('#section a').tooltip('toggle');
    //隐藏并销毁
    $('#section a').tooltip('destroy');

    Tooltip 中事件有四种。

    //事件,其他雷同

    $('#select a').on('show.bs.tooltip', function() {
        alert('调用 show 时触发!');
    }); 
  • 相关阅读:
    Linux的kobject机制
    利用内核模块添加系统调用
    register_sysctl_table实现内核数据交互
    设计模式17---享元模式
    设计模式16---中介者模式
    java实现PV操作
    设计模式15---桥接模式
    设计模式15---迭代器模式
    设计模式14---组合模式
    设计模式13---备忘录模式
  • 原文地址:https://www.cnblogs.com/zfc2201/p/5427240.html
Copyright © 2011-2022 走看看