User login
- Java Blogs :
- CoffeeBean [:-)++]
- Le Touilleur-Express - Wicket Blogs :
- NooCodeComit - Android Blogs :
- AndroGames [:-)++] - JavaScript Blogs :
- MkLog.fr [:-)++]
Search
Recent blog posts
- Parce que c'est plus Geek, je déménage le blog
- Mon 1er tuto BackBone.js (avec zepto)
- Revue de presse JS
- Mes prévisions "Tablettes 2012"
- iOS5 : Split-view with position:fixed and overflow:scroll
- 1ère application mobile WebOS avec MOJO (HP+Palm)
- Coder en Pascal sur son téléphone Android
- Android Onboard Pascal Compiler
- Ré-utililisation pour gain de productivité en SSII ?
- 1ère application CouchApp : partie 2
Who's online
jQuery en 5 (10?) minutes
Ce matin j'ai voulu "m'amuser" avec jQuery Mobile. Je me suis très vite aperçu que sans connaître jQuery, j'allais être très vite limité. Donc pas le choix, je suis allez jeter un coup d'oeil à jQuery (un framework javascript donc). C'est extrêmement puissant, cela permet de prendre le contrôle d'une page web en javascript très facilement. Je vous livre le résultat de mon expérience qui ne doit représenter qu'1% des possibilités de jQuery, mais qui permet déjà de se faire une idée.
Commencez par créer une page html "simplette" :
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-16"/> <title>jquery-01</title> </head> <body> <div id="page1"> <div id="header1"> <h1>Hello, this is a title</h1> </div> <div id="content1"> <ul id="list1"> <li id="row0">Row zero</li> <li id="row1">Row one</li> <li id="row2">Row two</li> <li id="row3">Row three</li> </ul> </div> </div> </body> </html>
Cela devrait donner ceci :
Ensuite déclarer l'utilisation de jQuery (que vous avez bien sûr téléchargée) :
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-16"/> <title>jquery-01</title> <script type="text/javascript" src="jquery-1.4.3.min.js" charset="utf-8"></script> </head>
Puis ajouter une balise script après le tag de fermeture body
</body> <script type="text/javascript"> </script> </html>
Maintenant,
je souhaite ajouter une bordure rouge à l'ensemble des tags DIV. Saisir le code suivant :
$('div').css({
border:'solid 2px',
borderColor:'red'
});
$() permet d'invoquer jQuery
Allez voir votre page web :
Maintenant
, je veux mettre toutes les lignes (tag li) en jaune (le fond). Et aussi la ligne "row2" (celle qui a un id égal à "row2") avec une police de couleur blanche et un fond vert. Ajouter le code suivant :
//toutes les lignes en jaune
$('li').css({backgroundColor:'yellow'});
//sélection d'un élement particulier
$('#row2').css({backgroundColor:'green', color:'white'});
Allez voir à nouveau votre page web :
Maintenant
, je veux créer une zone de texte, un bouton et en + lorsque je clicke sur le bouton, cela va changer le contenu de la zone de texte. Un dernier petit ajout de code :
//création d'un champ texte et d'un bouton
$('<input type="text"/>')
.attr('id','field1')
.attr('placeholder','mon texte ...')
.appendTo('#content1'); /*on ajoute au div 'content1'*/
$('<input type="submit"/>')
.attr('id','cmd1')
.attr('value','Click Me ...')
.appendTo('#content1');
//onclick du bouton
$('#cmd1').click(function(){
$('#field1').attr('value','cmd1 has been clicked');
});
Allez voir à nouveau votre page web :
Clickez :
Voilà, that's all folks. Simple, facile, le plus dur étant de découvrir tout ce que peut faire jQuery.
Prochain article : on ajoute la couche jQuery Mobile ... Toujours en 10 minutes ;-)
Le code complet :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-16"/>
<title>jquery-01</title>
<script type="text/javascript" src="jquery-1.4.3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="page1">
<div id="header1">
<h1>Hello, this is a title</h1>
</div>
<div id="content1">
<ul id="list1">
<li id="row0">Row zero</li>
<li id="row1">Row one</li>
<li id="row2">Row two</li>
<li id="row3">Row three</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
//Selection de tous les div
$('div').css({
border:'solid 2px',
borderColor:'red'
});
//toutes les lignes en jaune
$('li').css({backgroundColor:'yellow'});
//sélection d'un élement particulier
$('#row2').css({backgroundColor:'green', color:'white'});
//création d'un champ texte et d'un bouton
$('<input type="text"/>')
.attr('id','field1')
.attr('placeholder','mon texte ...')
.appendTo('#content1'); /*on ajoute au div 'content1'*/
$('<input type="submit"/>')
.attr('id','cmd1')
.attr('value','Click Me ...')
.appendTo('#content1');
//onclick du bouton
$('#cmd1').click(function(){
$('#field1').attr('value','cmd1 has been clicked');
});
</script>
</html>
Recent comments
1 year 50 weeks ago
1 year 50 weeks ago
1 year 51 weeks ago
1 year 51 weeks ago
1 year 51 weeks ago
1 year 51 weeks ago
1 year 51 weeks ago
1 year 51 weeks ago
1 year 51 weeks ago
1 year 51 weeks ago