コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > rows_jqueryを自動追加・削除するjqueryプラグインを自作する実装

rows_jqueryを自動追加・削除するjqueryプラグインを自作する実装

WBOY
リリース： 2016-05-16 18:01:00
オリジナル
1168 人が閲覧しました

レンダリングは次のとおりです。デモのアドレスについては
をクリックしてください。


プラグインなので、$("div").method({}) のような jquery 記述を使用して呼び出す必要があります。メソッドは次のとおりです。 >
コードをコピー コードは次のとおりです:
(function($) {
})(jQuery) ;


プラグインに名前を付けます:


コードをコピーします コードは次のとおりです。 $.fn .autoAdd = function(options) {}
このように、$(dom).autoAdd({...}) を使用してこのプラグインを呼び出すことができますページ内で、どの行をコピーするか、どのボタンに機能を追加および削除するかなど、特定のパラメータを指定します。これらを識別するためにクラスを使用します。

コードをコピー
コードは次のとおりです: var settings = {changeInput: $("#input"), tempRowClass: "tempRow "、最小: 1、最大: 90、addButtonClass: "addbtn" 、delButtonClass: "delbtn"、addCallBack: null、delCallBack: null、indexClass: "index"、insertClass: "insertbtn"、moveUpClass: "moveupbtn"、moveDownClass: "movedownbtn" }; if (options) $.extend (settings, options);
少し長く見えますが、実際には何もありません。 move-up スタイルを使用することも、後で追加し続けることもできます。ここでは、呼び出すのに便利なデフォルト値をいくつか指定しています。最初にこれらの変数の意味を説明します。changeInput は私が追加したテキスト ボックスであり、temRowClass は私がコピーしたいテンプレート行です。
制約については、今日はここでやめましょう。明日は、これらの関数がどのように実装されるかを詳しく説明します。
関連ラベル：
添加删除行
ソース：php.cn
前の記事：素晴らしい jQuery ツールチップ 10 個を推奨します。 次の記事：namespace.js Javascript 名前空間 library_javascript のヒント
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
opentbs を使用して odt ファイルを生成するときに発生する問題: 同じキーの値が別の列ではなく同じ行に表示されます。 PHPでodtを作成するためにOpenTbsというライブラリを使っていますが、列と行が動的に生成されるので利用しています。行と列の作成方法は知っていますが、それらを整理する方法がわ...
から 2024-04-06 20:18:18
0
1
483
CSS を使用して Next.js の三目並べボードの各行の下のスペースを削除するにはどうすればよいですか? 各行の下にスペースがあるのはなぜですか? (CSS) 自分のスキルをテストするために Next.js 三目並べアプリを作成しようとしています。ただし、CSSに問題があります。ボード...
から 2024-04-05 11:39:02
0
1
1431
Endpoint _header 属性を JSON 応答オブジェクトに追加します。 リモート エンドポイント サービス (npoint.io) からデータを取得するテストをしています。応答オブジェクトが返されると、JSON に「_headers」属性が追加されます...
から 2024-04-05 10:35:39
0
1
1376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート