欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  数据库

Bootstrap JS插件使用实例(2)

程序员文章站 2022-04-22 20:55:56
...

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 JS插件使用实例(2)

需要注意:

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.

其中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;"> src="http://www.see-source.com/bootstrap/js/jquery.js">

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

3. 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事件