4.1Bootstrap学习js插件篇之模态框
2014-05-06 18:52
155 查看
前言
单个还是全部引入
插件可以单个引入(使用Bootstrap提供的单个*.js文件),或一次性全部引入(使用
bootstrap.js或压缩版的
bootstrap.min.js)。
不要将两份文件全部引入
bootstrap.js和
bootstrap.min.js同样是包含了所有插件。区别是:一个没有压缩,一个进行了压缩。
插件之间的依赖
某些插件和CSS组件依赖于其它插件。如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系。注意,所有插件都依赖jQuery(也就是说,jQuery必须在所有插件之前引入页面)。 bower.json文件中列出了所支持的jQuery版本。
Data属性
你可以仅仅通过data属性API就能使用所有的Bootstrap插件,无需写一行JavaScript代码。这是Bootstrap中的一等API,也应该是你的首选方式。话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭data属性API的方式,即解除绑定到文档命名空间上的所有事件
data-api。就像下面这样:
$(document).off('.data-api')
另外,如果是针对某个特定的插件,只需在data-api前面添加那个插件的名称作为命名空间,如下:
$(document).off('.alert.data-api')
编程式API
我们还提供了所有Bootstrap插件的纯JavaScript API。所有公开的API都是支持单独或链式调用的,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。$('.btn.danger').button('toggle').addClass('fat')
所有方法都可以接受一个可选的option对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):
$('#myModal').modal() // 使用默认值初始化 $('#myModal').modal({ keyboard: false }) // 初始化。不支持键盘导航 $('#myModal').modal('show') // 初始化并立即展示</p>
每个插件还通过
Constructor属性暴露了其自身的构造器函数:
$.fn.popover.Constructor。如果你想获取某个插件的实例,可以直接从页面元素内获取:
$('[rel=popover]').data('popover')。
避免冲突
某些时候可能需要将Bootstrap插件与其他UI框架共同使用。在这种情况下,命名空间冲突随时可能发生。如果不幸发生了这种情况,你可以通过调用插件的.noConflict方法恢复原始值。
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
事件
Bootstrap为大部分插件所具有的动作提供了自定义事件。一般来说,这些事件都有不定式和过去式两种动词形式,例如,不定式形式的动词(例如show)表示其在事件开始时被触发;而过去式动词(例如
shown)表示其在动作直接完毕之后被触发。
从3.0.0开始,所有的Bootstrap事件都采用了命名空间。
所有以不定式形式的动词命名的事件都提供了
preventDefault功能。这就赋予你在动作开始执行前将其停止的能力。
$('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() // stops modal from being shown })
第三方工具库
Bootstrap官方不提供对第三方JavaScript工具库的支持,例如Prototype或jQuery UI。除了.noConflict和采用命名空间的事件,还可能会有兼容性方面的问题,这就需要你自己来处理了。你可以在此邮件列表获取帮助。
模态框
案例
模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。
不支持模态框重叠
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。
对于移动设备的附加说明
本文档针对移动设备上使用模态框有一些附加说明。请参考浏览器支持章节。
静态案例
以下模态框包含了模态框的头、体和一组在放置于底部的按钮。代码:
<divclass="modal
fade"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button><h4class="modal-title">Modal
title</h4></div><divclass="modal-body"><p>One
fine body…</p></div><divclass="modal-footer"><buttontype="button"class="btn
btn-default"data-dismiss="modal">Close</button><buttontype="button"class="btn
btn-primary">Save changes</button></div></div><!--
/.modal-content --></div><!--
/.modal-dialog --></div><!--
/.modal -->
首先最外层的是model,然后里面嵌套了一个model-dialog,model-dialog里面又嵌套model-content,当中包含“header”、“title”、"footer"。不过运行程序后,模态框没有显示出来,暂时还没找到原因。
动态演示
点击下面的按钮即可通过JavaScript启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。代码:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">加载模态框</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->预览效果:
同样的,不过首先是一个按钮,按钮中添加了两个data属性,要设置data-toggle="modal" data-target="#myModal"。
然后下面最大的是一个modal,并且给与属性id赋值为上面button中的data-target ,进行交互。
增强模态框的可访问性
请确保为.modal添加了
role="dialog";
aria-labelledby="myModalLabel"属性指向模态框标题;
aria-hidden="true"告诉辅助性工具略过模态框的DOM元素。
另外,你还应该为模态框添加描述性信息。为
.modal添加
aria-describedby属性用以指向描述信息。
用法
通过data属性
不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素(例如,按钮)上设置data-toggle="modal",并使用
data-target="#foo"或
href="#foo"指向特定的模态框即可。
例子就是上面的例子
通过JavaScript调用
只需一行JavaScript代码,即可通过id myModal调用模态框:
$('#myModal').modal(options)
方法
.modal(options)
将你指定的内容作为模态框启动。其接受一个可选的object类型的参数。
$('#myModal').modal({ keyboard: false })
.modal('toggle')
手动启动或隐藏模态框。$('#myModal').modal('toggle')
手动打开一个模态框。
$('#myModal').modal('show')
手动隐藏一个模态框。
$('#myModal').modal('hide')
<script type="text/javascript"> function test() { $('#myModal').modal('show'); } </script> <button onClick="test()" class="btn btn-primary btn-lg"> Launch demo modal </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> One fine body… </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
为按钮添加了onclick事件,也就是通过点击按钮触发事件来进行模态框的弹出。
事件
Bootstrap的模态框类暴露了一些事件用于截获并执行自己的代码。<script type="text/javascript">
$('#myModal').on('show.bs.modal', function () {
alert("show");
});
$('#myModal').on('shown.bs.modal', function () {
alert("shown");
});
$('#myModal').on('hide.bs.modal', function () {
alert("hide");
});
$('#myModal').on('hidden.bs.modal', function () {
alert("hidden");
});
</script>效果就是分别在显示时显示后关闭时关闭后可以执行自定义的函数。
相关文章推荐
- 学习java&xml心得(二)
- Java软件开发学习笔记(三)
- xpath学习中
- 用The Regulator 学习正则表达式
- JAVA学习笔记
- 设计模式学习笔记二:面向对象基础六之委托与事件
- 学习java的30个目标
- Visual Studio 集成开发工具学习(2)Visual Studio 2008快捷键大全
- 学习 C++ 的50条建议
- 学习SqlServer 的宝典!(可以到CSDN搜索打包资源!我已经上传《SQLServer学习宝典》)
- flex学习小结5
- 基础学习--表的存储参数(三)
- 文件系统的初步学习
- 献给php初学者(入门学习经验谈)
- C#学习之Reflection
- 《Android开发从零开始》——7.Intent初级学习
- 孙鑫VC学习(第5课--文档编程)
- erlang 语言学习笔记
- 黑马程序员张毓庆学习日记第一篇
- 一个游戏程序员的学习资料 (转)