Javascript Girl
  1. Javascript Girl
  3. Dojo TabContainer pas de style
Intereting Posts
JQuery autocomplete dans Flask Partagez les variables entre les fichiers dans Node.js? Comment formater une Date en MM / jj / aaaa HH: mm: format ss en JavaScript? Utilisation de Jquery pour ajouter des éléments dans Listbox à partir de Textbox Débogage javascript: existe-t-il un moyen de modifier un changement de valeur variable? Détecter si la vidéo HTML5 est en cours de lecture ou en pause et afficher ou masquer une Div en conséquence L'utilisation de Prototype pour étendre les objets natifs est-elle mauvaise? Différence entre le retour d'une promesse et le retour indéfinis dans une promesse Comment stocker les valeurs de la zone de texte dans le tableau en utilisant jquery? Révisez la mise à jour de l'enregistrement # via JS dans Rails Existe-t-il un moyen de désactiver la ligne de flottaison et d'utiliser un ORM différent dans sails.js? Android Native Browser duplicate HTML5 canvas (fine en chrome) JavaScript cliquez sur le gestionnaire d'événements – Comment puis-je obtenir la référence à l'élément cliqué? Comment appeler la méthode côté serveur node.js à partir de javascript? Obtenir le nom de fichier de la page à partir de la barre d'adresse

Dojo TabContainer pas de style

Pour une raison quelconque, les éléments de style ne sont pas appliqués au TabContainer. Les titres des onglets apparaissent comme un texte noir sur blanc noir coincé juste à côté de l'autre. 

<script src="http://localhost/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async:true,parseOnLoad:true"></script> <link href="http://localhost/dojo/1.9.1/dojo/resources/dojo.css" type="text/css" rel="stylesheet" /> <link href="http://localhost/dojo/1.9.1/dijit/themes/claro/claro.css" type="text/css" rel="stylesheet" /> <link href="http://localhost/dojo/1.9.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="mainUIContainer" data-dojo-type="dijit/layout/TabContainer" region='center' style="width: 100%; height: 100%;"> <div id="numbersGridTab" data-dojo-type="dijit/layout/ContentPane" style="width: 100%; height: 100%;" title="Grid"> <div id="numbersGridHolder" style="width: 900px; height: 400px;"></div> </div> <div id="textBlobTab" data-dojo-type="dijit/layout/ContentPane" style="width: 100%; height: 100%;" title="crap"> lorem ipsum dolor </div> </div> <script> require([ "dijit/layout/ContentPane", "dijit/layout/TabContainer", "dojo/domReady!" ], function(){ makeGrid(); }); </script>

Je crois que le problème ici est que, pour utiliser un thème dojo existant comme claro , vous devez ajouter une classe à l'étiquette du corps <body class="claro">

@Andrew: Cela a fait l'affaire! Confirmé avec Dojo 1.9.2 (Tundra pour être spécifique :)).

Vous pouvez utiliser le panneau Ctrl + Shift + I de Chrome pour parcourir le DOM généré de votre page et trouver la balise que vous voulez style. Si vous pensez qu'il y a JavaScript surpassant votre style, créez un nouveau Javascript pour être exécuté après que les autres soient exécutés et utilisez-le pour définir les styles à la place. Comme la plupart des développeurs orientés design, je vous conseille d'utiliser jQuery si vous devez utiliser un style dynamique extensif.