Wikipédia présente jQuery qui un l'un des frameworks javascript les plus utilisés actuellement qui a été à la mode avec sa fenêtre en premier plan et grisant le fond.

Inclure jQuery et jQueryUi

<script src="library/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="library/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.custom.css">
<script src="library/jquery-ui-1.10.4/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="library/jquery-ui-1.10.4/development-bundle/ui/i18n/jquery.ui.datepicker-fr.js"></script>

Alternativement, comme l'indique Downloading jQuery, vous pouvez utiliser les (Content Delivery Network) CDN Hosted jQuery :

Et si vous voulez tester les nouvelles versions pas encore stable de jQueryUi, les version "Milestone" sont téléchargeable sur http://code.google.com/p/jquery-ui/...

Migrer des anciens jQuery vers les nouvelles versions

ChangeLog : jQuery & jQuery UI ChangeLog

jQuery ChangeLog

Voyez aussi :

jQuery UI Changelog

Toutes ces versions sont citées sur le jQuery UI Blog.

jQuery Code Source Hosting

Le dépot GitHub de jQuery :

Coder correctement en utilisant le guide de codage jQuery

jQuery UI design & planning wiki

setTimeout et jQuery

Pour qu'une une fonction puisse s'appeler soit même dans le contexte de jQuery, avec setTimeout il ne faut pas window.setTimeout("testinside()",1000); mais setTimeout(function() {testinside();},1000); Consultez JavaScript Timing Events pour plus d'informations sur :

  • setInterval() - exécute une fonction, en boucle selon un intervalle de temps spécifié en millisecondes
  • setTimeout() - exécute une fonction, une seule fois après avoir attendu un temps spécifié en millisecondes
function test_outside() {
	console.log("test_outside");
}

//$(function() {
$(document).ready(function() {

	function test_inside(){
		console.log("test_inside");
		window.setTimeout("test_outside()",1000);
		window.setTimeout(function() {test_inside();},1000);
	}
});

Limiter la saisie d'un textarea (nombre de caractères)

Mettre le curseur dans un champs (focus onload)

$(document).ready(function() {
  document.getElementById('ID_HTML_voulu').focus();
});

Et pour le mettre dans le premier champs visible du premier formulaire de votre page : Focus on first form input field or textarea onload page using jQuery

Alterner les couleurs des lignes d'un tableau

Voici un exemple qui colorie alternativement tous les lignes d'un tableau. Et qui change de couleur au survol de la souris. Les lignes paires sont sélectionnées grâce au sélecteur tr:even.

tr.alt td{
	background: #ecf6fc;
}
tr.over td{
	background: #bcd4ec;
}
$(function() {

	// http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy
//	$( ".stripeMe tr" ).mouseover(function() {
//		$(this).addClass("over");
//	});	
//
//	$( ".stripeMe tr" ).mouseout(function() {
//		$(this).removeClass("over");
//	});
//
//	$( ".stripeMe tr:even" ).addClass("alt");
   $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
   $(".stripeMe tr:even").addClass("alt");
	 
});

Les tailles et résolution du document, du body, du viewport (fenêtre visible)

$(document).ready(function() {

	$("#resolution").html(
		"<pre>" +
		"Tailles (Largeur [width] x Hauteur [height]) de la fenêtre web du navigateur :\n" + 
		"Javascript Natif : \n" +
		screen.width + "x" + screen.height + " : screen.width" + "\n" +
		screen.availWidth + "x" + screen.availHeight + " : screen.availWidth" + "\n" +		
		window.document.width + "x" + window.document.height + " : window.document.width" + "\n" +
		document.width + "x" + document.height + " : document.width" +"\n" +
		document.getElementsByTagName('body')[0].clientWidth + "x" + document.getElementsByTagName('body')[0].clientHeight + " : document.getElementsByTagName('body')[0].clientWidth" + "\n" +
		document.documentElement.clientWidth + "x" + document.documentElement.clientHeight + " : document.documentElement.clientWidth" + "\n" +
		window.innerWidth + "x" + window.innerHeight + " : window.innerWidth" + "\n" + 		
		"jQuery : \n" +
		$('body').width() + "x" + $('body').height() + " : $('body').width()" + "\n" +		
		$(document).width() + "x" + $(document).height() + " : $(document).width()" + "\n" +	// returns width of HTML document
		$(window).width() + "x" + $(window).height() + " : $(window).width()" + "\n" +	// returns width of browser viewport
		"<pre>"
	);

// Modification de la taille de la zone body
    $('body').width(512); 
    $('body').width("1024px");
    $('body').width("50%");
	
});

