幾種面板式樣

功能：

1. //1. 傳入字串
2. art.dialog({   
3.     content: '我支援HTML'
4. });  

1. //1. 傳入字串
2. art.dialog({  
3.     content: '我支援HTML'
4. });  

//1. 傳入字串art.dialog({    content: '我支援HTML'});

效果：

1. /*2. 傳入HTMLElement  
2. 備註：1、元素不是複製而是完整移動到對話方塊中，所以原有的事件與屬性都將會保留 2、如果隱藏元素被傳入到對話方塊，會設定display:block屬性顯示該元素 3、對話方塊關閉的時候元素將恢復到原來在頁面的位置，style display屬性也將恢復
    
3. */
4. art.dialog({   
5.     content: document.getElementById('demoCode_content_DOM'),   
6.     id: 'EF893L'
7. });  

1. /*2. 傳入HTMLElement 
2. 備註：1、元素不是複製而是完整移動到對話方塊中，所以原有的事件與屬性都將會保留 2、如果隱藏元素被傳入到對話方塊，會設定display:block屬性顯示該元素 3、對話方塊關閉的時候元素將恢復到原來在頁面的位置，style display屬性也將恢復 
3. */
4. art.dialog({  
5.     content: document.getElementById('demoCode_content_DOM'
   ),  
6.     id: 'EF893L'
7. });  

/*2. 傳入HTMLElement備註：1、元素不是複製而是完整移動到對話方塊中，所以原有的事件與屬性都將會保留 2、如果隱藏元素被傳入到對話方塊，會設定display:block屬性顯示該元素 3、對話方塊關閉的時候元素將恢復到原來在頁面的位置，style display屬性也將恢復*/art.dialog({    content: document.getElementById('demoCode_content_DOM'),    id: 'EF893L'});

 效果：把指定的div載入到這個彈框上

1. //標題 [title]
2. art.dialog({   
3.     title: 'hello world!'
4. });  

1. //標題 [title]
2. art.dialog({  
3.     title: 'hello world!'
4. });  

//標題 [title]art.dialog({    title: 'hello world!'});

  效果：

1. /*確定取消按鈕 [ok & cancel]  
2. 備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉*/
3. art.dialog({   
4.     content: '如果定義了回撥函式才會出現相應的按鈕',   
5.     ok: function () {   
6. this.title('3秒後自動關閉').time(3);   
7. returnfalse;   
8.     },   
9.     cancelVal: '關閉',   
10.     cancel: true//為true等價於function(){}
11. });  

1. /*確定取消按鈕 [ok & cancel] 
2. 備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉*/
3. art.dialog({  
4.     content: '如果定義了回撥函式才會出現相應的按鈕',  
5.     ok: function () {  
6.         this.title('3秒後自動關閉').time(3);  
7.         returnfalse;  
8.     },  
9.     cancelVal: '關閉',  
10.     cancel: true//為true等價於function(){}
11. });  

