本文转自 http://www.cnblogs.com/ventlam/archive/2012/06/17/2536728.html

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境。这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面。

Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的。它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrollspy),标签效果(Tabs),提示效果(Tooltip),“泡芙”效果(popovers),警告区域(Alerts),折叠效果(Collapse),旋转木马(carousel),输入提示(typeahead)等.这些内容会分作两讲来阐述,本讲将深入讲解modals等插件。在bootstrap中所有涉及动画效果的javascript插件,都必须先引用Transitions JS,包括modals,alerts等来实现淡出效果。

1.模态窗口(Modals)

模态窗口是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的窗口(对话框).Bootstrap对于模态窗口的实现十分精简灵活,用户只需要使用少量的代码和智能的默认设置,即能实现传统实现传统的Javascript效果的模态窗口。默认的Bootstrap模态窗口效果,包括对话框从屏幕上方落下,屏幕其他区域变暗淡,模态窗口的隐藏等。这些效果分别对应.modal .fade .hide 这些类。我们可以不用写任何javascript代码来实现Modal效果,只需要将 data-toggle="modal" 放置于在触发控制要素(如按钮,超链接等),并指定它的Modal窗口的ID链接(data-target="#mymodal",href="#mymodal")。当这些控制要素被触发的时候,modal窗口就会出现了。模式窗口的内容可以非常丰富,这些内容都需要包括在modal的div内,并可以定义modal窗口的头部,内容和脚部。

如果使用Jquery调用Modal,也只需要一行javascript代码,

$('#myModal').modal(options)

该选项包括backdrop,keyboard,show三项,主要控制模态窗口的动作。Modal的方法主要包括show,hide,toogle等,主要用于模态窗口的状态控制。Modal的触发事件包括shown,hiden等,主要用于控制模态窗口的功能触发控制。具体效果可以到官方文档的该处尝试一下,点击Launch demo modal按钮即可。Modal的实现如图4-1所示:

图4-1 模态窗口(Modal)

代码如下:

2.滚动监控(Scrollspy)

滚动监控是用来自动更新导航位置基于用户页面滚动的位置。实现该效果,也只需要在你想监控的滚动要素上,添加data-spy="scroll",一般是在body上添加。使用jquery同样调用方法比较简单,只需要一行代码:$('#navbar').scrollspy() .该插件只有refresh方法,offset属性等。具体效果可以到官方文档的该处尝试一下。

效果如图4-2所示:

图4-2 滚动监控(Scrollspy)

代码如下:

3.标签效果(Tabs)

标签插件添加了快速的动态的tab和pill,来实现过渡页面内容的效果。同样的,我们可以不用写任何javascript代码来实现该效果,我们只需要在tab或者piil页面要素上简单地添加上nav 和nav-tabs并引用该js文件即可。同时可以使用ul标签来样式化你的要素。具体效果可以到官方文档的该处尝试一下。效果如图4-3所示:

图4-3 标签效果(Tabs)

   代码如下:

4.提示效果(Tooltip)与“泡芙”效果(popovers)

4.1 提示效果(Tooltip)

提示效果,就是用户鼠标划过或者放在某些连接上,浮现的内容提示和补充。Bootstrap2.0的Tooltip的实现,受Jason Frame写的出色的jQuery.tipsy插件所启发。该版本的Tooltips 不再依赖于图片,而是使用CSS3的动画和数据属性。与本文上述的其他插件不同的是,tooltip的触发事件,必须使用javascript代码实现。我们先来看Tooltip的html写法:

<a href="#" rel="tooltip" title="first tooltip">别摸我</a>

基于性能的原因, 提示效果(Tooltip)和“泡芙”效果(popovers)都在属性中内置了数据选择器,我们可以指定css或者jquery选择器来使用它们。触发tooltip,只需要一行代码:

$('#example').tooltip(options)

它的属性选项包括:animation,placement,selector,trigger,delay等。animation是用来实现提示的淡出css效果,placement则控制提示出现的位置(top,button,left等)。selector选项就是提供给用户,以控制tooltip出现在(委派于/装饰与)页面具体的某个目标上,默认是false。trigger是触发tooltip的鼠标或者键盘事件类型,包括hover,focus,maual等。delay则是控制tooltip的显示和延迟的时间变量(ms),形式可以是这样:delay: { show: 500, hide: 100 }。

tooltip效果如图4-4所示:

图4-4 提示效果(Tooltip)

代码如下所示:

4.2 “泡芙”效果(popovers)

“泡芙”效果就是将一些次要的内容作为一个小的叠加层展添加到具体页面要素上,实现ipad风格的提示效果(实际上就是放大版的tooltip)。因此实现“泡芙”效果(popovers)首先需要引用tooltips插件。我们先来看看“泡芙”效果(popovers)的html的写法。

