ポップアップウィンドウlhgDialog APIドキュメント
33306 ワード
あなたのプロジェクトに適用
独立バージョンのlhgDialogウィンドウコンポーネントを使用する場合は、ページheadにlhgcoreを導入するだけです.lhgdialog.min.jsファイル、4.1.1+バージョンは修正してjQueryaライブラリと同時に参照することができて、しかも4.1.1+バージョンの独立したコンポーネントのlhgcoreライブラリは極めて大きい修正をして、コンポーネントのためにカスタマイズして、圧縮した後にやっと6 Kとコンポーネントが合わせて総サイズが20 K未満で、効率の上でとても大きく向上して、jQueryを引用するよりずっと速くて、しかし、ここではjQueryライブラリを同時に参照している場合は$をJに変換しなければなりません.jQueryライブラリを参照していない場合は$を直接使用することができます.
ページにjQueryライブラリファイルが導入されている場合は、ページheadにlhgdialogを再導入するだけです.min.jsファイルでよい、このときlhgDialogコンポーネントはjQueryのプラグインとして使用され、lhgdialogに注意する.min.jsはjQueryライブラリファイルの下に書きますよ.
コンポーネントには、グローバルデフォルト構成パラメータの読み取り/書き込みインタフェースがあります.コンポーネントのグローバルデフォルト構成を変更する場合は、以下の方法で設定できます(オプション).
クイックスタート
字面量を用いて$を伝達する.dialog(options)
ウィンドウlhgdialog.min.jsファイルのurlパラメータ
パラメータ形式: self:ポップアップウィンドウを指定するページ skin:多皮膚共有CSSファイル名 urlパラメータは設定する必要がなく書くことができ、書かない場合はデフォルト値を使用します.
初期化パラメータリスト
コンテンツ関連 title:ウィンドウのタイトルテキスト content:ウィンドウにロードされたコンテンツ ボタン関連 ok:決定ボタンコールバック関数 cancel:キャンセルボタンコールバック関数 okVal:確定ボタン文字 cancelVal:キャンセルボタン文字 min:最小化ボタン を表示するかどうか max:最大化ボタン を表示するかどうか button:カスタムボタン 寸法関連 width:指定ウィンドウの幅 height:指定ウィンドウの高さ 位置関連 fixed:静止位置決め を開く left:可視領域のX軸に対する座標 top:可視領域のY軸に対する座標 ビジュアル関連 lock:ロックスクリーン を開く icon:定義メッセージアイコン padding:コンテンツと境界充填マージン(すなわちcss padding) skin:マルチスキン共存時に指定するスキンスタイル 相互関係 focus:ウィンドウをポップアップした後に自動的に焦点を獲得するかどうか(4.2.0新規) time:設定ダイアログ表示時間 resize: サイズの調整をユーザーに許可するかどうか drag:ユーザーが位置 をドラッグできるかどうか esc:Escキーを押してダイアログ を閉じることができるかどうか cache:iframe方式でロードされたウィンドウコンテンツページ をキャッシュするかどうか extendDrag:拡張ドラッグ体験 を開くかどうか
高度な関連 data:データ転送入力パラメータ(4.2.0新規) id:設定ダイアログ一意識別子 zIndex:グローバルzIndex初期値 をリセット init:ダイアログボックスのポップアップ後に実行される関数 close:ダイアログが閉じる前に実行する関数 parent:サブウィンドウを開く親ウィンドウオブジェクト 拡張メソッド
ウィンドウインスタンスオブジェクトの内部メソッド close():ダイアログ を閉じます. reload(win,url):指定されたページ をリフレッシュまたはジャンプします. show():ダイアログ が表示されます. hide():非表示ダイアログ title(value):タイトル に書き込む content(value,add,isFrm):ウィンドウにコンテンツ を書き込む button(arguments):カスタムボタン を挿入 position(left,top):ダイアログ を再配置 size(width,height):ダイアログボックスのサイズを再設定 max():最大化ウィンドウ min():最小化ウィンドウ lock():ロックスクリーン unlock():ロック解除 time(val,callback):タイミングオフ(単位秒) focus():自動設定ウィンドウのフォーカス要素 zindex():トップウィンドウ get(id,object):指定idに基づいて対応するオブジェクト を取得する. api:コンテンツページでウィンドウインスタンスオブジェクトインタフェース を呼び出す. opener:ウィンドウコンポーネントページをロードするwindowオブジェクト iframe:iframe方式でコンテンツをロードするiframeオブジェクト content:iframe方式でコンテンツページをロードするwindowオブジェクト ウィンドウの外部メソッド $.dialog.focus:フォーカスを取得するウィンドウインスタンスオブジェクト $.dialog.List:すべてのウィンドウオブジェクトインスタンスのセット 拡張されたヒントウィンドウ $.dialog.alert(content,callback,parent):警告メッセージ $.dialog.confirm(content,yes,no,parent):確認 $.dialog.prompt(content,yes,value,parent):質問 $.dialog.tips(content,time,icon,callback):短いヒント
独立バージョンのlhgDialogウィンドウコンポーネントを使用する場合は、ページheadにlhgcoreを導入するだけです.lhgdialog.min.jsファイル、4.1.1+バージョンは修正してjQueryaライブラリと同時に参照することができて、しかも4.1.1+バージョンの独立したコンポーネントのlhgcoreライブラリは極めて大きい修正をして、コンポーネントのためにカスタマイズして、圧縮した後にやっと6 Kとコンポーネントが合わせて総サイズが20 K未満で、効率の上でとても大きく向上して、jQueryを引用するよりずっと速くて、しかし、ここではjQueryライブラリを同時に参照している場合は$をJに変換しなければなりません.jQueryライブラリを参照していない場合は$を直接使用することができます.
<script type="text/javascript" src="lhgcore.lhgdialog.min.js"></script>ページにjQueryライブラリファイルが導入されている場合は、ページheadにlhgdialogを再導入するだけです.min.jsファイルでよい、このときlhgDialogコンポーネントはjQueryのプラグインとして使用され、lhgdialogに注意する.min.jsはjQueryライブラリファイルの下に書きますよ.
<script type="text/javascript" src="jQuery-1.7.1.min.js"></script>
<script type="text/javascript" src="lhgdialog.min.js"></script>コンポーネントには、グローバルデフォルト構成パラメータの読み取り/書き込みインタフェースがあります.コンポーネントのグローバルデフォルト構成を変更する場合は、以下の方法で設定できます(オプション).
(function(config){
config['extendDrag'] = true; // ， ，
config['lock'] = true;
config['fixed'] = true;
config['okVal'] = 'Ok';
config['cancelVal'] = 'Cancel';
// [more..]
})($.dialog.setting);
// ：
$.dialog.setting.extendDrag = true;
// ( lhgDialog )：
var path = $.dialog.setting.path;クイックスタート
4.2.0+ 字面量を用いて$を伝達する.dialog(options)
var dialog = $.dialog({title: ' ',content: ' lhgdialog ！',icon: 'succeed',ok: function(){
this.title(' ').content(' lhgdialog ！').lock().time(2);
return false;
}
});ウィンドウlhgdialog.min.jsファイルのurlパラメータ
パラメータ形式:
：String
：'false'
： ， false ， true ， 。 ：String
：'default'
： default。 ， CSS 初期化パラメータリスト
コンテンツ関連
：String|Boolean
：' '
： ， false ：String
：'loading...'
：1. ， 'url:' ， ：content:'url:content.html'
2. content loading ：Function|Boolean
：null
： false ； this api； true ：Function|Boolean
：null
：1. false ； this api；
2. true ， ， cancel
3. false ：String
： ：String
： ：Boolean
：true ：Boolean
：true ：Array
：null
：
：
name ——
callback ——
focus ——
disabled —— （ ）
：
：[{name: ' ', callback: function () {}}, {name: ' '}] 。 ， false ：Number|String
：'auto'
： ， 。 ， ：Number|String
：'auto'
： ， 。 ：Boolean
：false
： css2.1 ， ， ：Number|String
：'50%'
： '0%' ~ '100%' ， ：Number|String
：'50%'
： '0%' ~ '100%' ， ：Boolean
：false
： ， / ， ， ：String
：null
： “skins/icons/” （ ） ：String
：'15px 10px'
： iframe css 0， IE6 ：String
：''
： CSS ：Boolean
：true ：Number
：null
： ：Boolean
：true ：Boolean
：true ：Boolean
：true
： ：Boolean
：true
： iframe ：Boolean
：true
：1. ， ， lhgdialog.setting.extendDrag
2. iframe ， 高度な関連
：anyone
：null
： ， ， ， ， ... ：String|Number
：null
：1.
2. id this.get(youID) lhgdialog.list[youID] ：Number
：1976
： ， ， 。 ：Function
：null
： iframe ：Function
：null
： false 。 ， ，close 。 ：Object
：null
： ， ウィンドウインスタンスオブジェクトの内部メソッド
：
： 1： window
2： ： ： 1：
： 1：value --
2：add --
3：isFrm -- iframe
： 1 3 'url:' iframe ， true， 1：name --
2：callback --
3：focus --
4：disabled -- （ ）
：
：
button({
name: ' ',
focus: true,
callback: function(){}
},{
name: ' '
}); 1：X
2：Y
： ：'200px' '0%' ~ '100%' 1：
2：
： ：200 '200px' ： ： ： ： 1： ，
2：
： 2 ： ： 1： id
2：
： 2 1 id ： iframe ， iframe ， ：var api = frameElement.api; ： iframe ， ： iframe ， ：var api = frameElement.api, W = api.opener; W window ： iframe ： window ， ：var dg = $.dialog({'url:content.html',init:function(){ if( this.content.document.body ) alert(' '); }); ： ， ：var dg = $.dialog.focus; dg ： ， ：
var list = $.dialog.list;
for( var i in list ){
list[i].close();
} 1：
2：
3： 1：
2：
3：
4： 1：
2：
3：
4： 1：
2：
3：
4：