jQuery.artDialog用法(彈窗)
artDialog是一個基於javascript編寫的對話方塊元件,它擁有精緻的介面與友好的介面
l 自適應內容
artDialog的特殊UI框架能夠適應內容變化,甚至連外部程式動態插入的內容它仍然能自適應,因此你不必去考慮訊息內容尺寸使用它。它的訊息容器甚至能夠根據寬度讓文字居中或居左對齊——這一切全是XHTML+CSS原生實現。
l 完善的介面
它的介面完善,可以輕易與外部程式配合使用。如非同步寫入訊息、控制位置、尺寸、顯示與隱藏、關閉等。
l 細緻的體驗
如果不是在輸入狀態,它支援Esc快捷鍵關閉;可指定在元素附近彈出,讓操作更便捷;智慧給按鈕新增焦點;黃金比例垂直居中;超大響應區域特別為ipad等觸屏裝置優化;預先快取面板圖片更快響應……
l 跨平臺相容
相容:IE6+、Firefox、Chrome、Safari、Opera以及iPad等移動裝置。並且IE6下也能支援現代瀏覽器的靜止定位(fixed)、、alpha通道png背景。
下載地址:
快速入門
一、使用傳統的引數
art.dialog(content, ok, cancel)
示例:
art.dialog('簡單愉悅的介面,強大的表現力,優雅的內部實現', function(){alert('yes');});
art.dialog(“簡單愉悅的介面,強大的表現力,優雅的內部實現”);
二、使用字面量傳參
art.dialog(options)
示例
var dialog = art.dialog({
title: '歡迎',
content: '歡迎使用artDialog對話方塊元件!',
icon: 'succeed',
follow: document.getElementById('btn2'),
ok: function(){
this.title('警告').content('請注意artDialog兩秒後將關閉!').lock().time(2);
return false;
}
});
三、擴充套件方法
需要對彈出後的對話方塊操作?artDialog簡單實用的擴充套件方法可以使這一切變得簡單。
如在ajax非同步操作中,我們可以先定義一個變數引用對話方塊返回的擴充套件方法:
var myDialog = art.dialog();// 初始化一個帶有loading圖示的空對話方塊
jQuery.ajax({
url: 'http://web5.qq.com/content?id=1',
success: function (data) {
myDialog.content(data);// 填充對話方塊內容
}
});
如果需要使用程式控制關閉,可以使用"close"方法關閉對話方塊:
myDialog.close();
外掛:框架應用工具
artDialog針對CMS類的框架應用提供了專屬外掛,如穿越框架、iframe、AJAX、跨框架傳值操作等。
例: 使用open方法嵌入頁面,並使用data方法在各個iframe間傳遞資料:
var val = document.getElementById('demoInput04-3').value;
art.dialog.data('test', val);
art.dialog.data('homeDemoPath', './_doc/');
// 此時iframeA.html 頁面可以使用art.dialog.data('test') 獲取到資料,如:
// document.getElementById('aInput').value = art.dialog.data('test');
art.dialog.open('./_doc/iframeA.html');
jQuery + artDialog
artDialog提供了一個jQuery版本,功能與標準版一致,呼叫只需要把art字首改成jQuery的名稱空間。
// 普通呼叫
$.dialog({content:'hello world!'});
// 使用選擇器方式,此時自動使用綁定了live click事件,同時啟用follow模式
$('#main .test').dialog({content: 'hello world'});
(最低相容jquery1.3.2,但框架應用外掛需要jquery1.4+執行[?])
配置引數
名稱 | 型別 | 預設值 | 描述 |
---|---|---|---|
內容 | |||
title | String | '訊息' | 標題內容 |
String | 'loading..' | 訊息內容。 1、如果傳入的是HTMLElement型別,如果是隱藏元素會給其設定display:block以顯示該元素,其他屬性與繫結的事件都會完整保留,對話方塊關閉後此元素又將恢復原來的display屬性,並且重新插入原文件所在位置 2、如果沒有設定content的值則會有loading的動畫 |
|
HTMLElement | |||
按鈕 | |||
ok | Function | null | 確定按鈕回撥函式。 函式如果返回false將阻止對話方塊關閉;函式this指標指向內部api;如果傳入true表示只顯示有關閉功能的按鈕 |
Boolean | |||
Function | null | 取消按鈕回撥函式。 函式如果返回false將阻止對話方塊關閉;函式this指標指向內部api;如果傳入true表示只顯示有關閉功能的按鈕 對話方塊標題欄的關閉按鈕其實就是取消按鈕,只不過視覺不同罷了,點選同樣觸發cancel事件 |
|
Boolean | |||
okVal | String | '確定' | "確定按鈕"文字 |
String | '取消' | "取消按鈕"文字 | |
Array | null | 自定義按鈕。 配置引數成員: name —— 按鈕名稱 callback —— 按下後執行的函式 focus —— 是否聚焦點 disabled —— 是否標記按鈕為不可用狀態(後續可使用擴充套件方法讓其恢復可用狀態) 示例: 引數如:[{name: '登入', callback: function () {}}, {name: '取消'}] 。注意點選按鈕預設會觸發按鈕關閉動作,需要阻止觸發關閉請讓回撥函式返回false |
|
尺寸 | |||
width | Number | 'auto' | 設定訊息內容寬度,可以帶單位。一般不需要設定此,對話方塊框架會自己適應內容。 如果設定為百分值單位,將會以根據瀏覽器可視範圍作為基準,此時如果瀏覽器視窗大小被改變其也會進行相應的調整 |
String | |||
Number | 'auto' | 設定訊息內容高度,可以帶單位。不建議設定此,而應該讓內容自己撐開高度。 如果設定為百分值單位,將會以根據瀏覽器可視範圍作為基準,此時如果瀏覽器視窗大小被改變其也會進行相應的調整 |
|
String | |||
位置 | |||
fixed | Boolean | false | 開啟靜止定位。靜止定位是css2.1的一個屬性,它靜止在瀏覽器某個地方不動,也不受滾動條拖動影響。(artDialog支援IE6 fixed) |
HTMLElement | null | 讓對話方塊依附在指定元素附近。 可傳入元素ID名稱,注意ID名稱需要以“#”號作為字首 |
|
String | |||
left | Number | '50%' | 相對於可視區域的X軸的座標。 可以使用'0%' ~ '100%'作為相對座標,如果瀏覽器視窗大小被改變其也會進行相應的調整 |
String | |||
top | Number | '38.2%' | 相對於可視區域的Y軸的座標。 可以使用'0%' ~ '100%'作為相對座標,如果瀏覽器視窗大小被改變其也會進行相應的調整 |
String | |||
視覺 | |||
lock | Boolean | false | 開啟鎖屏。 中斷使用者對話方塊之外的互動,用於顯示非常重要的操作/訊息,所以不建議頻繁使用它,它會讓操作變得繁瑣 |
String | '#000' | 鎖屏遮罩顏色 | |
Number | 0.7 | 鎖屏遮罩透明度 | |
icon | String | null | 定義訊息圖示。可定義“skins/icons/”目錄下的圖示名作為引數名(不包含字尾名) |
String | '20px 25px' | 內容與邊界填充邊距(即css padding) | |
互動 | |||
time | Number | null | 設定對話方塊顯示時間。以秒為單位 |
Boolean | true | 是否允許使用者調節尺寸 | |
drag | Boolean | true | 是否允許使用者拖動位置 |
esc | Boolean | true | 是否允許使用者按Esc鍵關閉對話方塊 |
高階 | |||
id | String | null | 設定對話方塊唯一標識。用途: 1、防止重複彈出 2、定義id後可以使用art.dialog.list[youID]獲取擴充套件方法 |
Number | |||
Number | 1987 | 重置全域性zIndex初始值。 用來改變對話方塊疊加高度。比如有時候配合外部浮動層UI元件,但是它們可能預設zIndex沒有artDialog高,導致無法浮動到artDialog之上,這個時候你就可以給對話方塊指定一個較小的zIndex值。 請注意這是一個會影響到全域性的配置,後續出現的對話方塊疊加高度將重新按此累加。 |
|
init | Function | null | 對話方塊彈出後執行的函式 |
close | Function | null | 對話方塊關閉前執行的函式。函式如果返回false將阻止對話方塊關閉。 請注意這不是關閉按鈕的回撥函式,無論何種方式關閉對話方塊,close都將執行。 |
show | Boolean | true | 是否顯示對話方塊 |
擴充套件方法
名稱 | 描述 |
---|---|
close() | 關閉對話方塊 |
show() | 顯示對話方塊 |
hide() | 隱藏對話方塊 |
title(value) | 寫入標題。無引數則返回標題容器元素 |
content(value) | 向訊息容器中寫入內容。引數支援字串、DOM物件,無引數則返回內容容器元素 |
button(arguments) | 插入一個自定義按鈕。 配置引數成員: name —— 按鈕名稱 callback —— 按下後執行的函式 focus —— 是否聚焦點 disabled —— 是否標記按鈕為不可用狀態(後續可使用擴充套件方法讓其恢復可用狀態) 示例: button({ name: '登入', focus: true, callback: function () {} }, { name: '取消' }) |
follow(element) | 讓對話方塊吸附到指定元素附近 |
position(left, top) | 重新定位對話方塊 |
size(width, height) | 重新設定對話方塊大小 |
lock() | 鎖屏 |
unlock() | 解鎖 |
time(val) | 定時關閉(單位秒) |
配置引數演示
內容[content]
1. 傳入字串
art.dialog({
content: '我支援HTML'
});
2. 傳入HTMLElement
備註:1、元素不是複製而是完整移動到對話方塊中,所以原有的事件與屬性都將會保留2、如果隱藏元素被傳入到對話方塊,會設定display:block屬性顯示該元素3、對話方塊關閉的時候元素將恢復到原來在頁面的位置,style display屬性也將恢復
art.dialog({
content: document.getElementById('demoCode_content_DOM'),
id: 'EF893L'
});
標題[title]
art.dialog({
title: 'hello world!'
});
確定取消按鈕[ok & cancel]
備註:回撥函式this指向擴充套件介面,如果返回false將阻止對話方塊關閉
art.dialog({
content: '如果定義了回撥函式才會出現相應的按鈕',
ok: function() {
this.title('3秒後自動關閉').time(3);
returnfalse;
},
cancelVal: '關閉',
cancel: true//為true等價於function(){}
});
自定義按鈕[button]
備註:回撥函式this指向擴充套件介面,如果返回false將阻止對話方塊關閉;button引數對應的擴充套件方法名稱也是"button"
art.dialog({
id: 'testID',
content: 'hello world!',
button: [
{
name: '同意',
callback: function() {
this.content('你同意了').time(2);
returnfalse;
},
focus: true
},
{
name: '不同意',
callback: function() {
alert('你不同意')
}
},
{
name: '無效按鈕',
disabled: true
},
{
name: '關閉我'
}
]
});
定時關閉的訊息[time]
art.dialog({
time: 2,
content: '兩秒後關閉'
});
防止重複彈出[id]
art.dialog({
id: 'testID2',
content: '再次點選執行看看'
});
art.dialog({id: 'testID2'}).title('3秒後關閉').time(3);
定義訊息圖示[icon]
請檢視skin/icons目錄下的圖示
art.dialog({
icon: 'succeed',
content: '我可以定義訊息圖示哦'
});
內容與邊界填充邊距[padding]
有時候並不需要預設的內容填充邊距,如展示圖片與視訊
art.dialog({
padding: 0,
title: '照片',
content: '<img src="./images/photo.jpg" _cke_saved_src="./images/photo.jpg" width="379" height="500" />',
lock: true
});
鎖屏[lock & background & opacity]
art.dialog({
lock: true,
background: '#600', // 背景色
opacity: 0.87, // 透明度
content: '中斷使用者在對話方塊以外的互動,展示重要操作與訊息',
icon: 'error',
ok: function() {
art.dialog({content: '再來一個鎖屏', lock: true});
returnfalse;
},
cancel: true
});
跟隨元素[follw]
1、標準形式
art.dialog({
follow: document.getElementById('followTestBtn'),
content: '讓對話方塊跟著某個元素,一個元素同時只能出現一個對話方塊'
});
2、使用簡寫形式 (已經繫結onclick事件,注意此返回值不再是對話方塊擴充套件方法)
art('#demoCode_follow_a').dialog({
content: '讓對話方塊跟著某個元素,一個元素同時只能出現一個對話方塊'
});
自定義座標[left & top]
art.dialog({
left: 100,
top: '60%',
content: '我改變座標了'
});
建立一個右下角浮動的訊息視窗
art.dialog({
id: 'msg',
title: '公告',
content: 'hello world!',
width: 320,
height: 240,
left: '100%',
top: '100%',
fixed: true,
drag: false,
resize: false
})
設定大小[width & height]
art.dialog({
width: '20em',
height: 55,
content: '尺寸可以帶單位'
});
建立一個全屏對話方塊
art.dialog({
width: '100%',
height: '100%',
left: '0%',
top: '0%',
fixed: true,
resize: false,
drag: false
})
靜止定位[fixed]
art.dialog({
fixed: true,
content: '請拖動滾動條檢視'
});
不許拖拽[drag & resize]
art.dialog({
drag: false,
resize: false,
content: '禁止拖拽'
});
擴充套件方法演示
特別說明:擴充套件方法支援鏈式操作
獲取擴充套件方法一:直接引用返回
var dialog = art.dialog({
title: '我是對話方塊',
content: '我是初始化的內容'
});
dialog.content('對話方塊內容被擴充套件方法改變了').title('提示');
獲取擴充套件方法二:通過對話方塊ID
art.dialog({
id: 'KDf435',
title: '警告',
content: '我是初始化的內容'
});
art.dialog.list['KDf435'].content('對話方塊內容被擴充套件方法改變了');
獲取擴充套件方法三:回撥函式中this
art.dialog({
title: '警告',
content: '我是初始化的內容',
ok: function () {
this.content('你點了確定按鈕').lock();
return false;
},
init: function () {
this.content('對話方塊內容被擴充套件方法改變了');
}
});
關閉頁面所有對話方塊
var list = art.dialog.list;
for (var i in list) {
list[i].close();
};
按鈕介面演示
備註:回撥函式如果返回false將阻止對話方塊關閉
var dialog = art.dialog({
title: '警告',
content: '點選管理按鈕將讓刪除按鈕可用',
width: '20em',
button: [{
name: '管理',
callback: function () {
this
.content('我更改了刪除按鈕')
.button({
name: '刪除',
disabled: false
})
.lock();
return false;
},
focus: true
}]
});
dialog.button(
{
name: '刪除',
callback: function () {
alert('delect')
},
disabled: true
}
)
標題倒計時
var timer;
art.dialog({
content: '時間越來越少,越來越少..',
init: function () {
var that = this, i = 5;
var fn = function () {
that.title(i + '秒後關閉');
!i && that.close();
i --;
};
timer = setInterval(fn, 1000);
fn();
},
close: function () {
clearInterval(timer);
}
}).show();
關閉不刪除內容
art.dialog({
id: 'show-hide',
content: '關閉後阻止對話方塊被刪除,只隱藏對話方塊',
close: function () {
this.hide();
return false;
}
}).show();
AJAX高階應用:執行HTML片段中特殊script標籤
HTML片段中的<script type="text/dialog"></script>標籤包裹的javascript將會在artDialog內部執行,其this指向對話方塊擴充套件方法,這樣可以進一步實現訊息內容模組化。
(本例子使用了AJAX,需要在伺服器上執行。可開啟 ./ajaxContent/login.html 檢視原始碼中的自定義指令碼)
var dialog = art.dialog({id: 'N3690',title: false});
// jQuery ajax
$.ajax({
url: './ajaxContent/login.html',
success: function (data) {
dialog.content(data);
},
cache: false
});
應用到你的專案
在頁面head引入artDialog,其中skin引數表示對話方塊使用的風格檔案(如果專案採用jQuery作為框架,則引用jQuery artDialog版本)。
<script src="artDialog/artDialog.js?skin=default" _cke_saved_src="artDialog/artDialog.js?skin=default"></script>
如果需要在iframe應用下提供 更好的支援 ,可載入外掛:
<script src="artDialog/plugins/iframeTools.js" _cke_saved_src="artDialog/plugins/iframeTools.js"></script>
配置全域性預設引數(可選):
(function (config) {
config['lock'] = true;
config['fixed'] = true;
config['okVal'] = 'Ok';
config['cancelVal'] = 'Cancel';
// [more..]
})(art.dialog.defaults);