jQuery学习笔记(2) - 用jquery实现各种模态提示框代码及项目构架

好久以来就想实现一个模态的框框，找了很多的jquery插件，都没有碰到自己满意的，这次碰到了一个，但是由于还处于开发阶段吧，连个文档应用程序接口都没有，自己摸索了好长一段时间才搞定。先来看看代码，本人看着源代码定制了自己想要的效果：复制代码代码如下：%@页面语言=' Java '内容类型=' text/html；charset=utf-8 '页面编码=' utf-8 ' %！DOCTYPE html PUBLIC '-//W3C//DTDHTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/html 4/loose。dtd ' html head meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 ' titleJQueryMagicDialog的基本使用/title link href=' ./CSS/默认值。CSS"type="text/CSS"rel="样式表链接./css/default(1).CSS“type=”text/CSS“rel=”样式表'脚本类型=' text/JAVAScript ' src=' http :/js/jquery。js/'脚本脚本类型=' text/JAVAScript ' src=' http :/js/cn。js/'脚本脚本类型=' text/JAVAScript ' src=' http :/js/Magicdialog/core。js/'脚本脚本类型=' text/JAVAScript ' src=' http :/js/ui。js '/script脚本类型=' text/JavaScript ' src=' http :/js/global。js/'脚本脚本类型=' text/JAVAScript ' src=' http :/js/Magicdialog/dialog。js/'脚本脚本类型=' text/JAVAScript ' src=' http :/js/ga。js /脚本样式类型=' text/CSS ' # BTN {位置：绝对值；top : 50pxleft : 250 px }/样式脚本类型=' text/JavaScript ' $(function(){ $(').dlgDemoBtn ').click(function(){ var el=$(this)，act=El。attr(' action ')；开关(act){ case ' basic ' : $(' div/div ').mac('dialog '，{ title: '提示，model: true，autoOpen: true，width: 200，draggable: true，el: 'p你点击了我！/p ' })；打破；案例'扩展' : MAC。opendlg({ title : }提示，消息： '按下{0} 可关闭窗口。参数： ['ESC/Enter']，按钮：[{ text : }确认，点击：函数(d){ d . close()；} }] });打破；案例'等待' : var h=MAC。等待(' 3秒后此窗口自动关闭');window.setTimeout(函数(){ h . close()；}, 3000);打破；案例'警报' : MAC。警报('你好！');打破；案例'确认' : MAC。确认(' p你确认吗？/p '，函数(){ alert('您单击了是!');}，null)；打破；案例‘定制’: MAC。确认(' p你确认吗？/p '，null，null，[{ text: '关闭，点击：函数(d){ d . close()；} }，{ text: '确认，点击：函数(d){ d . close()；} }]);打破；} });});/script/head body div id=' BTN ' button class=' dlgDemoBtn ' action=' basic ' basic/button class=' dlgDemoBtn ' action=' extended ' extended/button class=' dlgDemoBtn ' action=' wait ' spinner/button class=' dlgDemoBtn ' action=' alert ' alert/button class=' dlgDemoBtn ' action=' confirm ' confirm ' confirm/button class=' dlgDemoBtn ' action=' customize ' customize/button/div/body/hth整个项目构架如下图所示

其中，css文件夹，图像文件夹下放着所需要的钢性铸铁文件与图片，而射流研究…文件夹下放着所需要的射流研究…文件，别看这么多，后续还有很多功能需要这些文件，实现模态提示框只是其中的一个小功能，即magicDialog文件夹下的文件。好了，运行dialogDemo.jsp文件，页面如下所示

贴出几个效果吧！点击"基本":

点击"旋转者":

点击"定制":

总体来说，还是挺不错的一个插件，在IE9与铬浏览器下测试均没问题，只不过弹出框在铬浏览器下支持拖动，在IE9下却不支持。具体源文件请参考官网：http://boarsoft.com/cn/，里面有很多其他的例子，后续本人会一一尝试下。这是本人学习的结果，允许转载，欢迎交流，但转载务必给出本文章的链接地址