首頁 > 開發者 > JavaScript

jQuery學習筆記(2)--用jquery實現各種模態提示框代碼及項目構架

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

     好久以來就想實現一個模態的框框，找了很多的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>

     整個項目構架如所示：


        其中，css檔案夾，images檔案夾下放著所需要的css檔案與圖片，而js檔案夾下放著所需要的js檔案，別看這麼多，後續還有很多功能需要這些檔案，實現模態提示框只是其中的一個小功能，即magicDialog檔案夾下的檔案。

     好了，運行dialogDemo.jsp檔案，頁面如下所示：


       貼出幾個效果吧！

       點擊“Basic”：


       點擊“Spinner”：


       點擊“Customize”：


       總體來說，還是挺不錯的一個外掛程式，在IE9與Chrome瀏覽器下測試均沒問題，只不過彈出框在Chrome瀏覽器下支援拖動，在IE9下卻不支援。

       具體源檔案請參考官網：http://boarsoft.com/cn/，裡面有很多其他的例子，後續本人會一一嘗試下。

       這是本人學習的結果，允許轉載，歡迎交流，但轉載務必給出本文章的連結地址

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More