window.screen.height

Contient la résolution verticale réelle de l'écran.

window.screen.availHeight

Contient le nombre de pixels utiles de la résolution verticale. Les barres d'outils et de tâches sont exclues. Voir aussi availWidth. Ne pas confondre avec height qui donne la résolution réelle.

IE 6
Tailles (Largeur [width] x Hauteur [height]) de la fenêtre web du navigateur :
Javascript Natif : 
1400x1050 : screen.width
1400x1020 : screen.availWidth
undefinedxundefined : window.document.width
undefinedxundefined : document.width
1359x2584 : document.getElementsByTagName('body')0.clientWidth
1379x881 : document.documentElement.clientWidth
undefinedxundefined : window.innerWidth
jQuery : 
1359x2584 : $('body').width()
1400x2614 : $(document).width()
1379x881 : $(window).width()

Firefox 3.6
Tailles (Largeur [width] x Hauteur [height]) de la fenêtre web du navigateur :
Javascript Natif : 
1400x1050 : screen.width
1400x1020 : screen.availWidth
1367x2456 : window.document.width
1367x2456 : document.width
1367x2456 : document.getElementsByTagName('body')0.clientWidth
1383x808 : document.documentElement.clientWidth
1400x808 : window.innerWidth
jQuery : 
1367x2456 : $('body').width()
1383x2480 : $(document).width()
1383x808 : $(window).width()

Chrome 8
Tailles (Largeur [width] x Hauteur [height]) de la fenêtre web du navigateur :
Javascript Natif : 
1400x1050 : screen.width
1400x1020 : screen.availWidth
1383x2480 : window.document.width
1383x2480 : document.width
1367x2456 : document.getElementsByTagName('body')0.clientWidth
1383x899 : document.documentElement.clientWidth
1400x899 : window.innerWidth
jQuery : 
1367x2456 : $('body').width()
1383x2480 : $(document).width()
1383x899 : $(window).width()

Key Listener / Bind on key : Stopper l'action de TAB (Tabulation) sur le navigateur et le traiter avec un handler

Pour les codes des touches du clavier, voyez : Table des caractères ASCII

  • 9 : TAB (Tabulation horizontale)
  • 13 : CR (Carriage return, retour à la ligne)
$(".quantite:last").bind('keypress', function(event) {
//				alert("Key:" + event.keyCode);
				if (event.keyCode == '9') {
//					alert("I love TAB");

					event.preventDefault();
					event.stopPropagation();
					event.stopImmediatePropagation();

//					ajouteDivInput(); // Appel de ma méthode perso qui me va bien, par ex ; ajout d'une ligne de saisie
				}
				//  alert($(this).text());
			});

Case à cocher (checkbox)

Vérifie que la case à cocher checkbox est cochée (checked)

alert ( $("input").is(':checked') );
$(document).ready(function() {
    $('#cocheTout').click(function() { // clic sur la case cocher/decocher
           
        var cases = $("#cases").find(':checkbox'); // on cherche les checkbox qui dépendent de la liste 'cases'
        if(this.checked){ // si 'cocheTout' est coché
            cases.attr('checked', true); // on coche les cases
            $('#cocheText').html('Tout decocher'); // mise à jour du texte de cocheText
        }else{ // si on décoche 'cocheTout'
            cases.attr('checked', false);// on coche les cases
            $('#cocheText').html('Cocher tout');// mise à jour du texte de cocheText
        }          
               
    });

});

Inverse les coches utilisées dans les cases à cocher d'une ligne d'un tableau

//		$(this).children().children("input[type=checkbox]").each(function(index){
		$(this).children().children(":checkbox").each(function(index){
			// $("input[type=checkbox]").each(function(index){
			alert("CheckBox: Text():"  + $(this).text() + " Name:" + $(this).attr("name") + " Value:" + $(this).attr("value"));
			if( $(this).is(':checked') ) {
				alert("CheckBox : id: " + $(this).attr('id') + " name: " + $(this).attr('name') + " is checked");
			}
			if( !$(this).is(':disabled') ) {
				$(this).attr('checked',!$(this).is(':checked'));
			}
		});

Lire des données de l'item sélectionné dans un select

// Sans jQuery 
document.getElementById('monselect').options[document.getElementById('monselect').selectedIndex].value;

// Avec jQuery
$(document).ready(function(){
    $('#monselect').change(function () {
        v =  $("#monselect option:selected").val();
        t =  $("#monselect option:selected").text();
        $('#retour').html(v+" "+t);
 
    })
    .trigger('change'); 
})

