在drupal7中使用jQuery.UI

最新推荐文章于 2022-01-21 19:00:00 发布

转载最新推荐文章于 2022-01-21 19:00:00 发布 · 1.9k 阅读

本文展示了如何在Drupal中利用jQuery UI的内置功能来创建Tab控件，具体步骤包括引入必要的库、添加JS代码，并在特定视图模式下应用到Node显示页面的某些字段上，形成Tab页面形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery.ui已经内置在drupal核心中，所以我们可以直接调用即可

例如添加一个tab控件：

drupal_add_library('system', 'ui.tabs');

drupal_add_js('jQuery(document).ready(function(){jQuery( "#mytabs" ).tabs();});', 'inline');

比如给node显示页面的某些字段组织成tab页面形式

    Php代码  
    
   
 /* 
  * hook_node_view 
  */  
 function shellnode_node_view($node, $view_mode, $langcode) {  
   if($view_mode=='full'){  
     drupal_add_library('system', 'ui.tabs');  
     drupal_add_js('jQuery(document).ready(function(){jQuery( "#mytabs" ).tabs();});', 'inline');  
   }  
   if($node->type=='items'){  
     $node->content['tabs'] = array(  
       '#markup' => _build_tabs($node->nid),  
       '#weight' => 21,  
     );  
   }  
 }  
   
   
 function _build_tabs($nid){  
   $output = '<div id="mytabs">';    
   $output .= '<ul><li><a href="#mytabs-1">tabs1</a></li><li><a href="#mytabs-2">tabs2</a></li></ul>';  
   $output .= '<div id="mytabs-1">'._get_page($nid).'</div>';  
   $output .= '<div id="mytabs-2">'._get_device($nid).'</div>';  
   $output .= '</div>';  
   return $output;  
 }  