Exemples de bouts de code pour Javascript / JQuery / JQueryUI (JS)

Travaillant beaucoup sur des interfaces Web telles que des formulaires de recherche ou de fiches client par exemple, il est aujourd’hui est même presque nécessaire d’utiliser le Javascript. Très peu de site ou d’application Web peuvent se dispenser d’utiliser le langage Javascript. Partant de ce principe ne nombreux Framework JS sont apparus sur la toile dans le but d’améliorer et d’apporter une nouvelle dimension à l’utilisation du JS. Effectivement en prenant l’exemple de Framework Javascript JQuery (Framework que j’utilise le plus et dont la devise est « write less and do more »), cela change la vie ! Cela facilite le développement de code et cela permet aussi d’apporter à l’utilisateur des nouvelles possibilités par exemple avec des interfaces plus Friendly-user. Associé à JQuery Ui, qui est un complément pour les interfaces utilisateurs. C’est le top ! Il n’y a pas de que JQuery mais une multitude de Framework JS comme Mootools ou Scriptaculous.

Un autre site qui est bon de connaitre pour obtenir des scripts Javascript facilement est phpjs.org. Ce site est très utile car il offre une grande partie des fonctions PHP en Javascript. Moi j’ai souvent l’habitude de pense en PHP pour coder du JS donc cela peut faire gagner du temps aussi.

Gestion des z-index (profondeur) pour les datePicker ou les boites de dialogue (JQueryUi)

Je ne sais plus où j’ai trouvé ce bout de code mais il est très utile lors de mise en place de formulaire complexe avec plusieurs éléments qui se superposent. Par exemple avoir un DatePicker dans une boite de Dialog Ui ou ouvrir une boite de Dialog Ui dans une autre boite de Dialog Ui.

$.maxZIndex = $.fn.maxZIndex = function(opt) {
    /// <summary>
    /// Returns the max zOrder in the document (no parameter)
    /// Sets max zOrder by passing a non-zero number
    /// which gets added to the highest zOrder.
    /// </summary>    
    /// <param name="opt" type="object">
    /// inc: increment value, 
    /// group: selector for zIndex elements to find max for
    /// </param>
    /// <returns type="jQuery" />
    var def = { inc: 10, group: "*" };
    $.extend(def, opt);    
    var zmax = 0;
    $(def.group).each(function() {
        var cur = parseInt($(this).css('z-index'));
        zmax = cur > zmax ? cur : zmax;
    });
    if (!this.jquery)
        return zmax;

    return this.each(function() {
        zmax += def.inc;
        $(this).css("z-index", zmax);
    });
}

Voici un exemple d’utilisation avec un DatePicker JQuery Ui

$('#form_search_i_date').datepicker({beforeShow: function(){ $('#ui-datepicker-div').maxZIndex()}, dateFormat: 'dd/mm/yy',changeYear: true,changeMonth: true,showWeek: true });

Voici un autre exemple après le lancement d’une boite de Dialog Ui

$('div#dialog').dialog('open');
$('div#dialog').parent().maxZIndex();

Problème de scroll ou de saut sur les tabs depuis un bouton (JQueryUi)

Voici le soucis que j’ai eu avec les tabs de JQueryUi (cela arrive autant sur une page normale que dans un boite de dialogue), dans ma gestion des onglets, j’avais des boutons et à chaque fois que je cliquais dessus la page remontait jusqu’en haut, elle faisait un saut vers le haut et l’action du bouton ne se faisait pas. Après plusieurs recherches infructueuses, j’ai tapé cela dans Google « jquery tabs scroll bug » et j’ai trouvé ce bout de code qui règle le problème.

jQuery('#tabs').tabs({
	fx: { opacity: 'toggle' },
	select: function(event, ui) {
		jQuery(this).css('height', jQuery(this).height());
		jQuery(this).css('overflow', 'hidden');
	},
	show: function(event, ui) {
		jQuery(this).css('height', 'auto');
		jQuery(this).css('overflow', 'visible');
	}
});