首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery学习札记(2)-用jquery实现各种模态提示框

2012-10-10 
jQuery学习笔记(2)----用jquery实现各种模态提示框好久以来就想实现一个模态的框框,找了很多的jquery插件,

jQuery学习笔记(2)----用jquery实现各种模态提示框

     好久以来就想实现一个模态的框框,找了很多的jquery插件,都没有碰到自己满意的,这次碰到了一个,但是由于还处于开发阶段吧,连个文档API都没有,自己摸索了好长一段时间才搞定。


     先来看看代码,本人看着源代码定制了自己想要的效果:




        其中,css文件夹,images文件夹下放着所需要的css文件与图片,而js文件夹下放着所需要的js文件,别看这么多,后续还有很多功能需要这些文件,实现模态提示框只是其中的一个小功能,即magicDialog文件夹下的文件。


     好了,运行dialogDemo.jsp文件,页面如下所示:


jQuery学习札记(2)-用jquery实现各种模态提示框


       贴出几个效果吧!


       点击“Basic”:


jQuery学习札记(2)-用jquery实现各种模态提示框


       点击“Spinner”:


jQuery学习札记(2)-用jquery实现各种模态提示框


       点击“Customize”:


jQuery学习札记(2)-用jquery实现各种模态提示框


       总体来说,还是挺不错的一个插件,在IE9与Chrome浏览器下测试均没问题,只不过弹出框在Chrome浏览器下支持拖动,在IE9下却不支持。


        具体源文件请参考官网:http://boarsoft.com/cn/,里面有很多其他的例子,后续本人会一一尝试下。


      这是本人学习的结果,允许转载,欢迎交流,但转载务必给出本文章的链接地址:http://blog.csdn.net/youqishini/article/details/8043119,谢谢~



热点排行