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，一个按钮（单击按钮，打开一个动画出现的消息框）。全部代码如下：

<?php
drupal_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、刷新页面，查看效果。（如果不起作用，请先清空缓存）这时就看到漂亮的主题样式了！