Création de Plugin

Version imprimable

Création de Plugin

Bonjour

J'ai fais un fichier javascript pour créer un table avec tri et filtre. Je veux en faire un plugin. Mais comme c'est mon premier, ça ne marche pas ... et je ne sais pas pourquoi.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
var sortNone = 'ui-icon-carat-2-n-s';
var sortAsc = 'ui-icon-carat-1-n';
var sortDesc = 'ui-icon-carat-1-s';
var active = 'ui-state-active';
 
(function ($) {
 
    $.fn.TableFullOption = function (options) {
 
        // This is the easiest way to have default options.
        var settings = $.extend({
 
            // These are the defaults.
            Head: "",
            Body: ""
 
        }, options);
 
        GetTable( this);
 
        return this;
    };
 
    function GetTable( divTable) {
        var col =[];
        col.push({ "ColName": "Nom","SQLName":"Name"});
        col.push({ "ColName": "Matière principale","SQLName":"Major" });
        BuildTable(col, divTable);
          }
 
    function BuildTable(TableStruct, divTable) {
        var tab = '<table id="large" ><thead>';
        var thead1 = '<tr>';
              for (var post = 0; post < TableStruct.length; post++) {
            thead1 += '<th >' + TableStruct[post].ColName +</th>';
                  }
        tab += thead1 + '</tr></table>';
 
        divTable.html(tab);
    }
}(jQuery));

Dans mon fichier aspx :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="/script/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="/script/jquery-ui-1.10.4.custom.min.js"></script>
 
    <script type="text/javascript" src="/script/MsgResult.js" ></script>
 
    <script type="text/javascript" src="/TableFullOptionPerso/Script/TableFullOptionPlugin.js"></script>
 
    <link href="/CSS/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
    <link href="/TableFullOptionPerso/Table.css" rel="stylesheet" />
 
    <script type="text/javascript">
        $('#divTable').TableFullOption({
            Head: '/TableFullOptionPerso/TablePlugin.aspx/GetStructTable'        });
 
    </script>
</head>
<body>
    <div id="divTable"></div>
    <div id="MsgBack" title="Download complete">
    </div>
</body>
</html>

J'arrive bien à divTable.html(tab); mais rien ne se passe ma page reste vide.
Quand je regarde le code source :

Citation:

. Mon table n'est pas ajoutée, alors que sur ma version sans plugin, ça marche.

Je pense qu'il doit avoir un problème sur la définition du this

30/07/2014, 16h21
Bovino

Il y a surtout un problème dans ton code... regarde la coloration syntaxique et tu devrais t'en rendre compte.

D'autre part, pense à appuyer sur la touche F12 avant de poster, ça te permettra de faire le débogage minimum et de fournir des indications plus utiles que "ça ne marche pas"...

C'est en simplifiant la chaine que j'ai fait sauté un ', mais dans mon code il n'y a pas de problème sur la chaîne. J'ai précisé que tab est correct. et quand je dit que ça marche pas, si tu lis jusqu'en bas je mets le résultat. c'est à dire que rien n'est ajouté à mon div.
Ceux sont des fonctions reprises d'un fichier js qui marche correctement. C'est surtout l'accès à mon div qui ne marche pas, pas la construction de la chaine.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 (function ($) { $.fn.TableFullOption = function (options) { // This is the easiest way to have default options. var settings = $.extend({ // These are the defaults. Head: "", Body: "" }, options); $(this).append("toto"); return this; }; }(jQuery));
Même résultat <div id="divTable"></div> reste vide

Bonsoir

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(function ($) {
 
    $.fn.TableFullOption = function (options) {
 
        // This is the easiest way to have default options.
        var settings = $.extend({
 
            // These are the defaults.
            Head: "",
            Body: ""
 
        }, options);
 
        $(this).append("toto");
 
        return this;
    };
 
}(jQuery));
 
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $( '#divTable' ).TableFullOption();
 
});

Votre exemple fonctionne, mais le code est.. :aie:

Voir : Comment puis-je écrire un plugin ?

31/07/2014, 10h41
Pelote2012

Merci Daniel.

En fait mon problème était sur l'appel de mon plugin, j'avais oublié : $(function () { });

Tu dis que mon code est bof ... j'ai essayé de corriger
Peux-tu préciser, stp?
Je vois que tu utilise return this.each(function (i, item) {. Si je me rappelle bien c'est pour un appel du genre :$('div').TableFullOption(...

Mais mon plugin est pour construire un tableau de manière dynamique avec filtre et tri. donc je ne peux avoir qu'une seule source pour chaque tableau... sinon ça va créer plusieurs fois le même tableau. Mais bon je le mets, on ne sais jamais...)

Y Avait-il un autre truc bof? Pour le moment ça fait exactement ce que je veux. Mais si je peux le faire plus rapide ou plus propre ...
01/08/2014, 10h37
danielhagnoul

Bonjour

Par expérience, pour un plugin simple (monotâche), la méthode de Mike Alsup est la meilleure que je connaisse. Ses caractéristiques et un exemple sont dans le lien que je vous ai donné. Je ne vois rien à y ajouter.

Pour la création d'un code indépendant d'un sélecteur jQuery, on peut construire un pseudo plugin ($.nomPlugin au lieu de $.fn.nomPlugin), en fait une fonction globale dans l'espace de nom jQuery.

Il y a des "plugins" de ce genre sur mon site web. Voir les exemples d'utilisation et les codes de dvjhNotify et dvjhGoUp.