communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > 自己动手制作jquery插件之自动添加删除行的实现_jquery

自己动手制作jquery插件之自动添加删除行的实现_jquery

WBOY
Libérer： 2016-05-16 18:01:00
original
1163 Les gens l'ont consulté

效果图如下，演示地址请点击


既然是插件，那就应该可以使用$("div").method({})这样的jquery写法来调用，它的做法是:
复制代码 代码如下:

(function($) {
})(jQuery);

然后给插件命名:
复制代码 代码如下:
$.fn.autoAdd = function(options) {}

这样我们就可以在页面里用$(dom).autoAdd({...}) 来调用这个插件了，接着我们再给它一些特定的参数，比如我们要复制哪一行，要给哪个按钮加上添加、删除的功能，这些我都使用class来标识;
复制代码 代码如下:

var settings = { changeInput: $("#input"), tempRowClass: "tempRow", min: 1, max: 90, addButtonClass: "addbtn", delButtonClass: "delbtn", addCallBack: null, delCallBack: null, indexClass: "index", insertClass: "insertbtn", moveUpClass: "moveupbtn", moveDownClass: "movedownbtn" };
if (options) $.extend(settings, options);

看起来有点长，实际没什么，也许你突然想加个鼠标移上去样式了，也可以继续往后加，这里我都给定了一些默认值，方便调用。解释下这些变量的意思先吧，changeInput,是我加的一个文本框，我希望输入多少的数字，就出现多少行，temRowClass就是我要复制的模版行，后面的就很好理解了；
由于时间关系，今天就到这吧，明天会详细说明这些功能是如何实现的。
Étiquettes associées：
添加删除行
source：php.cn
Article précédent：推荐10个超棒的jQuery工具提示插件_jquery Article suivant：namespace.js Javascript的命名空间库_javascript技巧
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...
Depuis 2024-04-06 22:01:35
0
3
816
La requête et la formule forment la table entière, avec de nouvelles colonnes, où les nouvelles colonnes sont des formules impliquant d'autres valeurs de colonnes conditionnelles. EDIT : La formule doit être la colonne "valeur" - la colonne "valeur" ...
Depuis 2024-04-06 21:23:40
0
2
530
Problèmes rencontrés lors de l'utilisation d'opentbs pour générer des fichiers odt : les valeurs d'une même clé sont affichées dans la même ligne au lieu de colonnes séparées. J'utilise une bibliothèque appelée OpenTbs pour créer odt en utilisant PHP, je l'utilise c...
Depuis 2024-04-06 20:18:18
0
1
483
Comment supprimer l'espace sous chaque ligne du tableau Tic-Tac-Toe dans Next.js en utilisant CSS ? Pourquoi y a-t-il un espace sous chaque ligne ? (CSS) J'essaie de créer une application Ne...
Depuis 2024-04-05 11:39:02
0
1
1431
Ajoutez l'attribut Endpoint _header à l'objet de réponse JSON Je teste l'extraction de données à partir d'un service de point de terminaison distant (np...
Depuis 2024-04-05 10:35:39
0
1
1376
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal