2
HI Tous,Drupal 6 jQuery UI onglets dans node.tpl.php mesure
lecteur de longue date, appelant première fois. Je n'arrive pas à obtenir un widget onglet jQuery fonctionnant dans un modèle de nœud Drupal personnalisé. Ce que j'obtiens dans mes navigateurs est HTML rendu normal; c'est-à-dire aucun widget & aucun message d'erreur dans les consoles de débogage du navigateur.
J'ai testé dans IE8/Firefox 3.6 & Chrome 7 tous avec le même résultat.
J'utilise Drupal 6/jQuery 1.2.6/jQuery UI 1.6
Afin d'essayer de diagnostiquer si le problème est un problème de configuration du chemin du fichier Drupal 6, je l'ai essayé un accordéon jQuery et Draggable . L'accordéon rend HTML comme les onglets (échouer), cependant le bloc Draggable fonctionne. Cela m'indique que Drupal construit les scripts corrects dans l'en-tête HTML.
J'ai également bloqué les alertes dans le bloc Drupal.behaviors pour essayer de confirmer qu'elles sont exécutées; c'est-à-dire que Drupal assemble et appelle correctement la fonction jQuery Document.ready.
Voici le courage de mon node-custom.tpl.php en utilisant des exemples de la documentation de jQuery. Comme
<?php
jquery_ui_add('ui.tabs');
jquery_ui_add('ui.draggable');
jquery_ui_add('ui.accordion');
?>
<script>
Drupal.behaviors.nodeCourse = function(context) {
alert("before");
$("#tabs").tabs();
$("#accordion").accordion();
$("#drag-me").draggable();
alert("after");
};
</script>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<hr />
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
<div id="drag-me" style="size: 100px 100px 100px 100px; background-color:#286762"> </div>
Voici l'extrait en-têtes HTML de la page rendu:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test | demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/drupal6/themes/tenfifteen/favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/cck/theme/content-module.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/date/date.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/date/date_popup/themes/datepicker.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/date/date_popup/themes/jquery.timeentry.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/filefield/filefield.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/node/node.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/system/defaults.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/system/system.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/system/system-menus.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/user/user.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/cck/modules/fieldgroup/fieldgroup.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/views/css/views.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/framework/reset.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/framework/text.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/framework/960.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/framework/debug.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/messages.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/block-editing.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/styles.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/css/structure.css?3" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/css/typography.css?3" />
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/ie.css?3" />
<![endif]-->
<script type="text/javascript" src="/drupal6/misc/jquery.js?3"></script>
<script type="text/javascript" src="/drupal6/misc/drupal.js?3"></script>
<script type="text/javascript" src="/drupal6/modules/google_analytics/googleanalytics.js?3"></script>
<script type="text/javascript" src="/drupal6/modules/jquery_ui/jquery.ui/ui/minified/ui.core.min.js?3"></script>
<script type="text/javascript" src="/drupal6/modules/jquery_ui/jquery.ui/ui/minified/ui.tabs.min.js?3"></script>
<script type="text/javascript" src="/drupal6/modules/jquery_ui/jquery.ui/ui/minified/ui.draggable.min.js?3"></script>
<script type="text/javascript" src="/drupal6/modules/jquery_ui/jquery.ui/ui/minified/ui.accordion.min.js?3"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "basePath": "/drupal6/", "googleanalytics": { "trackOutgoing": 1, "trackMailto": 1, "trackDownload": 1, "trackDownloadExtensions": "7z|aac|arc|arj|asf|asx|avi|bin|csv|doc|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls|xml|z|zip" } });
//--><!]]>
</script>
</head>