Select, changer la valeur de l'item selectionné

Comment modifier l'état d'une des options d'un select ?

Pour modifier l'élément sélectionné dans un select, il suffit de changer l'attribut selected des éléments:

document.forms[0].monSelect.options[i].selected = true; // ou false

Dans le cas d'un select normal, si une option est passée à true, elle deviendra automatiquement l'option sélectionnée. Pour un select multiple, cette option se rajoutera aux options déjà sélectionnées.

ou avec Comment modifier les options d'un champ select ?

//permet de positionner la combo au bon champs
monSelect.selectedIndex = selected;

Avec jQuery, sélectionner un autre "select" ou "radio" suit aux valeurs retourné par le "select" d'un autocomplete

// Sélection de le même valeur du select (cat est le champ supplémentaire aux champs par défaut : id,label,value)
			$("#monSelectId option").each(function(i,element) { 
//				alert("I am an option of #monSelectId  "+i+ " " + element.value + $(this).val() + $(this).text() );
				if( ui.item.cat == $(this).val() ) {
//					alert("Se sont le mêmes ! " + ui.item.cat);
					$(this).attr("selected","selected");
				}
			})
			
			// Sélection du bon radio
			if( ui.item.debit > 0 ) {
				$("#debit").attr("checked","checked");
			}else{
				$("#credit").attr("checked","checked");
			}

Rajouter un handler sur des radio avec jQuery, et déterminer la valeur de l'élément sélectionné. Par exemple avec 2 radios définis tels que :

<input type="radio" name="oui_non" value="oui" id="oui" /> <label for="oui">Oui, je le veux</label>
<input type="radio" name="oui_non" value="non" id="non" /> <label for="non">Non, j'en veux une autre</label>
$("input[name=oui_non]:radio").change(
		function()
		{
			alert("Change, nouvelle valeur : " + $(this).val());
		}
	);

Appel d'URL en Ajax : $.getJSON $.post $.get

Il est impossible de faire une requête POST Ajax pour obtenir un flux Json, vous devez donc passer par $.post

//$.getJSON('json.php?param1=val1&param2=val2', $("form").serialize(), processResultJson);
$.post('json.php?param1=val1&param2=val2', $("form").serialize(), processResultJson, 'json');

// La fonction de callback
function processResultJson(data, textStatus) {
   alert("Le status est : " + textStatus + ", la donnée : " + data);
}
//

jQuery serialize div (à la place de sérialiser le formulaire "form")

Pour sérialiser un un div à la place d'un form avec jQuery, il faut spécifier pour un id donné, ses sous item avec *

$('#divId *').serialize();

jquery tableau html pagination distante sur le serveur

Commencez par lire le plan pour le plugin : GridTable de jQuery In detail, a grid is usually used to connect a backend API that prepares a set of information in JSON or XML form to a 'live' Ajax frontend/table. Therefore, the grid has to support remote sorting, filtering and pagination. At a later state, client side sorting/filtering can be added - this is fairly difficult, since all the logic has to be implemented in the frontend. Ce document cite les jQuery plug-ins :

  • jqGrid
  • SlickGrid
  • ingrid
  • datatables
  • tablesorter
  • flexgrid
  • ...

Sinon, pour analyse rapide à la recherche d'un tri distant et pagination (remote paging & remote sorting), j'ai finalement opté pour jqGrid.

  • Flexigrid : Flexigrid with a dynamic data, paging, search, toolbar, and connected to an JSON file.
    • Remote pagination : OK
    • JSON : OK
  • jQuery Grid (jqGrid) : jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl. jqGrid uses a jQuery Java Script Library and is written as plugin for that package.
    • Remote pagination : OK
    • JSON : OK
  • Ingrid : Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.
    • Remote pagination : OK
    • JSON : ???
  • DataTable : DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
    • Remote pagination : OK
    • JSON : OK
  • Slickgrid : A simple, fast and flexible grid/spreadsheet component.
    • Trop orienté édition ?...
  • TableSorter : Flexible client-side table sorting
    • Remote pagination : NON
    • JSON : ???
  • Sigma Grid : Written in pure javascript, Sigma grid is an open source AJAX data grid for displaying and inline editing data in a scrollable and sortable table.

Selon la ferme du web :

Selon google : jquery grid (remote paging)

jqGrid : jQuery Grid Plugin

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl. jqGrid uses a jQuery Java Script Library and is written as plugin for that package.

Un comparatif

jQuery Grid Recommendations

The best entries in my opinion is Flexigrid and jQuery Grid (1st & 2nd in list). The others are included for completeness.

