ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryUIのDialog_jqueryの単純なカプセル化

jQueryUIのDialog_jqueryの単純なカプセル化

WBOY
リリース: 2016-05-16 18:25:30
オリジナル
1145 人が閲覧しました

私が書いたコードは少し曲がっているので、再度カプセル化する必要があります。したがって、次のような単純な DialogHelper 補助クラスがあります。この記事の焦点はアイデアにあるため、現在のバージョンのコードはまだ非常に大まかです。このアイデアは正しいものであり、将来的にどのような内容にまとめられるとしても、このアイデアがすべての人にインスピレーションを与え、改善のためのより良い提案を提案できることを願っています。

DialogHelper のソース コードは次のとおりです。

コードをコピー コードは次のとおりです:

//--ダイアログ補助オブジェクト-開始
//現時点では、このオブジェクトは単なる単純なカプセル化です (将来はさらに複雑になる可能性があります)。
// その機能は、jQuery UI のダイアログの呼び出しメソッドを簡素化することです。独立した DOM 構造を変更する必要はなく、パラメーターの転送メソッドはより直接的です。
DialogHelper = function() {
var m_title = ""; //タイトルを設定します
var m_msg = ""; //メッセージのテキストを設定します
var m_btns = null; button
this.dlgDiv = $("

");//この部分は状況に応じてカスタマイズできます
//todo: アイコン、高さ、幅、ポップアップモードなど。すべて設定する必要があります。
this.set_Title = function(val) {
this.m_title = val;
}
this.get_Title = function() {
return this.m_title; >this.set_Msg = function(val) {
this.m_msg = val;
}
this.get_Msg = function() {
this.m_msg を返す
}
this .set_Buttons = function(val) {
this.m_btns = val;
}
this.get_Buttons = function() {
this.m_btns を返す
}
this.open = function() {
$dlg = this.dlgDiv.clone(); //このクローンは非常に重要です。そうでないとテキストが繰り返し追加されます。
$dlg.children().filter("p").html(this.dlgDiv.children().filter("p").html() this.get_Msg()); //カスタムメッセージを追加します
$dlg.dialog({
autoOpen: true,
show: 'ブラインド',
非表示: 'explode',
位置: 'center',
高さ: 260,
width: 460,
modal: true,
title: this.get_Title(),
buttons: this.get_Buttons()
}
// todo: メモリリークの可能性があるか検討する
}
//--Dialog 補助オブジェクト終了



DialogHelper 補助クラスを使用するコードは次のとおりです:


コードをコピー コードは次のとおりです: $(document)。 ready(function() {
$('#opener').click(function() {
//補助オブジェクトを初期化します。このオブジェクトはグローバル オブジェクトとして一度作成すると、繰り返し使用できます。その方が良いです。 !
dlgHelper = new DialogHelper();
//個人情報を設定します
dlgHelper.set_Title("既存のプロジェクトを削除しますか?");この操作を実行すると、元のプロジェクトが削除されます。本当に実行しますか? ");
dlgHelper.set_Buttons({
'OK': function(ev) {
/ /ここで他のパブリック メソッドを呼び出すことができます。
$(this).dialog(' close');
},
'Cancel': function() {
//他のパブリック メソッドを呼び出すことができます。ここのメソッド
$(this).dialog('close');
}
});
//フォームを開きます
dlgHelper.open()
});
});


コード パッケージのダウンロード
http://xiazai.jb51.net/201006/yuanma/jQueryUI_DialogDemo.rar
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート