jQuery學習筆記(2)--用jquery實作各種模態提示框程式碼及專案架構_jquery

     很久以來就想實現一個模態的框框，找了很多的jquery插件，都沒有碰到自己滿意的，這次碰到了一個，但是由於還處於開發階段吧，連個文檔API都沒有，自己摸索了好長一段時間才搞定。

     先來看看程式碼，自己看著原始碼客製化了想要的效果：

複製程式碼 程式碼如下:

pageEncoding="utf-8"%>

').mac('dialog' ,{
title: '提示',
model: true,
autoOpen: true,
width: 200,
draggable: true,
el: '

你點擊了我！

'
});
break;
case 'extended':
mac.opendlg({
title: '提示',
message: '按{ 0} 可關閉視窗.',
params: ['ESC/Enter'],
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('

你確認嗎?

', function(){
alert('You clickedyes!');
}, null);
break;
case 'customize':
mac.confirm('

你確認嗎？ ,{
text: '確認',
click: function(d){
d.close();
}
}]);
break;
}
});
});

Basic
Extended
Spinner
Alert
Confirm
Customize

     整個專案架構如下圖所示：

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

     好了，執行dialogDemo.jsp文件，頁面如下：

       貼出幾個效果吧！

       點選「Basic」：

       點選「Spinner」：

       點選「Customize」：

       整體來說，還是挺不錯的一個插件，在IE9與Chrome瀏覽器下測試均沒問題，只不過彈出框在Chrome瀏覽器下支援拖曳，在IE9下卻不支援。

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

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