Personally I prefer jQueryGrid (because of its features), and Datatable (because of its simplicity).

Note: jQueryUI has plans for Grid plugin : http://jqueryui.pbworks.com/GridTable

The only real implementation of grid for jQuery is http://github.com/mleibman/SlickGrid/ everything else are nicely styled tables with additional options

En dehors de jQuery, on peut voir les grid :

Sigma Grid (Working With JQuery UI)

Et aussi les formatages de colonnes :

Table Fixed Header (pour formater la mise en pages des tableaux : table)

The jQuery fixheadertable plugin is a light & fast plugin for fixing the header of your <table> without fixing his width and compatible with all the browsers.

Jquery UI Dialog les fenêtres popup modales

jQuery UI Datepicker le sélecteur de date dans un calendrier

$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );

Et pour rajouter l'image au calendar :

No calendar icons in UI download

This icon is now part of the jQuery UI CSS Framework. If you have a theme attached, you can use the icon with the following markup:

<span class="ui-icon ui-icon-calendar"></span>

Its color will cascade off of a parent widget class or state.

Use JQuery UI Datepicker with Icons from Jquery UI Theme

Le DatePicker permet d'utiliser des images spécifiques, par exemple :

$(document).ready(function() {
   $("#datepicker").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
});

Pour afficher une icône du thème vous devez faire comme cela :

<span class="ui-icon ui-icon-calendar"></span>

Loktar fait comme ceci :

$("#datepicker").datepicker({ showOn: 'both'}).next('button').text('').button({icons:{primary : 'ui-icon-calendar'}});

Pour ma part j'utilise une image externe, car je n'aime pas leur petite image non significative d'un calendrier dans ce button vide (trop petit) ou avec du texte (trop grand)

$("#datepicker").datepicker({ showOn: 'both', buttonImageOnly: true, buttonImage: '/images/calendar.gif' });

Jquery UI Autocomplete l'auto complétion de texte saisi

L'ancien plugin jQuery plugin: Autocomplete (ou http://docs.jquery.com/Plugins/Auto...) n 'est plus maintenu depuis le 2010-06-23. Son successeur est dans les librairies UI de Jquery : jQuery UI Autocomplete.

Pour les plus anciens, vous pouvez suivre le guide migration : Autocomplete Migration Guide

Désormais le widget Autocomplete fonctionne avec JSON par défaut.

L'autocomplete jQuery,

  • envoi le champ : term
  • attends en retour JSON avec id, label, value
