快捷導(dǎo)航

jQuery學(xué)習(xí)筆記(2)--用jquery實(shí)現(xiàn)各種模態(tài)提示框代碼及項(xiàng)目構(gòu)架

更新時(shí)間：2013年04月08日 17:41:34 作者：

想實(shí)現(xiàn)一個(gè)模態(tài)的框框，找了很多的jquery插件，都沒有碰到自己滿意的于是自己摸索了一個(gè)，接下來為大家介紹下實(shí)現(xiàn)的思路及代碼，希望對你有所幫助

好久以來就想實(shí)現(xiàn)一個(gè)模態(tài)的框框，找了很多的jquery插件，都沒有碰到自己滿意的，這次碰到了一個(gè)，但是由于還處于開發(fā)階段吧，連個(gè)文檔API都沒有，自己摸索了好長一段時(shí)間才搞定。

先來看看代碼，本人看著源代碼定制了自己想要的效果：

復(fù)制代碼代碼如下:

<%@ 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>你點(diǎn)擊了我！</p>' 
}); 
break; 
case 'extended': 
mac.opendlg({ 
title: '提示', 
message: '按下 {0} 可關(guān)閉窗口.', 
params: ['<b>ESC/Enter</b>'], 
buttons: [{ 
text: '確認(rèn)', 
click: function(d){ 
d.close(); 
} 
}] 
}); 
break; 
case 'wait': 
var h = mac.wait('3秒后此窗口自動關(guān)閉'); 
window.setTimeout(function(){ 
h.close(); 
}, 3000); 
break; 
case 'alert': 
mac.alert('Hello!'); 
break; 
case 'confirm': 
mac.confirm('<p>你確認(rèn)嗎?</p>', function(){ 
alert('You clickedyes!'); 
}, null); 
break; 
case 'customize': 
mac.confirm('<p>你確認(rèn)嗎？</p>', null, null, [{ 
text: '關(guān)閉', 
click: function(d){ 
d.close(); 
} 
},{ 
text: '確認(rèn)', 
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> 