JavaScript插件——模态框
2013-11-12 11:12
316 查看
Bootstrap3.0学习第十七轮(JavaScript插件——模态框)
前言阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看/article/4711879.html
本文主要来学习一下JavaScipt插件模态框。在学习模态框之前,我们先来了解一下JavaScript插件吧。
JavaScript插件概览
插件可以单个引入(使用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')
每个插件还通过
Constructor属性暴露了其自身的构造器函数:
$.fn.popover.Constructor。如果你想获取某个插件的实例,可以直接从页面元素内获取:
$('[rel=popover]').data('popover')。
避免冲突
某些时候可能需要将Bootstrap插件与其他UI框架共同使用。在这种情况下,命名空间冲突随时可能发生。如果不行发生了这种情况,你可以通过调用插件的.noConflict方法恢复原始值。
var bootstrapButton = $.fn.button.noConflict() $.fn.bootstrapBtn = bootstrapButton
事件
Bootstrap为大部分插件所具有的动作提供了自定义事件。一般来说,这些事件都有不定式和过去式两种动词形式,例如,不定式形式的动词表示其在事件开始时被触发;而过去式动词表示其在动作直接完毕之后被触发。从3.0.0开始,所有的Bootstrap事件都采用了命名空间。
所有以不定式形式的动词命名的事件都提供了
preventDefault功能。这就赋予你在动作开始执行前将其停止的能力。
$('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() })
第三方工具库
Bootstrap官方不提供对第三方JavaScript工具库的支持,例如Prototype或jQuery UI。除了.noConflict和采用命名空间的事件,还可能会有兼容性方面的问题,这就需要你自己来处理了
模态框
案例
模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。不支持模态框重叠
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。静态案例
以下模态框包含了模态框的头、体和一组在放置于底部的按钮。<!DOCTYPE html> <html lang="zh-CN"> <head> <title>Bootstrap</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <style type="text/css"> .btn-group:hover>.dropdown-menu{display:block;} </style> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <!DOCTYPE html> <html lang="zh-CN"> <head> <title>Bootstrap</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <style type="text/css"> .btn-group:hover>.dropdown-menu{display:block;} </style> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1></h1> <script type="text/javascript"> function test() { $('#myModal').modal('show'); alert(1); } </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> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $('#myModal').on('hide.bs.modal', function () { alert(11); }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>Bootstrap</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <style type="text/css"> .btn-group:hover>.dropdown-menu{display:block;} </style> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <!DOCTYPE html> <html lang="zh-CN"> <head> <title>Bootstrap</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <style type="text/css"> .btn-group:hover>.dropdown-menu{display:block;} </style> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1></h1> <script type="text/javascript"> function test() { $('#myModal').modal('show'); alert(1); } </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> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $('#myModal').on('hide.bs.modal', function () { alert(11); }); </script> </body> </html>
总结
关于模态框的学习,感觉过程中遇到了好多问题,到现在还没有解决,不过大体上已经了解了,还需要慢慢深入。关于JavaScript插件看来没那么容易勒。
本文已更新至Bootstrap3.0入门学习系列导航/article/4711879.html
相关文章推荐
- bootstrap JavaScript 插件 之 模态框
- Bootstrap3.0学习第十七轮(JavaScript插件——模态框)
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件
- Bootstrap3.0学习教程十七:JavaScript插件模态框
- Bootstrap3.0学习第十七轮(JavaScript插件——模态框)
- 【JavaScript】纯粹javascript无任何插件的兼容IE6的模态框modal
- Bootstrap3.0学习第十七轮(JavaScript插件——模态框)
- Javascript插件--模态框(Bootstrap)
- VS2010常用插件介绍之Javascript插件
- jQuery插件--仿facebook样式的模态框.
- Bootstrap的模态框modal插件实现点击协议链接弹出协议详情功能
- 【sublime】sublime Text 3 javaScript代码自动提示插件&安装步骤 &启动Debug模式
- Bootstrap3.0学习第二十二轮(JavaScript插件——弹出框)
- javascript&&jquery编写插件模板
- 使用javascript打开模态对话框【转】
- DEMO6:坐标添加文字标签的JavaScript插件
- javaScript中的模态窗口
- JavaScript插件:快速选择日期----jedate日历插件
- JBox - 模态窗口,工具提示和消息 jQuery 插件
- jQuery编写的javascript图像画廊插件Galleria