Bootstrap JS插件使用实例(2)

Bootstrap JS插件使用实例(2)-模态对话框 发表于 2013-04-27 17:16 ,已有 2484 次阅读 ，共 8 个评论 本篇文章讨论Bootstrap的js模态对话框插件(bootstrap-modal.js) 先看个简单示例，可直接粘贴运行： view sourceprint? 01. !DOCTYPE html 02. html lang =

Bootstrap JS插件使用实例(2)-模态对话框 发表于 2013-04-27 17:16 ,已有 2484 次阅读 ，共 8 个评论

本篇文章讨论Bootstrap的js模态对话框插件(bootstrap-modal.js)

先看个简单示例，可直接粘贴运行：

view sourceprint?

01.

02. html lang = "en" >

03. head >

04. meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />

05. title >模态对话框示例 title >

06. link href = "http://www.see-source.com/bootstrap/css/bootstrap.css" rel = "stylesheet" >

07. script type = "text/javascript" src = "http://www.see-source.com/bootstrap/js/jquery.js" > script >

08. script type = "text/javascript" src = "http://www.see-source.com/bootstrap/js/bootstrap-modal.js" > script >

09. head >

10.

11. body >

12. div class = "modal hide" id = "myModal" >

13. div class = "modal-header" >

14. button type = "button" class = "close" data-dismiss = "modal" >× button >

15. h3 >对话框标题 h3 >

16. div >

17. div class = "modal-body" >

18. p >你好... p >

19. div >

20. div class = "modal-footer" >

21. a href = "#" data-dismiss = "modal" class = "btn" >关闭 a >

22. a href = "#" class = "btn btn-primary" >保存 a >

23. div >

24. div >

25.

26. button type = "button" class = "btn" data-toggle = "modal" data-target = "#myModal" >打开对话框 button >

27. body >

28. html >

运行效果：

需要注意：

Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。

view sourceprint?

1.

2. html lang = "en" >

3. ...

4. html >

下面来对上面的代码进行解析下：

bootstrap.css Bootstrap 样式库，这是必不可少的。

jquery.js 引入jquery，Bootstrap插件是jquery插件，依赖于jquery。

bootstrap-modal.js 模式对话框插件

将上面代码中关于对话框的部分摘出来：

view sourceprint?

01. div class = "modal hide" id = "myModal" >

02. div class = "modal-header" >

03. button type = "button" class = "close" data-dismiss = "modal" >× button >

04. h3 >对话框标题 h3 >

05. div >

06. div class = "modal-body" >

07. p >你好... p >

08.

09. div >

10. div class = "modal-footer" >

11. a href = "#" data-dismiss = "modal" class = "btn" >关闭 a >

12. a href = "#" class = "btn btn-primary" >保存 a >

13. div >

14. div >

bootstrap定义的对话框的结构。.modal样式用于定义整个对话框。对话框内包含三部分：modal-header、modal-body、modal-footer 。与上面的css样式名对应。modal-header主要用于显示标题，还可以带有关闭按钮。modal-body是正文部分，具体内容可自定义，一般可以是提示语，或是个表单。modal-footer主要显示操作按钮，如上面的"关闭"、"保存"。这三部分是一般对话框都具备的结构。

调用方式

1 . 通过data属性触发

我们无须手写javascript即可在页面中触发对话框。只要在某个激发元素上设置 data-toggle="modal" ，然后将 data-target="#foo" 或 href="#foo" 设为某个对话框元素的id，这样点击激发元素就会弹出对话框。

如上面示例中的激发元素：

view sourceprint?

1. class = "btn" type= "button" data-toggle= "modal" data-target= "#myModal" >打开对话框

其中data-target 的值要与某个对话框的id一致，表示将其作为 对话框并激活、打开。如上面示例中的id为myModal：

view sourceprint?

1. div class = "modal hide" id = "myModal" >

2. ....

3. div >

2.通过javascript 触发

.modal(options) 使用此通用方法将某个元素变成对话框激活

示例：

view sourceprint?

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

将id="myModal"的元素作为对话框并打开。

参数设置

在触发对话框时还可以设置一些参数：

