zoukankan      html  css  js  c++  java
  • 交互设计:隐藏或显示大段文本的UI组件有哪些?

    应用场景:

    在手机上要给列表中的每一项添加一个大段的介绍,应该用什么UI组件

    A:

    这里可以用,模态对话框,弹出提示,工具提示这类组件。模态对话框的好处,就是用关闭的按钮,用户操作方便;而弹出提示和工具提示只能通过点击来切换

    模态对话框:

    http://v2.bootcss.com/javascript.html#modals

    http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

    Bootstrap 模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

    如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js

    用法

    您可以切换模态框(Modal)插件的隐藏内容:

    • 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。
    • 通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
      $('#identifier').modal(options)

    实例

    一个静态的模态窗口实例,如下面的实例所示:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 模态框(Modal)插件</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <h2>创建模态框(Modal)</h2>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" 
       data-target="#myModal">
       开始演示模态框
    </button>
    
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
       aria-labelledby="myModalLabel" aria-hidden="true">
       <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" id="myModalLabel">
                   模态框(Modal)标题
                </h4>
             </div>
             <div class="modal-body">
                在这里添加一些文本
             </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><!-- /.modal-content -->
    </div><!-- /.modal -->
    </div>
    </body>
    </html>

    结果如下所示:

    模态框(Modal)插件

    代码讲解:

    • 使用模态窗口,您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
    • 如果您仔细查看上面的代码,您会发现在 <button> 标签中,data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,您不能在同一时间加载多个模块,但您可以在页面上创建多个在不同时间进行加载。
    • 在模态框中需要注意两点:
      1. 第一是 .modal,用来把 <div> 的内容识别为模态框。
      2. 第二是 .fade class。当模态框被切换时,它会引起内容淡入淡出。
    • aria-labelledby="myModalLabel",该属性引用模态框的标题。
    • 属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。
    • <div class="modal-header">,modal-header 是为模态窗口的头部定义样式的类。
    • class="close",close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式。
    • data-dismiss="modal",是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
    • class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。
    • class="modal-footer",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。
    • data-toggle="modal",HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

    选项

    有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:

    选项名称类型/默认值Data 属性名称描述
    backdrop boolean 或 string 'static'
    默认值:true
    data-backdrop 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。
    keyboard boolean
    默认值:true
    data-keyboard 当按下 escape 键时关闭模态框,设置为 false 时则按键无效。
    show boolean
    默认值:true
    data-show 当初始化时显示模态框。
    remote path
    默认值:false
    data-remote 使用 jQuery .load 方法,为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href,则会加载其中的内容。如下面的实例所示:
    <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

    方法

    下面是一些可与 modal() 一起使用的有用的方法。

    方法描述实例
    Options: .modal(options) 把内容作为模态框激活。接受一个可选的选项对象。
    $('#identifier').modal({
    keyboard: false
    })
    Toggle: .modal('toggle') 手动切换模态框。
    $('#identifier').modal('toggle')
    Show: .modal('show') 手动打开模态框。
    $('#identifier').modal('show')
    Hide: .modal('hide') 手动隐藏模态框。
    $('#identifier').modal('hide')

    实例

    下面的实例演示了方法的用法:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 模态框(Modal)插件方法</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <h2>模态框(Modal)插件方法</h2>
    
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
       开始演示模态框
    </button>
    
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
       aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
                   aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                   模态框(Modal)标题
                </h4>
             </div>
             <div class="modal-body">
                按下 ESC 按钮退出。
             </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><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
       $(function () { $('#myModal').modal({
          keyboard: true
       })});
    </script>
    
    </body>
    </html>

    结果如下所示:

    模态框(Modal)插件方法

    只需要点击 ESC 键,模态窗口即会退出。

    事件

    下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

    事件描述实例
    show.bs.modal 在调用 show 方法后触发。
    $('#identifier').on('show.bs.modal', function () {
      // 执行一些动作...
    })
    shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。
    $('#identifier').on('shown.bs.modal', function () {
      // 执行一些动作...
    })
    hide.bs.modal 当调用 hide 实例方法时触发。
    $('#identifier').on('hide.bs.modal', function () {
      // 执行一些动作...
    })
    hidden.bs.modal 当模态框完全对用户隐藏时触发。
    $('#identifier').on('hidden.bs.modal', function () {
      // 执行一些动作...
    })

    实例

    下面的实例演示了事件的用法:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 模态框(Modal)插件事件</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <h2>模态框(Modal)插件事件</h2>
    
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
       开始演示模态框
    </button>
    
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
       aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
                   aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                   模态框(Modal)标题
                </h4>
             </div>
             <div class="modal-body">
                点击关闭按钮检查事件功能。
             </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><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
       $(function () { $('#myModal').modal('hide')})});
    </script>
    <script>
       $(function () { $('#myModal').on('hide.bs.modal', function () {
          alert('嘿,我听说您喜欢模态框...');})
       });
    </script>
    
    </body>
    </html>

    结果如下所示:

    模态框(Modal)插件事件

    正如上面实例所示,如果您点击了 关闭 按钮,即 hide 事件,则会显示一个警告消息。


    Bootstrap 弹出框(Popover)插件

    弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。

    如果您想要单独引用该插件的功能,那么您需要引用 popover.js,它依赖于 工具提示(Tooltip)插件。或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js

    用法

    弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面。您可以有以下两种方式添加弹出框(popover):

    • 通过 data 属性:如需添加一个弹出框(popover),只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框(popover)的文本。默认情况下,插件把弹出框(popover)设置在顶部。
      <a href="#" data-toggle="popover" title="Example popover">
         请悬停在我的上面
      </a>
      
    • 通过 JavaScript:通过 JavaScript 启用弹出框(popover):
      $('#identifier').popover(options)
      

    弹出框(Popover)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover):

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

    实例

    下面的实例演示了通过 data 属性使用弹出框(Popover)插件的用法。

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 弹出框(Popover)插件</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container" style="padding: 100px 50px 10px;" >
       <button type="button" class="btn btn-default" title="Popover title"  
          data-container="body" data-toggle="popover" data-placement="left" 
          data-content="左侧的 Popover 中的一些内容">
          左侧的 Popover
       </button>
       <button type="button" class="btn btn-primary" title="Popover title"  
          data-container="body" data-toggle="popover" data-placement="top" 
          data-content="顶部的 Popover 中的一些内容">
          顶部的 Popover
       </button>
       <button type="button" class="btn btn-success" title="Popover title"  
          data-container="body" data-toggle="popover" data-placement="bottom" 
          data-content="底部的 Popover 中的一些内容">
          底部的 Popover
       </button>
       <button type="button" class="btn btn-warning" title="Popover title"  
          data-container="body" data-toggle="popover" data-placement="right" 
          data-content="右侧的 Popover 中的一些内容">
          右侧的 Popover
       </button>
       </div>
    
       <script>$(function () 
          { $("[data-toggle='popover']").popover();
          });
       </script>
    </div>
    
    </body>
    </html>
    

    结果如下所示:

    弹出框(Popover)插件

    选项

    有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。下表列出了这些选项:

    选项名称类型/默认值Data 属性名称描述
    animation boolean
    默认值:true
    data-animation 向弹出框应用 CSS 褪色过渡效果。
    html boolean
    默认值:false
    data-html 向弹出框插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。
    placement string|function
    默认值:top
    data-placement 规定如何定位弹出框(即 top|bottom|left|right|auto)。
    当指定为 auto 时,会动态调整弹出框。例如,如果 placement 是 "auto left",弹出框将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
    selector string
    默认值:false
    data-selector 如果提供了一个选择器,弹出框对象将被委派到指定的目标。
    title string | function
    默认值:''
    data-title 如果未指定 title 属性,则 title 选项是默认的 title 值。
    trigger string
    默认值:'hover focus'
    data-trigger 定义如何触发弹出框: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。
    delay number | object
    默认值:0
    data-delay 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
    delay:
    { show: 500, hide: 100 }
    container string | false
    默认值:false
    data-container 向指定元素追加弹出框。
    实例: container: 'body'

    方法

    下面是一些弹出框(Popover)插件中有用的方法:

    方法描述实例
    Options: .popover(options) 向元素集合附加弹出框句柄。
    $().popover(options)
    Toggle: .popover('toggle') 切换显示/隐藏元素的弹出框。
    $('#element').popover('toggle')
    
    Show: .popover('show') 显示元素的弹出框。
    $('#element').popover('show')
    
    Hide: .popover('hide') 隐藏元素的弹出框。
    $('#element').popover('hide')
    
    Destroy: .popover('destroy') 隐藏并销毁元素的弹出框。
    $('#element').popover('destroy')
    

    实例

    下面的实例演示了弹出框(Popover)插件的方法:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 弹出框(Popover)插件方法</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container" style="padding: 100px 50px 10px;" >
       <button type="button" class="btn btn-default popover-show" 
          title="Popover title" data-container="body" 
          data-toggle="popover" data-placement="left" 
          data-content="左侧的 Popover 中的一些内容 —— show 方法">
          左侧的 Popover
       </button>
       <button type="button" class="btn btn-primary popover-hide" 
          title="Popover title" data-container="body" 
          data-toggle="popover" data-placement="top" 
          data-content="顶部的 Popover 中的一些内容 —— hide 方法">
          顶部的 Popover
       </button>
       <button type="button" class="btn btn-success popover-destroy" 
          title="Popover title" data-container="body" 
          data-toggle="popover" data-placement="bottom" 
          data-content="底部的 Popover 中的一些内容 —— destroy 方法">
          底部的 Popover
       </button>
       <button type="button" class="btn btn-warning popover-toggle" 
          title="Popover title" data-container="body" 
          data-toggle="popover" data-placement="right" 
          data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
          右侧的 Popover
       </button><br><br><br><br><br><br>
       <p class="popover-options">
          <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"  
             data-container="body" data-toggle="popover" data-content="
             <h4>Popover 中的一些内容 —— options 方法</h4>">
             Popover
          </a>
       </p>
       <script>
          $(function () { $('.popover-show').popover('show');});
          $(function () { $('.popover-hide').popover('hide');});
          $(function () { $('.popover-destroy').popover('destroy');});
          $(function () { $('.popover-toggle').popover('toggle');});
         $(function () { $(".popover-options a").popover({html : true });});
       </script>
    </div>
    
    </body>
    </html>
    

    结果如下所示:

    弹出框(Popover)插件方法

    事件

    下表列出了弹出框(Popover)插件中要用到的事件。这些事件可在函数中当钩子使用。

    事件描述实例
    show.bs.popover 当调用 show 实例方法时立即触发该事件。
    $('#mypopover').on('show.bs.popover', function () {
      // 执行一些动作...
    })
    
    shown.bs.popover 当弹出框对用户可见时触发该事件(将等待 CSS 过渡效果完成)。
    $('#mypopover').on('shown.bs.popover', function () {
      // 执行一些动作...
    })
    
    hide.bs.popover 当调用 hide 实例方法时立即触发该事件。
    $('#mypopover').on('hide.bs.popover', function () {
      // 执行一些动作...
    })
    
    hidden.bs.popover 当工具提示对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。
    $('#mypopover').on('hidden.bs.popover', function () {
      // 执行一些动作...
    })
    

    实例

    下面的实例演示了弹出框(Popover)插件的事件:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 弹出框(Popover)插件事件</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div clas="container" style="padding: 100px 50px 10px;" >
       <button type="button" class="btn btn-primary popover-show" 
          title="Popover title" data-container="body" 
          data-toggle="popover" 
          data-content="左侧的 Popover 中的一些内容 —— show 方法">
          左侧的 Popover
       </button>
    
       </div>
       <script>
          $(function () { $('.popover-show').popover('show');});
          $(function () { $('.popover-show').on('shown.bs.popover', function () {
          alert("当显示时警告消息");
       })});
       </script>
    </div>
    
    </body>
    </html>
    

    结果如下所示:

    弹出框(Popover)插件事件
     

    Bootstrap 提示工具(Tooltip)插件

    当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。

    如果您想要单独引用该插件的功能,那么您需要引用 tooltip.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js

    用法

    提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。您可以有以下两种方式添加提示工具(tooltip):

    • 通过 data 属性:如需添加一个提示工具(tooltip),只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具(tooltip)的文本。默认情况下,插件把提示工具(tooltip)设置在顶部。
      <a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
      
    • 通过 JavaScript:通过 JavaScript 触发提示工具(tooltip):
      $('#identifier').tooltip(options)
      
    提示工具(Tooltip)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的提示工具(tooltip):
    $(function () { $("[data-toggle='tooltip']").tooltip(); });
    

    实例

    下面的实例演示了通过 data 属性使用提示工具(Tooltip)插件的用法。

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 提示工具(Tooltip)插件</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <h4>提示工具(Tooltip)插件 - 锚</h4>
    这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" 
       title="默认的 Tooltip">
       默认的 Tooltip
    </a>.
    这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" 
       data-placement="left" title="左侧的 Tooltip">
       左侧的 Tooltip
    </a>.
    这是一个 <a href="#" data-toggle="tooltip" data-placement="top" 
       title="顶部的 Tooltip">
       顶部的 Tooltip
    </a>.
    这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" 
       title="底部的 Tooltip">
       底部的 Tooltip
    </a>.
    这是一个 <a href="#" data-toggle="tooltip" data-placement="right" 
       title="右侧的 Tooltip">
       右侧的 Tooltip
    </a>
    
    <br>
    
    <h4>提示工具(Tooltip)插件 - 按钮</h4>
    <button type="button" class="btn btn-default" data-toggle="tooltip" 
       title="默认的 Tooltip">
       默认的 Tooltip
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" 
       data-placement="left" title="左侧的 Tooltip">
       左侧的 Tooltip
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" 
       data-placement="top" title="顶部的 Tooltip">
       顶部的 Tooltip
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" 
       data-placement="bottom" title="底部的 Tooltip">
       底部的 Tooltip
    </button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" 
       data-placement="right" title="右侧的 Tooltip">
       右侧的 Tooltip
    </button>
    <script>
       $(function () { $("[data-toggle='tooltip']").tooltip(); });
    </script>
    
    </body>
    </html>
    

    结果如下所示:

    提示工具(Tooltip)插件

    选项

    有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。下表列出了这些选项:

    选项名称类型/默认值Data 属性名称描述
    animation boolean
    默认值:true
    data-animation 提示工具使用 CSS 渐变滤镜效果。
    html boolean
    默认值:false
    data-html 向提示工具插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。
    placement string|function
    默认值:top
    data-placement 规定如何定位提示工具(即 top|bottom|left|right|auto)。
    当指定为 auto 时,会动态调整提示工具。例如,如果 placement 是 "auto left",提示工具将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
    selector string
    默认值:false
    data-selector 如果提供了一个选择器,提示工具对象将被委派到指定的目标。
    title string | function
    默认值:''
    data-title 如果未指定 title 属性,则 title 选项是默认的 title 值。
    trigger string
    默认值:'hover focus'
    data-trigger 定义如何触发提示工具: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。
    content string | function
    默认值:''
    data-content 如果未指定 data-content 属性,则使用默认的 content 值。
    delay number | object
    默认值:0
    data-delay 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
    delay:
    { show: 500, hide: 100 }
    container string | false
    默认值:false
    data-container 向指定元素追加提示工具。
    实例: container: 'body'

    方法

    下面是一些提示工具(Tooltip)插件中有用的方法:

    方法描述实例
    Options: .tooltip(options) 向元素集合附加提示工具句柄。
    $().tooltip(options)
    Toggle: .tooltip('toggle') 切换显示/隐藏元素的提示工具。
    $('#element').tooltip('toggle')
    
    Show: .tooltip('show') 显示元素的提示工具。
    $('#element').tooltip('show')
    
    Hide: .tooltip('hide') 隐藏元素的提示工具。
    $('#element').tooltip('hide')
    
    Destroy: .tooltip('destroy') 隐藏并销毁元素的提示工具。
    $('#element').tooltip('destroy')
    

    实例

    下面的实例演示了提示工具(Tooltip)插件方法的用法。

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 提示工具(Tooltip)插件方法</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div style="padding: 100px 100px 10px;">
       这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" 
          title="show">Tooltip 方法 show
       </a>.
    
       这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip" 
          data-placement="left" title="hide">Tooltip 方法 hide
       </a>.
    
       这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip" 
          data-placement="top" title="destroy">Tooltip 方法 destroy
       </a>.
    
       这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip" 
          data-placement="bottom" title="toggle">Tooltip 方法 toggle
       </a>.
       <br><br><br><br><br><br>
       <p class="tooltip-options" >
          这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2
             </h2>">Tooltip 方法 options
          </a>.
       </p>
    
       <script>
          $(function () { $('.tooltip-show').tooltip('show');});
          $(function () { $('.tooltip-hide').tooltip('hide');});
          $(function () { $('.tooltip-destroy').tooltip('destroy');});
          $(function () { $('.tooltip-toggle').tooltip('toggle');});
          $(function () { $(".tooltip-options a").tooltip({html : true });
          });
       </script>
    <div>
    
    </body>
    </html>
    

    结果如下所示:

    提示工具(Tooltip)插件方法

    事件

    下表列出了提示工具(Tooltip)插件中要用到的事件。这些事件可在函数中当钩子使用。

    事件描述实例
    show.bs.tooltip 当调用 show 实例方法时立即触发该事件。
    $('#myTooltip').on('show.bs.tooltip', function () {
      // 执行一些动作...
    })
    
    shown.bs.tooltip 当提示工具对用户可见时触发该事件(将等待 CSS 过渡效果完成)。
    $('#myTooltip').on('shown.bs.tooltip', function () {
      // 执行一些动作...
    })
    
    hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。
    $('#myTooltip').on('hide.bs.tooltip', function () {
      // 执行一些动作...
    })
    
    hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。
    $('#myTooltip').on('hidden.bs.tooltip', function () {
      // 执行一些动作...
    })
    

    实例

    下面的实例演示了提示工具(Tooltip)插件事件的用法。

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 提示工具(Tooltip)插件事件</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <h4>提示工具(Tooltip)插件 - 锚</h4>
    这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" 
       title="默认的 Tooltip">默认的 Tooltip
    </a>.
    
    <script>
    $(function () { $('.tooltip-show').tooltip('show');});
    $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
       alert("Alert message on show");
    })});
    </script>
    
    </body>
    </html>
    

    结果如下所示:

    提示工具(Tooltip)插件事件
  • 相关阅读:
    AtCoDeer and Election Report
    乒乓球
    dp(装箱)
    《非你莫属》面试者现场跟面试官用英文对话,一口流利的英语口语厉害了
    冬天喝酸奶,可以加热吗?冬天喝酸奶,这4个方面要注意
    滑县两个富豪打赌,一人吃了一泡狗屎
    为什么外国富豪都喜欢捐光所有财产
    发的微博有敏感词
    社交网络
    怎么把word中的文字拉细变瘦长
  • 原文地址:https://www.cnblogs.com/kenshinobiy/p/5012242.html
Copyright © 2011-2022 走看看