La technique pour créer un élément dans le DOM avec le Framework Dojo

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Hop, votre formation au Framework Dojo continue.

Apprenez à créer des éléments dans le DOM avec Dojo. Très pratique pour ajouter des div avec du contenu.

Tout est dans la formation ci-dessous.

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

La technique pour créer un élément dans le DOM avec le Framework Dojo

Bonjour à tous et bienvenu sur Développement Facile.

On continu la suite de la série dédiée au Framework Dojo, et là vous allez apprendre à créer des éléments avec le Framework Dojo, créer des éléments div, des éléments paragraphes, définir leur style CSS, leur contenu etc., tout ce que vous pouvez imaginer.

Créer un élément

Vous avez dojo.create, qui va vous permettre de créer un élément, donc le paramètre balise ça définit la balise de l’élément créé, p, div, input,
attrs, ça détermine les attributs de l’élément créé,
refnoeud après c’est optionnel, la référence du nœud par rapport auquel le nœud élément sera placé, et
position c’est un mot clé choisi entre before, after, replace, only, first ou last, avant, après pour remplacer, seulement premier ou le dernier.

Un exemple de création d’un élément div, var.dojo.create div, vous créez une div toute simple, là vous créez une div en dessous, 2eme ligne div avec un inner HTML, vous renseignez le contenu de la div, ou alors vous faites un dojo.create div body, ou vous la placez en première position dans la balise body, tout simplement.

Positionner un élément

Vous avez la possibilité de positionner un élément là ou vous le souhaitez avec dojo.place, le nœud,
Refnoeud, comme tout à l’heure, et la position beofre, after, replace, only, first ou last, comme tout à l’heure, par exemple dojo.place, vous créez une div qui contient module zéro, dans la classe main à la position première, tout simplement.

Voici différents exemples pour placer le module 5 par exemple à la fin de votre classe main, avant la balise main avec before, après la balise main avec after, pour remplacer un élément spécifique avec replace, ça va remplacer l’élément identifié par node, ou pour supprimer tous les autres éléments main et de laisser uniquement module 5, tout simplement.

Peut-être que ça vous parle pas trop cette notion de positionnement, je vais vous montrez un exemple de code source juste à la fin de cette vidéo.

Vider le contenu d’un élément

Vous avez la propriété dojo.empty qui vide tous les enfants de l’élément lui-même, du bloc lui-même, tout en préservant le nœud élément lui-même.

Un exemple de code source ce sera beaucoup plus parlant, je vous ai placé certaines choses en commentaires, vous les essaierez à votre tour, là on va insérer bonjour tout le monde, insertion Dojo bonjour tout le monde, il n’apparaît pas, le module 0, donc on le place en premier, il est là le module 0, après le module 5 on le place à la fin, le module 5 after après le menu ici, et la pour faire un replace et un supprime et là avant le menu, main, vous avez main ici, avec id main, donc avant le menu, après le menu. Vous avez également la classe none, pour le remplacer, tout simplement, la fonction empty, donc empty, il sera appelé sur ce bouton là, vous avez un bouton, une balise button sur le onclik vous appelez empty, vous faites dojo.empty texte, donc ça va récupérer ici, texte. Suppression du contenu.

Votre plan d’actions !

Encore un exemple relativement simple que vous pouvez télécharger directement sous ce cours vidéo, si vous avez des questions, posez-les également sous ce cours vidéo, et moi je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple Dojo

Retrouvez le code source JavaScript commenté.

Downloads

Partagez vos applications avec Dojo

Utilisez la zone commentaires, pour poster vos codes sources Dojo les plus intéressants.

Créez Rapidement des Sites Hyper-Interactifs avec vos utilisateurs grâce à la Formation Gratuite jQuery Facile !

Recevez les Stratégies pour utiliser le Potentiel des Frameworks jQuery et Dojo
+
Logo jQuery
+
Des Tutoriels Gratuits Supplémentaires pour utiliser toute la "Richesse" du Framework de Google : AngularJS