artDialogチュートリアル01
artDialogはJavaScriptに基づいて作成されたダイアログ・ボックス・コンポーネントで、洗練されたインタフェースと友好的なインタフェースを備えています.次のartDialogダイアログ・ボックス・プラグインの基本的な使用チュートリアルを参照してください.
art.dialog(content, ok, cancel)
art.dialog(options)
ポップアップ後のダイアログボックスの操作は必要ですか?artDialogの簡単で実用的な拡張方法は、これらを簡単にすることができます.
ajax非同期操作では、まず変数参照ダイアログボックスで返される拡張方法を定義できます.
プログラム制御を使用して閉じる必要がある場合は、「close」メソッドを使用してダイアログボックスを閉じることができます.
artDialogは、CMSクラスのフレームワークアプリケーションに専用のプラグインを提供しています.例えば、フレームワークを通り抜ける、iframe、AJAX、フレーム間で値を伝える操作などです.
例:openメソッドを使用してページを埋め込み、dataメソッドを使用して各iframe間でデータを転送します.
名前
を選択します.
デフォルト
説明
内容
title
String
「ニュース」
タイトルの内容
content
String
'loading..'
メッセージの内容.1、HTML Elementタイプが入力された場合、非表示要素であれば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
'OK'
「OK」ボタンのテキスト
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
静止位置をオンにします.静止位置決めはcss 2である.1のプロパティです.ブラウザのどこかで静止し、スクロールバーのドラッグの影響も受けません.(artDialogはIE 6 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
ダイアログボックスの一意のIDを設定します.用途: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の有無、ボタンが使用不可とマークされているか(拡張メソッドを使用して使用可能な状態に戻すことができる)の例:
ダイアログボックスを指定した要素の近くに吸着させる
position(left, top)
ダイアログの再配置
size(width, height)
ダイアログのサイズを変更
lock()
ロックスクリーン
unlock()
ロック解除
time(val)
タイミングオフ(秒単位)
記事の転載先http://www.121ask.com/thread-5614-1-1.html
クイックスタート
ページheadにartDialogを導入し、skinパラメータが付いている場合、対応する皮膚cssファイルを自動的にロードすることに注意してください.もちろん、従来の方法で「ldquo」を参照することができます.skins/”ディレクトリの下にあるcssファイルのどちらかを選択します.一、従来のパラメータを使用する
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、HTML Elementタイプが入力された場合、非表示要素であれば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
'OK'
「OK」ボタンのテキスト
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
静止位置をオンにします.静止位置決めはcss 2である.1のプロパティです.ブラウザのどこかで静止し、スクロールバーのドラッグの影響も受けません.(artDialogはIE 6 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
ダイアログボックスの一意のIDを設定します.用途: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: ' '
})ダイアログボックスを指定した要素の近くに吸着させる
position(left, top)
ダイアログの再配置
size(width, height)
ダイアログのサイズを変更
lock()
ロックスクリーン
unlock()
ロック解除
time(val)
タイミングオフ(秒単位)
記事の転載先http://www.121ask.com/thread-5614-1-1.html