<a class="btn  btn-success" type="submit" rel="popover" title="推荐到射交网络" data-content="你以为我会告诉你渣浪老删帖吗?!">  推荐</a>

对比tooltip的html的markup,我们可以看到两者的差别就只有在于rel的类型而已。同样的,触发popovers,只需要一行代码:

$('#example').popover(options)

而它的属性与tooltip几乎完全一样……只多一个content,用来存储叠加的内容。效果如图4-5所示:

图4-5 “泡芙”效果(popovers)

代码如下所示:

参考文献与延伸阅读:

1.Modal window http://en.wikipedia.org/wiki/Modal_window

2. 模态窗口和非模态窗口 http://tgyd2006.iteye.com/blog/211497

3.Popover http://en.wikipedia.org/wiki/Popover


本作品由VentLam创作,采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。

BootStrap入门教程 (四)的更多相关文章

  1. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  2. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  3. 无废话ExtJs 入门教程四[表单:FormPanel]

    无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. ...

  4. Bootstrap入门(四)表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

  5. PySide——Python图形化界面入门教程(四)

    PySide——Python图形化界面入门教程(四) ——创建自己的信号槽 ——Creating Your Own Signals and Slots 翻译自:http://pythoncentral ...

  6. Elasticsearch入门教程(四):Elasticsearch文档CURD

    原文:Elasticsearch入门教程(四):Elasticsearch文档CURD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...

  7. RabbitMQ入门教程(四):工作队列(Work Queues)

    原文:RabbitMQ入门教程(四):工作队列(Work Queues) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https:/ ...

  8. JasperReports入门教程(四):多数据源

    JasperReports入门教程(四):多数据源 背景 在报表使用中,一个页面需要打印多个表格,每个表格分别使用不同的数据源是很常见的一个需求.假如我们现在有一个需求如下:需要在一个报表同时打印所有 ...

  9. WebGL入门教程(四)-webgl颜色

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...

随机推荐

  1. Hadoop 的安装及配置

    Linux RedHat--CentOs     CentOs 6.4 Debian--Ubuntu   VMware 虚拟机 关于虚拟机实现上网的解决办法         NAT: 网络地址转换 当 ...

  2. intelliJ IDEA创建web工程

    1.创建project,也就是eclipse里的workspace,eclipse里1个工作空间里可以创建多个工程,idea的一个工作空间里只创建1个工程. File -- New -- Projec ...

  3. Activity启动过程分析

    Android的四大组件中除了BroadCastReceiver以外,其他三种组件都必须在AndroidManifest中注册,对于BroadCastReceiver来说,它既可以在AndroidMa ...

  4. Git学习之路(5)- 同步到远程仓库及多人协作问题

    ▓▓▓▓▓▓ 大致介绍 我们写好文件后添加到版本库,但是这样还没有做完,我们还需要将它同步到GitHub的远程仓库上,这里就以我们刚开始的drag项目为例,我们在Git学习之路(2)-安装GIt和创建 ...

  5. 20150817---成长日记1---DelayQueue&&Delayed&&Other

    今天第一次接触DelayQueue,源于项目中的话单解析入库的拆分线程中引入,首先简单了解一下DelayQueue: DelayQueue是一个无界阻塞队列,只有在延迟期满时才能从中提取元素.该队列的 ...

  6. SDOI Day2

    今天做了SDOI Day2 觉得自己萌萌哒= =题目真的有点水,一点编程复杂度都没有 T1:星际战争 描述:http://www.lydsy.com/JudgeOnline/problem.php?i ...

  7. 不想当程序员的CEO不是好投资人:小米雷军23年前所写代码曝光

    众所周知,雷军是小米创办人,董事长兼CEO,但是较少人知道,其实雷军是程序员出身,并且在程序员这个行业里一做就是十年.有网友曝光了一段23年前雷军所写的代码,一起来看下. 可以看出这段代码写于1994 ...

  8. STL源码剖析(读书笔记)

    STL迭代器种类 2. 迭代器型别使用范例: 3. SGI STL空间配置器分为两级: 4. Vector 的内部存储方式为数组,随机访问迭代器. 5. Vector的size获取方式: 6. Vec ...

  9. TCP和UDP的"保护消息边界”

    转自:http://blog.csdn.net/zhangxinrun/article/details/6721427 在socket网络程序中,TCP和UDP分别是面向连接和非面向连接的.因此TCP ...

  10. 业务逻辑 : forex & mlm

    业务逻辑 公司通过mlm的制度和顾客进行签约来收取资金,再把资金给第三方公司进行投资,再把所投资的回报给分配给公司和顾客. 公司的资金来自投资者,公司的营销策略来自mlm的制度,由市场人员来创建mlm ...