Drupal 7中应用jQuery UI样式和主题

        在使用Drupal 7创建“学JAVA”网（www.xue-java.com）过程中，希望在网页中应用jQuery UI及主题样式。因为Drupal 7已经将jQuery和jQuery UI集成到核心包中了，所以使用起来非常简单。

       实现步骤如下：

一、应用jQuery UI

       1、安装jquery update模块；

       2、开启PHP filter功能。（开启步骤请参见我上一篇文章）

       3、实现jQuery UI的手风琴效果（accordion）。新创建一个页面，应用“PHP code”文本格式。在Body里输入以下代码：

<?php    drupal_add_library('system', 'ui.accordion');    drupal_add_js('jQuery(document).ready(function(){            jQuery("#accordion").accordion();        });', 'inline');?><div class="demo1">  <div id="accordion">    <h3><a href="#">面板1</a></h3>    <p>这是面板1.</p>    <h3><a href="#">面板2</a></h3>    <p>这是面板2</p>    <h3><a href="#">面板3</a></h3>    <div><p>这是面板3</p></div>  </div></div><!-- End demo1 -->

       4、刷新页面，查看效果。（如果不起作用，请先清空缓存）

       5、添加其他jQuery UI组件：一个tabs，一个按钮（单击按钮，打开一个动画出现的消息框）。全部代码如下：

<?phpdrupal_add_library('system', 'ui.accordion');drupal_add_library('system', 'ui.tabs');drupal_add_library('system', 'ui.button');drupal_add_library('system', 'ui.dialog');drupal_add_js('jQuery(document).ready(function(){        jQuery("#accordion").accordion();        jQuery("#tabs").tabs({event:"mouseover"});        jQuery("#dialog").dialog({autoOpen:false,show:"blind",hide:"explode"});        jQuery("#opener").click(function() {jQuery("#dialog").dialog("open");return false;});});', 'inline');?><div class="demo1"><div id="accordion"><h3><a href="#">面板1</a></h3><p>这是面板1.</p><h3><a href="#">面板2</a></h3><p>这是面板2</p><h3><a href="#">面板3</a></h3><div><p>这是面板3</p></div></div></div><!-- End demo1 --><br /><br /><div class="demo2"><div id="tabs"><ul><li><a href="#tabs-1">行业新闻</a></li><li><a href="#tabs-2">推荐博客</a></li><li><a href="#tabs-3">最新招聘</a></li></ul><div id="tabs-1"><p>行业新闻这是行业新闻</p></div><div id="tabs-2"><p>推荐博客这是推荐博客</p></div><div id="tabs-3"><p>最新招聘这是最新招聘</p></div></div></div><!-- End demo2 --><br/><br/><div class="demo3"><div id="dialog" title="动态对话框"><p>这是一个带动画的对话框</p></div><button id="opener">打开对话框</button></div><!-- End demo3 -->

        6、刷新页面，查看效果。（如果不起作用，请先清空缓存）

二、改变jQuery UI主题

       在前面的例子中，我们看到jQuery UI应用的是默认灰白主题。那么如果想要改变默认主题，怎么办？

       1、到jQuery UI官网上，下载自己喜欢的主题(theme)，或定制一个主题；

       2、解压缩下载的主题(theme)。比如下载redmond theme，在其子目录中找到文件development-bundle\themes\redmond\jquery.ui.theme.css，将其拷贝到自己的子主题下，路径如下：\sites\all\themes\{子主题}\css\jquery.ui.theme.css

       3、打开模板文件\sites\all\themes\{子主题}\template.php，添加如下函数：

//更改默认的jQuery UI主题function myzen_css_alter(&$css) {  if (isset($css['misc/ui/jquery.ui.theme.css'])) {    $css['misc/ui/jquery.ui.theme.css']['data'] = drupal_get_path('theme','myzen').'/css/jquery.ui.theme.css';  }}

注：将上面代码中的myzen，替换为你自己的子主题名字。

        4、刷新页面，查看效果。（如果不起作用，请先清空缓存）这时就看到漂亮的主题样式了！