HI全部,Drupal 6自定义node.tpl.php中的jQuery UI选项卡
长时间阅读器,首次调用者。
我无法在定制的Drupal节点模板中使用jQuery选项卡窗口小部件。
我在浏览器中得到的是正常呈现的HTML;即没有小部件&在任何浏览器调试控制台中都没有错误消息。
我已经在IE8/Firefox 3.6中测试过Chrome 7都有相同的结果。
我使用Drupal的6/1.2.6的jQuery/jQuery UI的1.6
为了尝试和诊断,如果问题是一个Drupal 6文件路径设置问题,我已经尝试了jQuery的手风琴和可拖动。手风琴呈现为像标签一样的HTML(失败),然而,可拖动块可以工作。这表明Drupal正在HTML标头中构建正确的脚本。
我也在Drupal.behaviors块中加入了alert,以确认它们是否被执行;即Drupal正确地组装并调用jQuery Document.ready函数。
下面是我使用jQuery文档中的示例创建的node-custom.tpl.php的内容。作为
<?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>