.ui-autocomplete-loading { background: white url('http://jqueryui.com/demos/autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat; }
$( "#inputIdRecherche" ).autocomplete({
		source: "?page=jquery.autocomplete.php",
		minLength: 2,
		select: function( event, ui ) {
			log( ui.item ?
				"Selected: " + ui.item.value + " aka " + ui.item.id :
				"Nothing selected, input was " + this.value );
		}
	});
[ { "id": "Ardea purpurea", "label": "Purple Heron", "value": "Purple Heron" }, { "id": "Calidris maritima", "label": "Purple Sandpiper", "value": "Purple Sandpiper" }, { "id": "Calcarius lapponicus", "label": "Lapland Longspur", "value": "Lapland Longspur" }, { "id": "Fratercula arctica", "label": "Atlantic Puffin", "value": "Atlantic Puffin" } ]';

Pour formater le texte de rendu différemment suivez Autocomplete custom data formats and displays by simply overriding the default focus and select actions.

$(function() {
		var projects = [
			{
				value: 'jquery',
				label: 'jQuery',
				desc: 'the write less, do more, JavaScript library',
				icon: 'jquery_32x32.png'
			},
			{
				value: 'jquery-ui',
				label: 'jQuery UI',
				desc: 'the official user interface library for jQuery',
				icon: 'jqueryui_32x32.png'
			},
			{
				value: 'sizzlejs',
				label: 'Sizzle JS',
				desc: 'a pure-JavaScript CSS selector engine',
				icon: 'sizzlejs_32x32.png'
			}
		];
		
		$('#project').autocomplete({
			minLength: 0,
			source: projects,
			autoFocus: true,
			focus: function(event, ui) {
				$('#project').val(ui.item.label);
				return false;
			},
			select: function(event, ui) {
				$('#project').val(ui.item.label);
				$('#project-id').val(ui.item.value);
				$('#project-description').html(ui.item.desc);
				$('#project-icon').attr('src', 'images/' + ui.item.icon);
				
				return false;
			}
		})
		.data( "autocomplete" )._renderItem = function( ul, item ) {
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
				.appendTo( ul );
		};
	});
Attention, depuis jQuery 1.9, "autocomplete" n'est plus valide il faut utiliser "ui-autocomplete"

Autocomplete now uses ui-autocomplete-item instead of item.autocomplete.

Theming : The autocomplete widget uses the jQuery UI CSS framework to style its look and feel. If autocomplete specific styling is needed, the following CSS class names can be used:

  • ui-autocomplete: The menu used to display matches to the user.
  • ui-autocomplete-input: The input element that the Autocomplete widget was instantiated with.

Somepeople think that "ui-autocomplete" is wrong, so they use "autocomplete" or "uiAutocomplete", but that is wrong. Actually, "ui-autocomplete" is the right way to do this.

$('#project').autocomplete({
                // ...
		})
		//.data( "autocomplete" )._renderItem = function( ul, item ) {
		.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.data( "ui-autocomplete-item", item )
				.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
				.appendTo( ul );
		};

Voir aussi :

Mais attention ce "con" d'auto-complète, permet par défaut moins de chose que celui qui existait avant d'être offert à la communauté jQuery UI :

  • pas de sélection automatique du premier élément (selectFirst / autoFill) la sélection automatique du premier élément d'un autocomplete jQuery se fait avec l'option autoFocus: true (seulement depuis jQuery UI 1.8.11 #7032, 779df65)
  • pas de format HTML
  • ...

Autocomplete selectFirst, HTML, ...

Pour ajouter les fonctionnalités manquantes, voyez Extensible Autocomplete et son dépôt sur GitHub

Par exemple pour utiliser select first :

$( "#autocomplete" ).autocomplete({
//			Les Options Non Officielles
			selectFirst: true,
			
//			Les Autres Options Officielles
			source: autocomplete.php
	});

		$( ".ui-autocomplete-input" ).live( "autocompleteopen", function() {
			
			var autocomplete = $( this ).data( "autocomplete" ),
				menu = autocomplete.menu;
			
			if ( !autocomplete.options.selectFirst ) {
				return;
			}

			menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() );
		});

jQuery UI Tooltip

jQuery UI Menu, barres de menu et dropdown

Créer un plugin jQuery : une liste déroulante personnalisée

Créer une fonction utilisant jQuery

Écrire dans la console avec jQuery

jQuery.fn.log = function (msg) {
		  console.log("%s: %o", msg, this);
		  return this;
		};
jQuery.error = console.error;
	jQuery.error("OK BOY");

Comme vous ne pouvez pas vraiment quitter la syntaxe spécifique FireFox qui génère des erreurs dans IE6, vous finirez généralement par écrire quelque chose comme ça dans votre projet :

function LogToConsole(MessageOrObject){
	if (typeof(window['console']) != 'undefined'){
		console.log("window['console'] is defined"); // on peut écrire dans la console
	}else{
		alert("window['console'] is undefined"); // on ne peut pas écrire dans la console
	}
}

jQuery & jQueryUI Drag and Drop (cliquer, glisser, déposer avec jQuery)

jQuery (UI) prendre et déposer sur une autre table (drag and drop between tables)

Sans jQuery

Ressources

Doc, Tutos, astuces jQuery & autre







// Désactiver le menu contextuel avec jQuery
$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});





// Sélectionner le prochain input à partir de celui en cours avec jQuery
$(":input:eq(" + ($(":input").index(this) + 1) + ")");





    

  • jQuery-PHP is a PHP library that allows to tie jQuery with PHP most natural way.
    • 









jQuery et Eclipse




jQueryWTP



    

  • jQueryWTP est un plugin eclipse qui ajoute l'auto complétion de code pour jQuery sur eclipse wtp's javascript

    • 





Étapes:


    

  1. download jqueryWTP_version.jar
    2. 

  2. find you Eclipse Plugin org.eclipse.wst.jsdt.core_version.jar,backup the plugin.
    3. 

  3. double click the jar file or run with command java -jar jqueryWTP.version.jar
    4. 

  4. on the opened swing UI,choose org.eclipse.wst.jsdt.core_version.jar,and output dir.
    5. 

  5. click generate button.
    6. 

  6. replace old org.eclipse.wst.jsdt.core_version.jar file with the generated file.
    7. 

  7. delete directory workspace/.metadata/.plugins/org.eclipse.wst.jsdt.core
    8. 

  8. start eclipse.
    9. 

  9. open a html file or a js file,edit js content.
    10. 





Spket






jQuery Mobile : Touch-Optimized Web Framework for Smartphones & Tablets






jQuery plugins utiles






Voir aussi