/*確定取消按鈕 [ok & cancel]備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉*/art.dialog({    content: '如果定義了回撥函式才會出現相應的按鈕',    ok: function () {     this.title('3秒後自動關閉').time(3);        return false;    },    cancelVal: '關閉',    cancel: true //為true等價於function(){}});

  效果：

1. /*自定義按鈕 [button]  
2. 備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉；button引數對應的擴充套件方法名稱也是"button"*/
3. art.dialog({   
4.     id: 'testID',   
5.     content: 'hello world!',   
6.     button: [   
7.         {   
8.             name: '同意',   
9.             callback: function () {   
10. this.content('你同意了').time(2);   
11. returnfalse;   
12.             },   
13.             focus: true
14.         },   
15.         {   
16.             name: '不同意',   
17.             callback: function () {   
18.                 alert('你不同意')   
19.             }   
20.         },   
21.         {   
22.             name: '無效按鈕',   
23.             disabled: true
24.         },   
25.         {   
26.             name: '關閉我'
27.         }   
28.     ]   
29. });  

1. /*自定義按鈕 [button] 
2. 備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉；button引數對應的擴充套件方法名稱也是"button"*/
3. art.dialog({  
4.     id: 'testID',  
5.     content: 'hello world!',  
6.     button: [  
7.         {  
8.             name: '同意',  
9.             callback: function () {  
10.                 this.content('你同意了').time(2);  
11.                 returnfalse;  
12.             },  
13.             focus: true
14.         },  
15.         {  
16.             name: '不同意',  
17.             callback: function () {  
18.                 alert('你不同意')  
19.             }  
20.         },  
21.         {  
22.             name: '無效按鈕',  
23.             disabled: true
24.         },  
25.         {  
26.             name: '關閉我'
27.         }  
28.     ]  
29. });  

/*自定義按鈕 [button]備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉；button引數對應的擴充套件方法名稱也是"button"*/art.dialog({    id: 'testID',    content: 'hello world!',    button: [        {            name: '同意',            callback: function () {                this.content('你同意了').time(2);                return false;            },            focus: true        },        {            name: '不同意',            callback: function () {                alert('你不同意')            }        },        {            name: '無效按鈕',            disabled: true        },        {            name: '關閉我'        }    ]});

    效果：  

1. //定時關閉的訊息 [time]
2. art.dialog({   
3.     time: 2,   
4.     content: '兩秒後關閉'
5. });  

1. //定時關閉的訊息 [time]
2. art.dialog({  
3.     time: 2,  
4.     content: '兩秒後關閉'
5. });  

//定時關閉的訊息 [time]art.dialog({    time: 2,    content: '兩秒後關閉'});

  效果：  

1. /*定義訊息圖示 [icon]  
2. 請檢視skin/icons目錄下的圖示*/
3. art.dialog({   
4.     icon: 'succeed',   
5.     content: '我可以定義訊息圖示哦'
6. });  

1. /*定義訊息圖示 [icon] 
2. 請檢視skin/icons目錄下的圖示*/
3. art.dialog({  
4.     icon: 'succeed',  
5.     content: '我可以定義訊息圖示哦'
6. });  

/*定義訊息圖示 [icon]請檢視skin/icons目錄下的圖示*/art.dialog({    icon: 'succeed',    content: '我可以定義訊息圖示哦'});

  效果：

1. //鎖屏 [lock & background & opacity]
2. art.dialog({   
3.     lock: true,   
4.     background: '#600', // 背景色
5.     opacity: 0.87,  // 透明度
6.     content: '中斷使用者在對話方塊以外的互動，展示重要操作與訊息',   
7.     icon: 'error',   
8.     ok: function () {   
9.         art.dialog({content: '再來一個鎖屏', lock: true});   
10. returnfalse;   
11.     },   
12.     cancel: true
13. });  

1. //鎖屏 [lock & background & opacity]
2. art.dialog({  
3.     lock: true,  
4.     background: '#600', // 背景色
5.     opacity: 0.87,  // 透明度
6.     content: '中斷使用者在對話方塊以外的互動，展示重要操作與訊息',  
7.     icon: 'error',  
8.     ok: function () {  
9.         art.dialog({content: '再來一個鎖屏', lock: true});  
10.         returnfalse;  
11.     },  
12.     cancel: true
13. });  

//鎖屏 [lock & background & opacity]art.dialog({    lock: true,    background: '#600', // 背景色    opacity: 0.87, // 透明度    content: '中斷使用者在對話方塊以外的互動，展示重要操作與訊息',    icon: 'error',    ok: function () {        art.dialog({content: '再來一個鎖屏', lock: true});        return false;    },    cancel: true});

  效果：這是個鎖屏的你可自定義背景顏色和圖示等等一些屬性

1. //自定義座標 [left & top]
2. art.dialog({   
3.     left: 100,   
4.     top: '60%',   
5.     content: '我改變座標了'
6. });  

1. //自定義座標 [left & top]
2. art.dialog({  
3.     left: 100,  
4.     top: '60%',  
5.     content: '我改變座標了'
6. });  

//自定義座標 [left & top]art.dialog({    left: 100,    top: '60%',    content: '我改變座標了'});

  效果：

1. //建立一個全屏對話方塊
2. art.dialog({   
3.     width: '100%',   
4.     height: '100%',   
5.     left: '0%',   
6.     top: '0%',   
7.     fixed: true,   
8.     resize: false,   
9.     drag: false
10. })  

1. //建立一個全屏對話方塊
2. art.dialog({  
3.     width: '100%',  
4.     height: '100%',  
5.     left: '0%',  
6.     top: '0%',  
7.     fixed: true,  
8.     resize: false,  
9.     drag: false
10. })  

//建立一個全屏對話方塊art.dialog({    width: '100%',    height: '100%',    left: '0%',    top: '0%',    fixed: true,    resize: false,    drag: false})

 效果：

1. //右下角滑動通知
2. artDialog.notice = function (options) {   
3. var opt = options || {},   
4.         api, aConfig, hide, wrap, top,   
5.         duration = 800;   
6. var config = {   
7.         id: 'Notice',   
8.         left: '100%',   
9.         top: '100%',   
10.         fixed: true,   
11.         drag: false,   
12.         resize: false,   
13.         follow: null,   
14.         lock: false,   
15.         init: function(here){   
16.             api = this;   
17.             aConfig = api.config;   
18.             wrap = api.DOM.wrap;   
19.             top = parseInt(wrap[0].style.top);   
20.             hide = top + wrap[0].offsetHeight;   
21.             wrap.css('top', hide + 'px')   
22.                 .animate({top: top + 'px'}, duration, function () {   
23.                     opt.init && opt.init.call(api, here);   
24.                 });   
25.         },   
26.         close: function(here){   
27.             wrap.animate({top: hide + 'px'}, duration, function () {   
28.                 opt.close && opt.close.call(this, here);   
29.                 aConfig.close = $.noop;   
30.                 api.close();   
31.             });   
32. returnfalse;   
33.         }   
34.     };     
35. for (var i in opt) {   
36. if (config[i] === undefined) config[i] = opt[i];   
37.     };   
38. return artDialog(config);   
39. };   
40. //呼叫示例：
41. art.dialog.notice({   
42.     title: '永珍網管',   
43.     width: 220,// 必須指定一個畫素寬度值或者百分比，否則瀏覽器視窗改變可能//導致artDialog收縮
44.     content: '尊敬的顧客朋友，您IQ卡餘額不足10元，請及時充值',   
45.     icon: 'face-sad',   
46.     time: 5   
47. });  

1. //右下角滑動通知
2. artDialog.notice = function (options) {  
3.     var opt = options || {},  
4.         api, aConfig, hide, wrap, top,  
5.         duration = 800;  
6.     var config = {  
7.         id: 'Notice',  
8.         left: '100%',  
9.         top: '100%',  
10.         fixed: true,  
11.         drag: false,  
12.         resize: false,  
13.         follow: null,  
14.         lock: false,  
15.         init: function(here){  
16.             api = this;  
17.             aConfig = api.config;  
18.             wrap = api.DOM.wrap;  
19.             top = parseInt(wrap[0].style.top);  
20.             hide = top + wrap[0].offsetHeight;  
21.             wrap.css('top', hide + 'px')  
22.                 .animate({top: top + 'px'}, duration, function () {  
23.                     opt.init && opt.init.call(api, here);  
24.                 });  
25.         },  
26.         close: function(here){  
27.             wrap.animate({top: hide + 'px'}, duration, function () {  
28.                 opt.close && opt.close.call(this, here);  
29.                 aConfig.close = $.noop;  
30.                 api.close();  
31.             });  
32.             returnfalse;  
33.         }  
34.     };    
35.     for (var i in opt) {  
36.         if (config[i] === undefined) config[i] = opt[i];  
37.     };  
38.     return artDialog(config);  
39. };  
40. //呼叫示例：
41. art.dialog.notice({  
42.     title: '永珍網管',  
43.     width: 220,// 必須指定一個畫素寬度值或者百分比，否則瀏覽器視窗改變可能//導致artDialog收縮
44.     content: '尊敬的顧客朋友，您IQ卡餘額不足10元，請及時充值',  
45.     icon: 'face-sad',  
46.     time: 5  
47. });  

//右下角滑動通知artDialog.notice = function (options) {    var opt = options || {},        api, aConfig, hide, wrap, top,        duration = 800;            var config = {        id: 'Notice',        left: '100%',        top: '100%',        fixed: true,        drag: false,        resize: false,        follow: null,        lock: false,        init: function(here){            api = this;            aConfig = api.config;            wrap = api.DOM.wrap;            top = parseInt(wrap[0].style.top);            hide = top + wrap[0].offsetHeight;                        wrap.css('top', hide + 'px')                .animate({top: top + 'px'}, duration, function () {                    opt.init && opt.init.call(api, here);                });        },        close: function(here){            wrap.animate({top: hide + 'px'}, duration, function () {                opt.close && opt.close.call(this, here);                aConfig.close = $.noop;                api.close();            });                        return false;        }    };         for (var i in opt) {        if (config[i] === undefined) config[i] = opt[i];    };        return artDialog(config);};//呼叫示例：art.dialog.notice({    title: '永珍網管',    width: 220,// 必須指定一個畫素寬度值或者百分比，否則瀏覽器視窗改變可能//導致artDialog收縮    content: '尊敬的顧客朋友，您IQ卡餘額不足10元，請及時充值',    icon: 'face-sad',    time: 5});

1. //跨域訪問
2. //跨域訪問無法自適應大小，也無法進行父頁面與子頁面資料交換
3. art.dialog.open('http://www.connect.renren.com/igadget/renren/index.html',   
4.     {title: '人人網', width: 320, height: 400});  

1. //跨域訪問
2. //跨域訪問無法自適應大小，也無法進行父頁面與子頁面資料交換
3. art.dialog.open('http://www.connect.renren.com/igadget/renren/index.html',  
4.     {title: '人人網', width: 320, height: 400});  

//跨域訪問//跨域訪問無法自適應大小，也無法進行父頁面與子頁面資料交換art.dialog.open('http://www.connect.renren.com/igadget/renren/index.html',    {title: '人人網', width: 320, height: 400});

1. //載入googleMAP
2. art.dialog.open('googleMaps.html');  

1. //載入googleMAP
2. art.dialog.open('googleMaps.html');  

//載入googleMAPart.dialog.open('googleMaps.html');

換面板只要換上下面圖片上的css檔名就可以

****************************************************************
用法
1.匯入

1. <scriptsrc="artDialog/artDialog.js?skin=default"></script>

<script src="artDialog/artDialog.js?skin=default"></script>

2.加上

1. (function (config) {   
2.     config['lock'] = true;   
3.     config['fixed'] = true;   
4.     config['okVal'] = 'Ok';   
5.     config['cancelVal'] = 'Cancel';   
6. // [more..]
7. })(art.dialog.defaults);//這個是用哪個主題有很多主題的你把名字打上就行啦

1. (function (config) {  
2.     config['lock'] = true;  
3.     config['fixed'] = true;  
4.     config['okVal'] = 'Ok';  
5.     config['cancelVal'] = 'Cancel';  
6.     // [more..]
7. })(art.dialog.defaults);//這個是用哪個主題有很多主題的你把名字打上就行啦

(function (config) {    config['lock'] = true;    config['fixed'] = true;    config['okVal'] = 'Ok';    config['cancelVal'] = 'Cancel';    // [more..]})(art.dialog.defaults);//這個是用哪個主題有很多主題的你把名字打上就行啦

googleMap的程式碼

1. <!doctype html>   
2. <html>   
3.     <head>   
4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />   
5.     <style>   
6. html { height: 100% }   
7. body { height: 100%; margin: 0; padding: 0; background-color: #FFF }  
8. #map_canvas { height: 100% }
9. </style>   
10.     <script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh_CN"></script>   
11.     <script>    
12. var map, geocoder;   
13. function initialize() {   
14. var latlng = new google.maps.LatLng(39.904214, 116.407413);   
15. var options = {   
16.                 zoom: 11,   
17.                 center: latlng,   
18.                 disableDefaultUI: true,   
19.                 panControl: true,   
20.                 zoomControl: true,   
21.                 mapTypeControl: true,   
22.                 scaleControl: true,   
23.                 streetViewControl: false,   
24.                 overviewMapControl: true,   
25.                 mapTypeId: google.maps.MapTypeId.ROADMAP   
26.             };   
27.             map = new google.maps.Map(document.getElementById("map_canvas"), options);   
28.             geocoder = new google.maps.Geocoder();   
29.             geocoder.geocode({latLng: latlng}, function(results, status) {   
30. if (status == google.maps.GeocoderStatus.OK) {   
31. if (results[3]) {   
32.                         document.getElementById("map_address").value = results[3].formatted_address;   
33.                     }   
34.                 }   
35.             });   
36. var dialog = art.dialog.open.api;   
37.             dialog.title('google mpas')   
38.