交互设计教程 隐藏或显示大段文本的UI组件解析
关关 2018-06-29 来源 : 阅读 1371 评论 0

摘要:本篇交互设计教程讲解了隐藏或显示大段文本的UI组件,希望阅读本篇文章以后大家有所收获,帮助大家对交互设计的理解更加深入。

应用场景:

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

A:

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

 

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>
      <div>
         <div>
            <button type="button"
               data-dismiss="modal" aria-hidden="true">
                  ×
            </button>
            <h4 id="myModalLabel">
               模态框(Modal)标题
            </h4>
         </div>
         <div>
            在这里添加一些文本
         </div>
         <div>
            <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>

尝试一下 »

 

代码讲解:

· 使用模态窗口,您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。

· 如果您仔细查看上面的代码,您会发现在 <button> 标签中,data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,您不能在同一时间加载多个模块,但您可以在页面上创建多个在不同时间进行加载。

· 在模态框中需要注意两点:

1. 第一是 .modal,用来把 <div> 的内容识别为模态框。

2. 第二是 .fade class。当模态框被切换时,它会引起内容淡入淡出。

· aria-labelledby="myModalLabel",该属性引用模态框的标题。

· 属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。

· <div>,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 来传递的。

  

方法实例

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

<!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>
      <div>
         <div>
            <button type="button" data-dismiss="modal"
               aria-hidden="true">×
            </button>
            <h4 id="myModalLabel">
               模态框(Modal)标题
            </h4>
         </div>
         <div>
            按下 ESC 按钮退出。
         </div>
         <div>
            <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>

尝试一下 »

 

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

事件实例

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

<!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>
      <div>
         <div>
            <button type="button" data-dismiss="modal"
               aria-hidden="true">×
            </button>
            <h4 id="myModalLabel">
               模态框(Modal)标题
            </h4>
         </div>
         <div>
            点击关闭按钮检查事件功能。
         </div>
         <div>
            <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>

正如上面实例所示,如果您点击了 关闭 按钮,即 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 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>

 

选项

有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。


实例

下面的实例演示了弹出框(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 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>
      <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)插件的事件:

<!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>

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="#" data-toggle="tooltip"

   title="默认的 Tooltip">

   默认的 Tooltip

</a>.

这是一个 <a href="#" 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>

尝试一下 »

结果如下所示:

 

选项

有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。

实例

下面的实例演示了提示工具(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="#" data-toggle="tooltip"
      title="show">Tooltip 方法 show
   </a>.
 
   这是一个 <a href="#" data-toggle="tooltip"
      data-placement="left" title="hide">Tooltip 方法 hide
   </a>.
 
   这是一个 <a href="#" data-toggle="tooltip"
      data-placement="top" title="destroy">Tooltip 方法 destroy
   </a>.
 
   这是一个 <a href="#" data-toggle="tooltip"
      data-placement="bottom" title="toggle">Tooltip 方法 toggle
   </a>.
   <br><br><br><br><br><br>
   <p >
      这是一个 <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)插件事件的用法。

<!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="#" 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>


本文由职坐标整理发布,学习更多的交互设计相关知识,请关注职坐标设计创作交互设计频道!

本文由 @关关 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程