artDialog教程01
artDialog是一個基於JavaScript編寫的對話方塊元件,它擁有精緻的介面與友好的介面,請看下面artDialog 對話方塊外掛基本使用教程講解:
快速入門
在頁面head引入artDialog,注意如果檔案帶有skin引數將會無阻塞的方式自動載入對應的皮膚css檔案,當然你仍然可以使用傳統方式引用“skins/”目錄下的css檔案,二者選其一。 <script src="artDialog.js?skin=default"></script>如果專案採用JQuery作為框架,則引用jQuery artDialog版本: <script src="jquery.artDialog.js?skin=default"></script>如果需要在iframe應用下提供 更好的支援,需要加上: <script src="artDialog.iframeTools.js"></script>一、使用傳統的引數
art.dialog(content, ok, cancel)
art.dialog('簡單愉悅的介面,強大的表現力,優雅的內部實現', function(){alert('yes');});
二、使用字面量傳參
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');
配置引數
名稱 | 型別 | 預設值 | 描述 |
---|---|---|---|
內容 | |||
title | String | '訊息' | 標題內容 |
content | String | 'loading..' | 訊息內容。 1、如果傳入的是HTMLElement型別,如果是隱藏元素會給其設定display:block以顯示該元素,其他屬性與繫結的事件都會完整保留,對話方塊關閉後此元素又將恢復原來的display屬性,並且重新插入原文件所在位置 2、如果沒有設定content的值則會有loading的動畫 |
HTMLElement | |||
按鈕 | |||
ok | Function | null | 確定按鈕回撥函式。 函式如果返回false將阻止對話方塊關閉;函式this指標指向內部api;如果傳入true表示只顯示有關閉功能的按鈕 |
Boolean | |||
cancel | Function | null | 取消按鈕回撥函式。 函式如果返回false將阻止對話方塊關閉;函式this指標指向內部api;如果傳入true表示只顯示有關閉功能的按鈕 對話方塊標題欄的關閉按鈕其實就是取消按鈕,只不過視覺不同罷了,點選同樣觸發cancel事件 |
Boolean | |||
okVal | String | '確定' | "確定按鈕"文字 |
cancelVal | String | '取消' | "取消按鈕"文字 |
button | Array | null | 自定義按鈕。 配置引數成員: name —— 按鈕名稱 callback —— 按下後執行的函式 focus —— 是否聚焦點 disabled —— 是否標記按鈕為不可用狀態(後續可使用擴充套件方法讓其恢復可用狀態) 示例: 引數如:[{name: '登入', callback: function () {}}, {name: '取消'}] 。注意點選按鈕預設會觸發按鈕關閉動作,需要阻止觸發關閉請讓回撥函式返回false |
尺寸 | |||
width | Number | 'auto' | 設定訊息內容寬度,可以帶單位。一般不需要設定此,對話方塊框架會自己適應內容。 如果設定為百分值單位,將會以根據瀏覽器可視範圍作為基準,此時如果瀏覽器視窗大小被改變其也會進行相應的調整 |
String | |||
height | Number | 'auto' | 設定訊息內容高度,可以帶單位。不建議設定此,而應該讓內容自己撐開高度。 如果設定為百分值單位,將會以根據瀏覽器可視範圍作為基準,此時如果瀏覽器視窗大小被改變其也會進行相應的調整 |
String | |||
位置 | |||
fixed | Boolean | false | 開啟靜止定位。靜止定位是css2.1的一個屬性,它靜止在瀏覽器某個地方不動,也不受滾動條拖動影響。(artDialog支援IE6 fixed) |
follow | HTMLElement | null | 讓對話方塊依附在指定元素附近。 可傳入元素ID名稱,注意ID名稱需要以“#”號作為字首 |
String | |||
left | Number | '50%' | 相對於可視區域的X軸的座標。 可以使用'0%' ~ '100%'作為相對座標,如果瀏覽器視窗大小被改變其也會進行相應的調整 |
String | |||
top | Number | '38.2%' | 相對於可視區域的Y軸的座標。 可以使用'0%' ~ '100%'作為相對座標,如果瀏覽器視窗大小被改變其也會進行相應的調整 |
String | |||
視覺 | |||
lock | Boolean | false | 開啟鎖屏。 中斷使用者對話方塊之外的互動,用於顯示非常重要的操作/訊息,所以不建議頻繁使用它,它會讓操作變得繁瑣 |
background | String | '#000' | 鎖屏遮罩顏色 |
opacity | Number | 0.7 | 鎖屏遮罩透明度 |
icon | String | null | 定義訊息圖示。可定義“skins/icons/”目錄下的圖示名作為引數名(不包含字尾名) |
padding | String | '20px 25px' | 內容與邊界填充邊距(即css padding) |
互動 | |||
time | Number | null | 設定對話方塊顯示時間。以秒為單位 |
resize | Boolean | true | 是否允許使用者調節尺寸 |
drag | Boolean | true | 是否允許使用者拖動位置 |
esc | Boolean | true | 是否允許使用者按Esc鍵關閉對話方塊 |
高階 | |||
id | String | null | 設定對話方塊唯一標識。用途: 1、防止重複彈出 2、定義id後可以使用art.dialog.list[youID]獲取擴充套件方法 |
Number | |||
zIndex | 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) | 定時關閉(單位秒) |
文章轉載自http://www.121ask.com/thread-5614-1-1.html
相關文章
- artDialog外掛應用
- 推薦一款不錯的dialog小工具:artDialog
- asp.net表單驗證和彈出框artDialog使用分享(資源整合)ASP.NET
- 01JavaScript基礎教程JavaScript
- L01 Laravel 教程 隨筆Laravel
- ZeroMQ 教程 001 : 基本概覽MQ
- PHP基礎教程-01 PHP概述PHP
- BCSphere入門教程01:Immediate Alert
- Exchange 2013 管理 視訊教程
- Nodejs教程01:Nodejs簡介NodeJS
- 《簡明 PHP 教程》01 關於 PHPPHP
- Gstreamer基礎教程01 - Hello World
- Selenium系列教程-01環境配置
- Python 201:多程式教程Python
- Python基礎教程01 Hello World!Python
- Python進階教程01 詞典Python
- Express教程01:建立伺服器、配置路由Express伺服器路由
- 微信小程式教程01:小程式簡介微信小程式
- tssd2018安裝教程
- VS2017逐步配置OpenCV教程OpenCV
- onlyoffice教程0x01-安裝
- L01 Laravel 教程學習筆記Laravel筆記
- Libevent教程001: 簡介與配置
- python極簡教程01:基礎變數Python變數
- 《MySQL 入門教程》第 01 篇 MySQL 簡介MySql
- chrome 開發者工具使用教程-01-element皮膚Chrome
- ES系列教程01:Elasticsearch學習環境搭建Elasticsearch
- Solidity 簡易教程0x001Solid
- MAC OSX Docker安裝教程2018MacDocker
- Python Flask Web教程001:Flask簡介PythonFlaskWeb
- Matlab 2018a 官方教程[二]Matlab
- PHP基礎教程-06 課後作業01PHP
- Python 快速教程(基礎篇01):Hello WorldPython
- Python 快速教程(進階篇01): 詞典Python
- Python 快速教程(Django01):初試天涯PythonDjango
- Python教程學習:初識Python-01Python
- c++語言教程——01 c++的簡介C++
- 01-Tkinter教程-視窗的管理與設定