Drupal 7中应用jQuery UI样式和主题
2012-09-12 03:56
561 查看
在使用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、刷新页面,查看效果。(如果不起作用,请先清空缓存)这时就看到漂亮的主题样式了!
实现步骤如下:
一、应用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、刷新页面,查看效果。(如果不起作用,请先清空缓存)这时就看到漂亮的主题样式了!
相关文章推荐
- 【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动
- 创建Drupal自适应主题样式
- Android应用的国际化、样式和主题、屏幕适配
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式...
- android 应用主题样式设置,及Activity生命周期了解
- android学习笔记---50_样式与主题,给控件使用样式,给应用使用主题
- Drupal主题的基础样式—reset、base、layout、print
- 定义控件android学习笔记---50_样式与主题,给控件使用样式,给应用使用主题
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
- 安卓应用主题和样式
- 1.2 如何对活动应用样式和主题
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
- C#的WinForm程序应用了XP主题样式之后,抛出异常的解决方法
- Android开发——如何在第三方应用中调用系统未开放的主题和样式
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
- 3.1 活动应用样式与主题
- android学习笔记---50_样式与主题,给控件使用样式,给应用使用主题
- Android中Themes(主题)可以理解为应用级别,或者activity级别的样式
- Android 主题和样式应用