2010-11-18 87 views
2

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">&nbsp;</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> 

回答

2

很多周围挖掘,这个问题的原因是由于jQuery UI的CSS不是被包含在渲染HTML文件后。

我明白了这一点,注意到唯一工作的jQuery构件是DatePicker,那是因为我安装了包含它自己的CSS的Date模块。 Accordions,Sliders和Dialogs的其他小工具也无法使用。

jQuery UI重复模块不添加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函数调用。