Réaliser un controle jQueryUI - Part 2

Etape 2

création de la barre de navigation et des contrôles :

Ajout de la configuration par défaut dans les options :

    default_controls : [ {

id : 'previous',

icon : 'ui-icon-arrowthick-1-w'

    }, {

id : 'next',

icon : 'ui-icon-arrowthick-1-e'

    } ]

modification de la méthode _init :

_init : function() {

    // création de la barre de navigation

    var chaine = "<ul id='" + this.options.name

    + "_navBar' style='list-style:none;'>";

    for ( var i = 0; i < this.options.default_controls.length; i++) {

chaine += this

._getControl(

this.options.default_controls[i]['id'],

this.options.default_controls[i]['icon']);

    }

    chaine += "</ul><div style='clear:both;'>&nbsp;</div>";

    this.element.append(chaine);

},

_setOption : function(key, value) {

    this.options[key] = value;

},

_getControl : function(id, icon) {

    var chaine = "<li class='ui-state-default ui-corner-all' id='"

    + this.options.name

    + '_'

    + id

    + "' style='float:left;margin-right:2px;text-decoration: none;'>"

    + "<span class='ui-widget ui-corner-all ui-icon ui-button "

    + icon

    + "' title='"

    + id

    + "'></span></li>";

    return chaine;

}

Plus tard, il nous faudra rajouter des contrôles (début, fin,...) et assigner une fonction à chacun d'eux

Code source complet :

(function($) {

    $

    .widget(

    "ui.table",

    {

options : {

    name : "table",

    default_controls : [ {

id : 'previous',

icon : 'ui-icon-arrowthick-1-w'

    }, {

id : 'next',

icon : 'ui-icon-arrowthick-1-e'

    } ]

},

_create : function() {

},

_init : function() {

    // création de la barre de navigation

    var chaine = "<ul id='" + this.options.name

    + "_navBar' style='list-style:none;'>";

    for ( var i = 0; i < this.options.default_controls.length; i++) {

chaine += this

._getControl(

this.options.default_controls[i]['id'],

this.options.default_controls[i]['icon']);

    }

    chaine += "</ul><div style='clear:both;'>&nbsp;</div>";

    this.element.append(chaine);

},

_setOption : function(key, value) {

    this.options[key] = value;

},

_getControl : function(id, icon) {

    var chaine = "<li class='ui-state-default ui-corner-all' id='"

    + this.options.name

    + '_'

    + id

    + "' style='float:left;margin-right:2px;text-decoration: none;'>"

    + "<span class='ui-widget ui-corner-all ui-icon ui-button "

    + icon

    + "' title='"

    + id

    + "'></span></li>";

    return chaine;

}

    });

    $.extend($.ui.table, {});

})(jQuery);

Squelette du plugin

Tous les posts

créer la table html