Développer un plugin jQuery UI : mise en forme

Le framework CSS jQuery UI

Le framework CSS jQuery UI fournit une librairie de classes de base à appliquer à nos éléments. Il faut bien sûr ensuite ajouter ses propres classes pour affiner le look.

Voici la page du projet jQuery UI décrivant les classes CSS de base. En complément, il faut garder sous le coude la page du ThemeRoller, qui va nous fournir les classes associées à chaque icone du thème.

Retour à l'exemple

Commençons par ajouter la feuille CSS du thème jQuery UI (dans notre cas, c'est le thème de base ui-lightness) et quelques CSS spécifiques.

<link rel="stylesheet" type="text/css" href="static/js/jquery-ui/css/ui-lightness/jquery-ui-1.8.14.custom.css">
<style type="text/css">
.ui-bloc {
 padding : 0;
 margin-bottom: 10px;
}
.ui-bloc-content {
 margin : 10px;
}
.ui-bloc-title {
 margin : 0 0 10px;
 padding : 5px;
}
</style>

Revenons à notre méthode _create de création du widget

_create: function() {
    // On crée un container pour notre nouvel élément d'UI
    // On lui ajoute la classe ui-widget qui doit être ajoutée à tout container de widget
    // On lui ajoute également la classe ui-widget-content qui doit être appliquée  à tout container de contenu de widget
    // La classe ui-corner-all arrondit les 4 angles de notre bloc
    this.uiBlocContainer = $('<div></div>').addClass('ui-bloc ui-widget ui-widget-content ui-corner-all').insertAfter(this.element);

    // On encapsule notre élément initial dans notre nouveau container
    this.element.addClass('ui-bloc-content').appendTo(this.uiBlocContainer);
    this._title() ;
},

Dans notre méthode _title, améliorons le look du titre.

_title: function() {
    // On ajoute la classe ui-widget-header qui doit être ajoutée à tout élément titre de widget
    // La classe ui-corner-top arrondit les 2 angles suppérieurs de notre bloc titre
    // L'élément uiBlocTitle est ajouté au container et non plus à notre élément de base
    this.uiBlocTitle = $('<h5></h5>').addClass('ui-bloc-title ui-widget-header ui-corner-top').text(this.options.title).prependTo(this.uiBlocContainer);
},

Observons le résultat

La suite : options et méthodes