Aller au contenu

Comment créer un tableau avec 2 3 4 ou 5 colonnes avec le framework jQuery Mobile

Apprenez à créer très simplement des tableaux grâce à jQuery Mobile.

jQuery propose un système de tableaux à 2, 3, 4 ou 5 colonnes très simple et facile à manipuler.

Cela vous permettra de placer des boutons, des images, du texte, ou ce que vous voulez, de façon très simple sur votre application Web.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment créer un tableau avec 2 3 4 ou 5 colonnes avec le framework jQuery Mobile

Bonjour et bienvenu sur développement facile donc dans ce nouveau cours vous allez apprendre à utiliser les tableaux, c’est à dire avec jQuery mobile vous allez créer des tableaux et ce sera des tableaux déjà assez joli, vous pourrez appliquer le style CSS que vous voulez appliquer dessus et ils sont très simples à créer avec jQuery on peut dire que c’est un jeu d’enfant avec jQuery tellement ça vous simplifie la vie pour créer vos tableaux.

Les tableaux

Donc vous avez jQuery mobile il propose un système de tableau avec 2, 3, 4 ou cinq colonnes tout simplement donc les tableaux sont très utiles pour placer, vous pouvez placer côte à côte plusieurs élément des boutons, des images, du texte, donc ça vous donne, ça organise tous vos éléments et vous avez un gain de place assez appréciable.

Les tableaux – 2 colonnes

Donc pour créer un tableau à deux colonnes, il suffit de créer une div avec la classe ui-grid-a donc la lettre a c’est la convention pour une grille à deux colonnes tout simplement et après vous avez les colonnes qui sont créée avec deux div donc pour le premier bloc la classe ui-block-a pour le second ui-block-b. Je vous ai mis un exemple de code source, vous avez la div ui-grid-a, le premier bloc ui-block-a, le deuxième ui-block-b et après vous pouvez appliquer les différents styles CSS sur vos blocs pour l’affichage de votre tableau.

Les tableaux – 3 colonnes

3 colonnes, on respecte la convention c’est classe ui-grid-b et après vous avez des div qui utilise respectivement les classes ui-bloc-a, ui-bloc-b, ui- bloc-c, donc c’est le même principe, une fois que vous avez compris comment créer un tableau à deux colonnes pour 3, 4 et cinq colonnes c’est pareil c’est exactement la même chose ui-grid-b , c, d … ui-bloc-a,b,c,d, etc. Donc vous avez un exemple de code source.

Les tableaux – 4 colonnes

Quatre colonnes comme je l’ai dit il suffit d’utiliser la classe ui-grid-c, et les div à l’intérieur utilise les classes ui-bloc-a, b, c et d pour quatre colonnes, pareil vous avez un exemple de code source.

Les tableaux – 5 colonnes

Pour 5 colonnes, c’est exactement la même logique classe ui-grid-d et après les div à l’intérieurs  elles utilisent les classes ui-bloc-a, b, c, d et e pour cinq colonnes

Les tableaux – plusieurs lignes

Donc bien évidemment, vous pouvez ajouter plusieurs ligne dans votre tableau, c’est plus pratique, il suffit de faire une répétition donc sur l’exemple de code source que vous avez : ui-grid-b donc avec trois colonnes ui-bloc-a,b,c donc première ligne, on répète ui-grid-b,c avec deuxième ligne et troisième ligne, il suffit de répéter les blocs, c’est aussi simple que ça.

Exemple d’application

Je vais vous montrez à travers un exemple de code. Donc j’ai fait simple, deux colonnes, trois colonnes, quatre colonnes, 1 2 3 4 5 colonnes et avec plusieurs lignes. Avec 3 lignes, là il n’y a qu’une ligne, donc simple, la y’a plusieurs lignes et pour mettre des boutons également dans un tableau. En fait les boutons ils sont dans un tableau ça se voit pas mais c’est un tableau avec deux éléments, à deux colonnes.

Donc là pour définir le CSS, donc la bordure noire j’ai fait le fond aussi il suffit d’utiliser du CSS directement sur vos classes ici tout simplement trois colonnes quatre colonnes cinq colonnes donc c’est aussi simple que ça, la background-color, je vais peut-être la changer pour qu’elle soit afficher d’une couleur un peu différent donc je mets un code couleur au hasard, moi je les connais pas par cœur et donc la, on va mettre avait FF voilà je recharge la page vous avais vu que grâce aux changements CSS en direct, il y a la couleur de votre tableau change tout simplement donc pour créer un tableau à deux colonnes, ui-grid-a et les deux blocs ici bloc un A et bloc B. Trois colonnes ui-grid-b  bloc a, b,c. 4 colonnes ui-grid-c bloc a, b, c, et d donc avec vos contenus, bien évidemment vous pouvez mettre des boutons, une image, du texte, ce que vous voulez dans un tableau, y’a pas de problème c’est vous qui choisissez. Cinq colonnes ui-grid-  a, b, c, d, e, un tableau à cinq colonnes et on rajoute une deuxième ligne a, b, c, d, e et on rajoute une troisième ligne dans notre tableau a, b, c, d, … Donc il suffit de répéter ui-bloc a, b, c, d, e autant de lignes que vous avez donc voilà donc vous avez vu comment créer un tableau avec plusieurs lignes dans un tableau.

Votre plan d’actions !

Maintenant c’est à vous de jouer, commencez par utiliser le contenu de ce cours pour pouvoir créer des sites pour vos Smartphones et vos tablettes. Donc retrouvez le code source sous ce cours vidéo si vous avez des questions posez-les directement sous ce cours vidéo et dès maintenant je vous invite à consulter la deuxième vidéo, donc la suite il y a une image cliquable juste au-dessus ou à la fin de cette vidée il y aura un lien cliquable donc vous pouvez vous attendez la fin du vidéo, il y a un lien qui s’affiche, cliquez directement sur ce lien vous serez renvoyés vers la deuxième vidéo donc dans la deuxième vidéo vous avez la possibilité d’accéder à des cours complets sur jQuery, jQuery UI, jQuery Mobile, donc d’aller beaucoup plus loin donc attendez la fin de cette vidéo et cliquez sur le lien qui va apparaître et moi je vous dis à tout de suite sur développement facile

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple de la vidéo

Retrouver un exemple de code source avec une implémentation des tableaux jQuery Mobile à 1, 2, 3, 4 ou 5 colonnes

Téléchargement du code source Exemple de tableaux à plusieurs colonnes avec jQuery Mobile

Cliquez ici pour télécharger le code source Exemple de tableaux à plusieurs colonnes avec jQuery Mobile

Comment utilisez-vous vos tableaux avec jQuery Mobile ?

Partagez, dans les commentaires, vos meilleures techniques pour utiliser les tableaux avec jQuery Mobile.

 

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>