名称 类型 默认 描述 backdrop 布尔值 true 为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。 为false时，无背景。 keyboard 布尔值 true 为true时按下ESC键关闭模态对话框。 为false时无效。 show 布尔值 true 是否在初始化时显示对话框。 参数可以通过data属性或JavaScript传递。对于data属性，将参数名称附着到 data- 之后，即 data- backdrop ="true" 。参数可以加到触发元素上，也可加到对话框元素上， 示例如下：

view sourceprint?

1. button class = "btn" type = "button" data-toggle = "modal" data-target = "#myModal" data-backdrop = "false" >打开对话框 button >

加到触发元素上

view sourceprint?

1. div class = "modal hide fade" id = "myModal" data-backdrop = "false" >

加到对话框元素上

对于通过javascript设置，如下：

view sourceprint?

1. $( '#myModal' ).modal({

2. keyboard: false

3. })

另外还提供了几个控制方法，如下：

.modal('toggle') 手动切换对话框打开和关闭， 即在关闭与打开间转换。

view sourceprint?

1. $( '#myModal' ).modal( 'toggle' )

.modal('show')

打开对话框

view sourceprint?

1. $( '#myModal' ).modal( 'show' )

.modal('hide') 关闭对话框

view sourceprint?

1. $( '#myModal' ).modal( 'hide' )

设置过度效果(动态效果)

需要设置2个地方：

首先要引入过度效果的javascript插件 bootstrap-transition.js,同时将对话框的html元素添加类样式 .fade。如下：

view sourceprint?

1. "margin:0px;padding:0px;" > "text/javascript" src= "http://www.see-source.com/bootstrap/js/jquery.js" >

2. "text/javascript" src= "http://www.see-source.com/bootstrap/js/bootstrap-modal.js" >

3. "text/javascript" src= "http://www.see-source.com/bootstrap/js/bootstrap-transition.js" >

添加过度效果插件 bootstrap-transition.js

view sourceprint?

1. div class = "modal hide fade" id = "myModal" >

添加类样式 .fade

示例：

view sourceprint?

01. strong style = "font-family:'sans serif', tahoma, verdana, helvetica;font-size:12px;line-height:1.5;margin:0px;padding:0px;" > strong style = "font-family:Verdana, sans-serif, 宋体;font-size:14px;line-height:21px;margin:0px;padding:0px;" >

02. html lang = "en" >

03. head >

04. meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />

05. title >带过度效果的模态对话框示例 title >

06. link href = "http://www.see-source.com/bootstrap/css/bootstrap.css" rel = "stylesheet" >

07. script type = "text/javascript" src = "http://www.see-source.com/bootstrap/js/jquery.js" > script >

08. script type = "text/javascript" src = "http://www.see-source.com/bootstrap/js/bootstrap-modal.js" > script >

09. script type = "text/javascript" src = "http://www.see-source.com/bootstrap/js/bootstrap-transition.js" > script >

10. head >

11.

12. body >

13. div class = "modal hide fade" id = "myModal" >

14. div class = "modal-header" >

15. button type = "button" class = "close" data-dismiss = "modal" >× button >

16. h3 >对话框标题 h3 >

17. div >

18. div class = "modal-body" >

19. p >你好... p >

20. div >

21. div class = "modal-footer" >

22. a href = "#" data-dismiss = "modal" class = "btn" >关闭 a >

23. a href = "#" class = "btn btn-primary" >保存 a >

24. div >

25. div >

26.

27. button type = "button" class = "btn" data-toggle = "modal" data-target = "#myModal" >打开对话框 button >

28. body >

29. html > strong > strong >

事件 Bootstrap的对话框类扩展了一组事件，可以介入对话框的某些功能实现。

事件 描述 show 该事件在调用 show 方法时立刻触发。 shown 该事件在对话框已经呈现给用户后（要等CSS过渡效果生效后）触发。 hide 该事件在对话框使用 hide 方法时立刻触发。 hidden 该事件在对话框已经关闭后（要等CSS过渡效果生效后）触发。 通过如下添加事件：

view sourceprint?

1. $( '#myModal' ).on( '事件名称' , function () {

2. // do something…

3. })

示例：

view sourceprint?

1. $( '#myModal' ).on( 'show' , function () {

2. // do something…

3. })

添加show事件

view sourceprint?

1. $( '#myModal' ).on( 'hidden' , function () {

2. // do something…

3. })

添加hidden事件

Bootstrap JS插件使用实例(2)

Articles Liés