jQuery paul.tartarian

Portail Cycle C informatique‎ > ‎Mini conférence SMB214 2013‎ > ‎

Introduction

Lors du développement d'un site web, l'utilisation du langage JavaScript devient pratique. Ce langage offre des options qui facilitent les choses à faire. Le problème est que pour utiliser ces options et aboutir à ce qui est demandé, on est obligé de passer par beaucoup de lignes de codes. C'est pourquoi on s'est décidé d'écrire une librairie contenant des fonctionnalités très utilisées dans JavaScript qui permet de ne pas écrire un grand morceau de code à chaque fois on veut avoir ces fonctionnalités. Cette librairie s'appelle jQuery.

Définition

jQuery est une librairie Javascript dont son but principale est d'écrire moins pour faire plus. Cette librairie permet de manipuler le DOM et CSS, de gérer les évènements et animations facilement, et enrichissent la page HTML avec des méthodes qui paraient difficiles à maintenir. jQuery est utilisé sur des sites fameux(google, facebook, amazon...) .

Utilisation

La librairie jQuery n'est qu'un fichier .js qui peut être téléchargé à partir du WEB (par exemple http://jquery.com/download/). Il existe 2 versions de ce fichier:

Version comprimée: Le code n'est pas lisible (tabulation n'est pas existante de façon propre), mais le fichier est de taille minime. C'est cette version qui est la plus utilisée.
Version non comprimée : Le code est bien lisible. Le fichier est de grande taille par rapport à la version comprimée.

Pour utiliser jQuery il faut lier la page HTML au fichier js(par exemple : < script type="text/javascript" src="js/jquery.min.js"></script> )

Code jQuery avec explication

//waits until the whole page is loaded to do an action
$(document).ready(function(){
$("#welcome").fadeIn('slow');
$('#test_find').find('strong').addClass('big');
 
//----------------------------------------------------------------------- 
//Showing the password
//for more options go to http://www.prothemer.com/blog/research-and-development/new-jquery-plugin-targeting-usability-for-password-masking-on-forms/
$('#showpassword_text').showPassword();
//----------------------------------------------------------------------- 
//showing text while hovering over it using a PLUGIN
$('#hover_text').hoverText(true);
//----------------------------------------------------------------------- 
//Drag an object using ui(user intferace)
$('#drag_me').draggable();
$('#drag_me_x').draggable({axis: 'x'});
$('#drag_me_y').draggable({axis: 'y'});
// we can use as containment : parent, window, [x1, y1, x2, y2]...
$('#drag_me_containment_document').draggable({containment: 'document'});
$('#drag_me_containment_surrounding').draggable({containment: 'parent'});
$('#drag_me_pointer_cursor').draggable({cursor: 'pointer'});
$('#drag_me_opacity_change').draggable({opacity: 0.60});
$('#drag_me_grid').draggable({grid: [40,40]});
$('#drag_me_revert').draggable({revert: true});
$('#drop_me').draggable({revert: true});
//----------------------------------------------------------------------- 
// tolerance: fit = when the whole "drop object" is in #drop_here than trigger droppable
//            intersect=default
//            pointer=when the mouse enters the #drop_here
//            touch= when the "drop object" touches the #drop_here
// accept: name the object (id or class) that can this drop box accept.
$('#drop_here').droppable(
{ hoverClass: 'border'
, tolerance: 'fit'
, accept: '#drop_me'
, over: function(){
$('#drop_here').text('something hovered over here');
}
,out: function(){
$('#drop_here').text('');
}
,drop: function(){
$('#drop_here').text('Something dropped!');
}
}
);
//----------------------------------------------------------------------- 
// Allow to sort a list of items by dragging
$('#sortable_names').sortable();
//----------------------------------------------------------------------- 
// Change the size of an object
$('#box_resizable').resizable(
{ /*containment: 'parent'
, */animate: true
, ghost: true
, animateDuration: 'fast'
}
);
//----------------------------------------------------------------------- 
// The mouseover event changes the event from onclick to when the user hovers over the accordian widget
// the collapsible option allows a header in the div to be minimized otherwise the user will always be able to see a content of the div at all time
// The active option allows to define a particular header to be opened as the web-page is ready(like putting active:0). the active false means no header is opened.
$('#content_accordion').accordion({
fillspace: true
, icons: {'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus'} 
//, event: 'mouseover'
, collapsible: true
, active: false
});
//----------------------------------------------------------------------- 
// Displays a date  calendar
$('#date_picker').datepicker({
dateFormat: 'dd/mm/yy'
, minDate: 0
, maxDate: '+1m + 2d'
, showButtonPanel: true
, showAnim: 'bounce'
});
//----------------------------------------------------------------------- 
// Displays a dialog
$('#save_dialog').click(function(){
$('#dialog').attr('title','Saved').text('Settings were saved').dialog({
buttons: {'OK': function(){
$(this).dialog('close');
}
, 'NOT OK': function(){
alert('NOT OK');}
}
, closeOnEscape: true         
});
});
//----------------------------------------------------------------------- 
});// End of document.ready
 
$('#upload').click(function(){
var val = 0;
var interval= setInterval(function(){
val=val+1;
// set a progress bar by percentage (just the like the upload download bar)
$('#progress_bar').progressbar({value: val});
$('#percent').text(val+'%');
if (val == 100) {
clearInterval(interval);
}
}, 50);
});
//----------------------------------------------------------------------- 
//Select all the paragraphs in HTML and put an event (click) on them
$("p").click(function(){
});
//-----------------------------------------------------------------------
// toggle is a function that hides and show objects
$("#show_hide").click(function(){
var current_value = $(this).attr("value");
$("#selectors_view").toggle("fast");
console.log($("#selectors_view"));
 
if (current_value=="Hide"){
$("#show_hide").attr("value","Show");
}else{
$("#show_hide").attr("value","Hide");
}
});
//----------------------------------------------------------------------- 
$('#change_text').click(function(){
$('#text1').css('background-color','black').css('color','red');
});
//-----------------------------------------------------------------------
function change_size(P_element, P_size){
var current_size = parseInt(P_element.css('font-size'));
if (P_size == 'smaller'){
P_element.css('font-size',current_size - 2 + 'px');
}else if(P_size == 'bigger') {
P_element.css('font-size',current_size + 2 +'px');
}
}
$('#smaller').click(function(){
change_size($('div#smaller_bigger > p'),'smaller')});
 
$('#bigger').click(function(){
change_size($('div#smaller_bigger p'),'bigger')});
//-----------------------------------------------------------------------
// hover is an event that is triggered when the user hovers over the object by mouse
$('#videos').hover(function(){
$('#menu_feedback').html('Free video tutorials');
});
 
$('#code').hover(function(){
$('#menu_feedback').html('Free high quality mode');
});
 
$('#forum').hover(function(){
$('#menu_feedback').html('A help forum');
});
//-----------------------------------------------------------------------
// focusin and focus out are events that trigger when the user enters/exits the textbox
$('#name').focusin(function(){
$('#span_name').html('Enter your name!');
});
 
$('#name').focusout(function(){
$('#span_name').html('');
});
 
$('#age').focusin(function(){
$('#span_age').html('Enter your current age!!!!!');
});
 
$('#age').focusout(function(){
$('#span_age').html('');
});
 
//-----------------------------------------------------------------------
var text_attr=$('#link').attr('target');
$('#attr').text(text_attr);

Références

http://thenewboston.org/list.php?cat=32

http://www.w3schools.com/jquery/default.asp

http://jquery.com/

Sous-pages (1) : Présentation

Comments