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


Posted in Javascript onApril 08, 2013

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

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

<%@ page language="java"contentType="text/html; charset=utf-8" 
pageEncoding="utf-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> 
<title>JQueryMagicDialog 的基本使用</title> 
<link href="./css/default.css"type="text/css" rel="stylesheet"> 
<link href="./css/default(1).css"type="text/css" rel="stylesheet"> 
<script type="text/javascript"src="./js/jquery.js"></script> 
<script type="text/javascript"src="./js/cn.js"></script> 
<script type="text/javascript"src="./js/magicDialog/core.js"></script> 
<script type="text/javascript"src="./js/ui.js"></script> 
<script type="text/javascript"src="./js/global.js"></script> 
<script type="text/javascript"src="./js/magicDialog/dialog.js"></script> 
<script type="text/javascript"src="./js/ga.js"></script> 
<style type="text/css"> 
#btn{ 
position:absolute; 
top: 50px; 
left: 250px; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$('.dlgDemoBtn').click(function(){ 
var el = $(this), act = el.attr('action'); 
switch(act){ 
case 'basic': 
$('<div></div>').mac('dialog',{ 
title: '提示', 
model: true, 
autoOpen: true, 
width: 200, 
draggable: true, 
el: '<p>你点击了我!</p>' 
}); 
break; 
case 'extended': 
mac.opendlg({ 
title: '提示', 
message: '按下 {0} 可关闭窗口.', 
params: ['<b>ESC/Enter</b>'], 
buttons: [{ 
text: '确认', 
click: function(d){ 
d.close(); 
} 
}] 
}); 
break; 
case 'wait': 
var h = mac.wait('3秒后此窗口自动关闭'); 
window.setTimeout(function(){ 
h.close(); 
}, 3000); 
break; 
case 'alert': 
mac.alert('Hello!'); 
break; 
case 'confirm': 
mac.confirm('<p>你确认吗?</p>', function(){ 
alert('You clickedyes!'); 
}, null); 
break; 
case 'customize': 
mac.confirm('<p>你确认吗?</p>', null, null, [{ 
text: '关闭', 
click: function(d){ 
d.close(); 
} 
},{ 
text: '确认', 
click: function(d){ 
d.close(); 
} 
}]); 
break; 
} 
}); 
}); 
</script> 
</head> 
<body> 
<div id="btn"> 
<button class="dlgDemoBtn"action="basic">Basic</button> 
<button class="dlgDemoBtn"action="extended">Extended</button> 
<button class="dlgDemoBtn"action="wait">Spinner</button> 
<button class="dlgDemoBtn"action="alert">Alert</button> 
<button class="dlgDemoBtn"action="confirm">Confirm</button> 
<button class="dlgDemoBtn"action="customize">Customize</button> 
</div> 
</body> 
</html>

     整个项目构架如下图所示:

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

        其中,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/,里面有很多其他的例子,后续本人会一一尝试下。

       这是本人学习的结果,允许转载,欢迎交流,但转载务必给出本文章的链接地址

Javascript 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 #Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 #Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 #Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 #Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 #Javascript
JS继承--原型链继承和类式继承
Apr 08 #Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 #Javascript
You might like
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
php常用hash加密函数
2014/11/22 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
python实现贪吃蛇双人大战
2020/04/18 Python
优秀管理者获奖感言
2014/02/17 职场文书
股权投资意向书
2014/04/01 职场文书
食品采购员岗位职责
2014/04/14 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
机关职员工作检讨书
2014/10/23 职场文书
2014年宣传工作总结
2014/11/18 职场文书
公司年会主持词范文!
2019/05/07 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery