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
>
调用方式
1.通过data属性触发
我们无须手写javascript即可在页面中触发对话框。只要在某个激发元素上设置 data-toggle="modal"
,然后将 data-target="#foo"
或href="#foo"
设为某个对话框元素的id,这样点击激发元素就会弹出对话框。
如上面示例中的激发元素:
view sourceprint?
1.
view sourceprint?
1.
div
class
=
"modal hide"
id
=
"myModal"
>
2.
....
3.
div
>
2.通过javascript触发
.modal(options)
使用此通用方法将某个元素变成对话框激活
示例:
view sourceprint?
1.
$(
'#myModal'
).modal()
参数设置
在触发对话框时还可以设置一些参数:
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
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.
})
view sourceprint?
1.
$(
'#myModal'
).on(
'hidden'
,
function
() {
2.
// do something…
3.
})