jquery を動的に増減させるアイデアと小さなプラグイン-jsチュートリアル-php.cn

jquery を動的に増減させるアイデアと小さなプラグイン

WBOY

リリース： 2016-05-16 18:22:08

オリジナル

1130 人が閲覧しました

昨年プロジェクトに取り組んでいたとき、コントロールを動的に追加および削除できる必要があるモジュールに遭遇しました。最初の解決策は、UpdatePanel を使用してページの部分更新を実行することでした。ページは非常に大きく、コントロールも多数あるため、動的に追加されるコントロールが多数あると非常に遅くなります。その後、JavaScriptを使って動的な増減制御をしようと考え、最終的にはページ送信時にページコントロールのデータを収集するようにしましたが、効果は大きかったのですが、当時はそのモジュールに対してのみ行っていたため、スケーラビリティに問題がありました。非常に貧弱で、当時私が書いたコードは非常に複雑で、動的増減の効果だけで 500 行以上の JavaScript コードを書きました。

その後、昨年末に時間ができたときにこのコードを書き直しましたが、現在はこのコードは 100 行未満に圧縮されており、数を増やすことも減らすことも簡単です。コントロールが非常に簡単で、使い方も非常に簡単です。

レンダリング:
jquery を動的に増減させるアイデアと小さなプラグイン
簡単な例:

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

< title>

🎜><選択>
<オプション値 ="ボルボ">ボルボ
"オペル">オペル
<オプション値="アウディ">アウディ

<入力タイプ="テキスト" 名前= " text1" id="text1" value="テキスト">

<スクリプト言語="javascript" src="jquery-1.4.2.min.js"> <スクリプト言語="javascript" src="dynamicAddRemover.js"< /script> <スクリプト言語="javascript"> $(function(){ $("#table1").dynamicAddRemover({ addedEvent:function(newCtl) , options){

//テキストボックスをクリアします。

newCtl.find(":text").val('');
if($("table").size() > 5 )
{
//追加ボタンを非表示にします。
newCtl.find("img[id$='" options.adderId "']").hide();
}
},
removedEvent:function(prevCtl, nextCtl, options){
if($("table").size() <= 5)
{
//追加ボタンを表示します。
$("table:last").find("img[id$='" options.adderId "']").show();
}
}
}); 🎜>});

>
<選択>
<オプション値 ="volvo">ボルボ
<オプション値 ="saab">Saab >

"text" name="text1" id="text1" value="テキスト">

パラメータ定義:

コードをコピー

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

 
rootWrapper デフォルト: "table" 
ルート コンテナーは、追加または削除する必要があるコントロールのルート コンテナーです。現在、コードはテーブル ルート コンテナーのみをサポートしています。 
adderId デフォルト:"imgExpBtn" 
ボタンの ID を追加します。 
removerId デフォルト:"imgColBtn" 
削除ボタンの ID。 
addingEvent default:null 
イベントを追加する前にトリガーされるカスタム イベント。パラメーターは newWrapper と options です。newWrapper は新しく追加されたコントロールの親コンテナーであり、options はパラメーター リストそのものです。 
addedEvent default:null 
イベントの追加後にトリガーされるカスタム イベント。パラメーターは newWrapper と options です。newWrapper は新しく追加されたコントロールの親コンテナーであり、options はパラメーター リストそのものです。 
removingEvent default:null 
削除イベントの前にトリガーされるカスタム イベント。パラメータは refWrapper と options で、reWrapper は削除されたコントロールの親コンテナで、options はパラメータ リストそのものです。 
removedEvent default:null 
削除イベントの後にトリガーされるカスタム イベント。パラメータは prevWrapper、nextWrapper、および options です。prevWrapper は削除された親コンテナの前のコンテナで、nextWrapper は削除された親コンテナの次のコンテナです。コンテナー、オプションはパラメーター リストそのものです。 
collapseImgUrl default:'icon_collapse.gif' 
ボタンのパスを追加します
expandImgUrl default:'icon_expand.gif' 
ボタンのパスを削除します

メモ:
。$("table").dynamicAddRemover({param1:"param1", param2:"param2"}); のように、増減プロセス中に必要なカスタムパラメーターと変数を追加できます。 :options.param1 などの使用時。
。ルートコンテナには一意の ID が必要であり、指定する場合も一意である必要があります。使用する必要があるモジュール (複数のルートコンテナー) が複数ある場合は、$("#table1").dynamicAddRemover()、$("#table2").dynamicAddRemover() などを使用できます。
。新しく追加されたコントロールの ID と名前は更新されていません。特別なビジネスニーズがある場合は、addedEvent に新しい ID を生成するビジネスロジックを追加してください。
。このプラグインには Jquery バージョン 1.2.6 以降が必要です。

ソースコードと原理は非常に単純であり、出発点としてのみ機能します。以下はソースコードを含む添付ファイルです。

dynamicAddRemover.rar