本文转自 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. Introduce: IEPI.BIATranscribe 图像表格拓写工具

    应用场合 数据表格是学术.文案工作中常用的表述形式.我们经常需要从第三方获取所需的数据.有些时候这些数据并非以可直接编辑的形式(如电子表格文档),而是以打印件或者扫描件的形式提供.假如需要对数据进行进 ...

  2. MaltReport2:基于 OpenDocument/OpenOfficeXML 的报表引擎

    MaltReport 是我几年前写的开源单据.报表引擎,最近进行了较大的更新,尤其是几年来在生产项目中应用取得了非常好的效果,特别写篇介绍文字给大家分享一下. 首先先介绍几个名词: OpenDocum ...

  3. Biztalk AS2开发经验总结

    一.    准备证书    4 1.    升级win2008 R2证书服务    4 2.    申请证书    6 二.    配置证书    13 1.    为AS2配置证书    13 2. ...

  4. 快速实现python c扩展模块

    1  python扩展模块的组成 在python中,对于一些和系统相关的模块或者对性能要求很高的模块,通常会把这个模块C化.扩展模块中主要包含下面几个部分: init函数,函数名为:init+模块名, ...

  5. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  6. 一个想法(续五):IT联盟创业计划:现阶段进度公示、疑问解答及进行中的计划

    前言: 首先今天是元宵节,先祝大伙元宵节快,单纯的快乐! 然后看看开展中的计划: IT联盟创业计划众筹发起:一个想法(续三):一份IT技术联盟创业计划书,开启众筹创业征程 IT联盟创业计划众筹进度:一 ...

  7. [MongoDB] - Shell基本命令

    在这里,我简单的记录一下MongoDB在shell客户端中使用的基本命令,比如创建/显示数据库,创建集合,删除集合等. 一.启动MongoDB并连接shell客户端 使用mongod.exe和mong ...

  8. NSKeyedArchiver/NSKeyedUnarchiver归档应用(缓存实现)

    NSKeyedUnarchiver : 从二进制流读取对象; NSKeyedArchiver :把对象写到二进制流中去. 要实现对数据模型的归档,需要我们实现NScoding协议,(NScoping) ...

  9. SuperWebClient -一个基于CURL的.NET HTTP/HTTPS模拟神组件(2)

    今天我们讨论SuperWebClient组件使用中的几个简单主题 1: UserAgent2: Cookies3: POST登录 1:UserAgent这个是客户端标识信息,此信息是用于鉴别正在访问W ...

  10. 使用秘钥连接ssh

    ssh服务器搭建 通过秘钥登陆连接另外一台虚拟机 创建证书  ssh-keygen -t rsa 第一行密钥保存位置直接输入回车 确定默认创建位置为 /root/.ssh 公钥必须改名为  autho ...