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

发布于 2017-04-20 04:24:15 | 70 次阅读 | 评论: 0 | 来源: 网友投递

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

想实现一个模态的框框，找了很多的jquery插件，都没有碰到自己满意的于是自己摸索了一个，接下来为大家介绍下实现的思路及代码，希望对你有所帮助

好久以来就想实现一个模态的框框，找了很多的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>

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