全部好，
长时间读者，第一次来电。
我无法在自定义的Drupal节点模板中使用jQuery选项卡小部件。
我在浏览器中获得的是正常呈现的HTML;即没有小部件和任何浏览器调试控制台都没有错误消息。
我在IE8 / Firefox 3.6＆amp; Chrome 7都具有相同的结果。
我正在使用Drupal 6 / jQuery 1.2.6 / jQuery UI 1.6
为了尝试诊断问题是否是Drupal 6文件路径设置问题，我尝试过jQuery Accordion和Draggable。手风琴呈现为像Tabs（失败）一样的HTML，但Draggable块可以工作。这告诉我，Drupal正在HTML标题中构建正确的脚本。
我还在Drupal.behaviors块中发出警告，试图确认它们是否已被执行;即Drupal正在组装并调用jQuery Document.ready函数。
这是我的node-custom.tpl.php的胆量，使用了jQuery文档中的示例。如
<?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>
以下是从呈现页面中摘录的HTML标题：
<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>
答案 0 :(得分：2)
经过多次挖掘后，导致此问题的原因是由于jQuery UI CSS未包含在呈现的HTML文件中。
我通过注意到唯一有效的jQuery小部件是DatePicker来解决这个问题，那是因为我安装了包含它自己的CSS的Date模块。 “手风琴”，“滑块”和“对话”的其他小部件也不起作用。
jQuery UI dupal模块不添加jQuery CSS。我通过添加以下内容对此进行了测试：
$jquery_ui_css_path = drupal_get_path('module', 'jquery_ui') . '/jquery.ui/themes/default/ui.all.css';
watchdog('MyMsg', 'Path to jquery ui css: ' . $jquery_ui_css_path); // debug
drupal_add_css( $jquery_ui_css_path );
感谢以下blog entry by Houen指出drupal_add_css函数调用。