Drupal7中的jQuery的使用

显示全部楼层 · 发表于 1-27-2012 03:32

在Drupal中使用jQuery很简单，这是因为Drupal内置了jQuery，并且在添加JavaScript时会自动加载 jQuery。在Drupal中，通过drupal_add_js()函数来添加JavaScript文件。

drupal7中注意$需用jQuery代替...

一、在页面内添加jQuery(不推荐此方法使用jQuery)

Let’s get set up to play with jQuery.
9 K/ u) r5 L7 O1. Log into your Drupal site as user 1 (the administrative account).4 N+ h1 T" b7 r4 \/ ~1 `7 M) W, I. l* {6 p
2. On the Modules page, enable the PHP filter module.

开启PHP filter模块

3. Create a new node of type Basic Page, but on the node creation form, be sure to select “PHP code” under the “Input formats” section. Enter Testing jQuery as the title, and add the following to the body section of the form:

创建一个页面，选择PHP code 的输入格式

<?php0 }1 V: i* t, W# e% d5 Q( H
drupal_add_js('jQuery(document).ready(function () {4 Q. O" q$ f( f0 a* O. z
jQuery("p").hide();
% }) s8 {. S, d& MjQuery("p").fadeIn("slow");8 D: I! d5 d' v" @
});', 'inline');
1 M: H. j: c8 h' b?>
. B F4 W# V7 F! X<p id="one">Paragraph one</p>
; H- C) D( `7 @3 ]" o& k<p>Paragraph two</p>8 I* B4 f m! ?5 \$ [3 P* q
<p>Paragraph three</p>

4. Click Submit, and reload the page. The three paragraphs you created will slowly fade in. Cool, eh? Refresh the page to see it again. Let’s study this example a little more.

The jQuery code is contained in a file, misc/jquery.js. This file is not loaded for every page within Drupal. Instead, anytime a drupal_add_js() call is made, jquery.js is loaded. Two parameters are passed into drupal_add_js(). The first parameter is the JavaScript code you wish to have executed, and the second parameter (inline) tells Drupal to write the code inside a pair of <script></script> tags within the document’s <head> element.

jQuery代码包含在文件misc/jquery.js中。并不是为Drupal中的每个页面都加载这个文件。只有在调用了方法 drupal_add_js()时，才加载它。这里向drupal_add_js()传递了两个参数。第一个参数是一段你希望执行的JavaScript 代码，第二个参数“inline”则用来告诉Drupal将代码写入到文档的<head>元素中的<script></script>标签里面。
5 b/ E ], L% i) t+ @/ }3 `, ONote:We’re using drupal_add_js() quite simply here, but it has many more possibilities, which you can discover athttp://api.drupal.org/api/function/drupal_add_js/7.

drupal_add_js() 更多高级用法参看http://api.drupal.org/api/function/drupal_add_js/7。

jQuery:通过ID定位一个元素

Note:Accessing an element by ID is one of the fastest selector methods within jQuery because it translates to the native JavaScript: document.getElementById("one"). The alternative, jQuery("p#one"), would be slower because jQuery needs to find all paragraph tags and then look for an intro ID. The slowest selector method in jQuery is the class selector jQuery".foo"), because a search would have to be made through all elements with the .foo selector class. (It would be faster to do jQuery"p.foo") in that case.)

在jQuery里面，通过ID访问一个元素是最快的选择器方法之一，这是因为它会被翻译为本地的JavaScript代码：document.getElementById("one ")。替代方案$("p#one")就会慢一些，这是因为jQuery首先需要查找所有的段落标签，然后再从中选择ID为one的元素。在jQuery中最慢的选择器方法就是$(".foo")，因为它需要在所有的元素中查找选择器类为foo的元素（在该情况下，使用$("p.foo")会快一些）。

方法链(Method Chaining)

We can concatenate a series of jQuery methods because most methods within jQuery return a jQuery object. Let’s chain some methods together in a single jQuery command:

我们可以连接一系列的jQuery方法的原因是， jQuery内部的大多数方法都返回一个jQuery对象。让我们在单个jQuery命令中将多个方法串连起来：
7 N+ K& i) j7 g$ ]$ C// Hide all the p tags, fade them in to visibility, then slide them up and down." V% j: g! M' }, o$ o1 r7 `
jQuery("p").hide().fadeIn("slow").slideUp("slow").slideDown("slow");
9 q2 B* ~1 V4 r }jQuery calls are invoked from left to right. The preceding snippet finds all the paragraph tags, fades them in, and then uses a sliding effect to move the paragraphs up and then down. Because each of these methods returns the jQuery wrapper object containing the same set it was given (all the p elements), we can manipulate the same set of elements over and over again until the final effect is achieved.

jQuery的调用是从左向右进行的。前面的代码片段找到所有的段落标签，并渐进的显示它们，然后使用一个幻灯效果把段落移上去再移下来。由于其中的每个方法返回的jQuery包装器对象都包含了相同的元素集（所有的p元素），所以我们可以对同一个元素集进行一次又一次的操作，直到达到最终的效果。

添加或删除一个类(Adding or Removing a Class)

jQuery can dynamically change the CSS class of an element. Here, we turn the first paragraph of our example red by selecting it by ID and then assigning Drupal’s error class to it:

jQuery可以动态的修改一个元素的CSS类。这里，我们通过ID选中我们例子中的第一个段落，然后为它分配一个Drupal的错误类，这样就将它转变为红色了：

jQuery("#one").addClass("error");

The counterpart to the addClass() method is the removeClass() method. The following snippet will remove the error class we just added:

与addClass()方法对应的是removeClass()方法。下面的代码片段将删除我们刚刚添加的错误类：

jQuery("#one").removeClass("error");

And then there’s the toggleClass() method, which adds or removes a class each time it is called:

还有一个toggleClass()方法，每次调用它时都会添加或删除一个类：

jQuery("#one").toggleClass("error"); // Adds class "error".
jQuery("#one").toggleClass("error"); // Removes class "error".

jQuery("#one").toggleClass("error"); // Adds class "error" again.

包装已有元素(Wrapping Existing Elements)
Instead of just adding an error class to the <p id="one"> element, let’s wrap that element in a div so that the red will show up better. The following jQuery snippet will do that:
<?php
drupal_add_js('jQuery(document).ready(function () {
jQuery("#one").wrap("<div class=\'error\'></div>");
});', 'inline');
?>
<p id="one">Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>
Note the escaping of the single quotes, which is necessary because we already have open single quotes inside the drupal_add_js() function.

注意单引号的转义，由于我们在drupal_add_js()内部已经使用了一对单引号，所以需要对双引号内部的单引号进行转义。

修改CSS元素的值(Changing Values of CSS Elements)
jQuery can be used to assign (or reassign) values to CSS elements. Let’s set the border surrounding the first paragraph to solid (see Figure 18-4):
jQuery("#one").wrap("<div class=\'error\'></div>").css("border", "solid");
Notice that the css method is still acting on the p element, not on the div element, because the wrap method returned the targeted p element after wrapping it.

二、在主题中使用jQuery

Adding JavaScript via a Theme .info File
The most convenient but least flexible way to include JavaScript files is to include a line in your theme’s .info file. Let’s add an effect to your site that emphasizes the logo of your site by making it fade out and then fade in again when a page is loaded. Place the following JavaScript code in a file called logofade.js in your current theme. For example, if you are using the Bartik theme, it would be at themes/bartik/logofade.js.
包含JavaScript文件的最方便的方式，就是在你的主题的.info文件中添加一行代码，不过这种方式也有一个缺点，那就是缺乏灵活性。让我们为你的站点添加一个效果，用来强调你站点的标识语，在一个页面被加载时，先把它淡出，接着再把它渐显出来。把下面的JavaScript代码放在你主题下的一个名为logofade.js的文件中。例如，如果你使用的主题为Bartik，那么它就位于themes/Bartik/logofade.js。
// Selects the theme element with the id "logo", fades it out,
// then fades it in slowly.
jQuery(document).ready(function(){
jQuery("#logo").fadeOut("fast").fadeIn("slow");
});

The JavaScript file is in place; now we just have to tell Drupal to load it. Add the following line to your current theme’s .info file:

JavaScript文件已经有了；现在我们只需要告诉Drupal加载它就可以了。向你的当前主题的.info文件中添加下面一行代码：

scripts[] = logofade.js

The last step is to make Drupal reread the .info file so that it will see that it needs to load logofade.js. To do that, go to Appearance, temporarily switch to a different theme, and then switch back.

最后一步就是让Drupal重读.info文件，这样它就会看到它需要加载logofade.js了。为了实现这一点，导航到“管理➤站点构建➤主题”，临时的转换到一个不同的主题上，然后再转换回来。

This method of adding JavaScript is useful if the JavaScript will be loaded on every single page of your web site. In the next section, you’ll see how to add JavaScript only when a module that uses it is enabled.

如果对于你网站的每个页面，都需要为其加载某一JavaScript文件的话，那么这个方法还是非常有用的。在接下来的一节中，你将看到如何实现，只有当使用JavaScript的模块被启用时，才加载它。

三、在模块内使用jQuery

The following module does just that,using jQuery to identify and hide the blocks in the left and right sidebar regions and providing a helpful button that will bring the blocks back. Here’s sites/all/modules/custom/blockaway/blockaway.info:
下面的模块实现了这一点，它使用jQuery来对左右边栏区域中的区块进行标识和隐藏，并提供了一个有用的按钮用来将区块重新显示出来。

name = Block-Away
description = Uses jQuery to hide blocks until a button is clicked.
package = Pro Drupal Development
core = 7.x
files[]=blockaway.module

And here’s sites/all/modules/custom/blockaway/blockaway.module:

<?php
/**
* @file
* Use this module to learn about jQuery.
*/
/**
* Implements hook_init().
*/
function blockaway_init() {
drupal_add_js(drupal_get_path('module', 'blockaway') .'/blockaway.js');
}

All the module does is include the following JavaScript file, which you can put at
sites/all/modules/custom/blockaway/blockaway.js:

/**
* Hide blocks in sidebars, then make them visible at the click of a button.
*/
jQuery(document).ready(function() {
// Get all div elements of class 'block' inside the left sidebar.
// Add to that all div elements of class 'block' inside the
// right sidebar. Check your theme’s page.tpl.php file to see what
// selectors you should use – the following are for garland.
var blocks = jQuery('#sidebar-first div.block, #sidebar-second div.block');
// Hide them.
blocks.hide();
// Add a button that, when clicked, will make them reappear.
jQuery('#sidebar-first').prepend('<div id="collapsibutton">Show Blocks</div>');
jQuery('#collapsibutton').css({
'width': '90px',
'border': 'solid',
'border-width': '1px',
'padding': '5px',
'background-color': '#fff'
});
// Add a handler that runs once when the button is clicked.
jQuery('#collapsibutton').one('click', function() {
// Button clicked! Get rid of the button.
jQuery('#collapsibutton').remove();
// Display all our hidden blocks using an effect.
blocks.slideDown("slow");
});
});

When you enable the module on the Modules page, any blocks you have visible should disappear and be replaced with a plain button.
导航到“管理➤站点构建➤模块”，启用该模块，你以前可见的所有区块都消失了，被替换为了一个没有格式的按钮。

三、可覆写的JavaScript (Overridable JavaScript)
The code in blockaway.module is simple and easy to understand. It just makes sure the blockaway.js file is included.However, if the module were more complicated, it would be friendlier to others to put the drupal_add_js() function call in a theme function instead of in hook_init(). That way, those who wanted to use your module but customize the JavaScript code in some way could do so without touching your module code at all (see Chapter 9 for how the theme system works its magic). The code that follows is a revised version of blockaway.module that declares a theme function using hook_theme(), moves the drupal_add_js() call into the theme function, and calls the theme function from hook_init(). The functionality is the same, but savvy developers can now override the blockaway.js file.
blockaway.module中的代码非常简单并易于理解。它只负责包含blockaway.js文件。然而，如果模块更加复杂一点的话，那么将 drupal_add_js()函数调用放在一个主题函数中，来取代放在hook_init()中，这对其他开发者来说会更加友好。这样，对于那些想使用你的模块，同时又想用一些方式来定制JavaScript代码的用户，他们无需修改你模块的源代码就可以完成定制工作（关于主题系统的更多详细，可参看第 8章）。下面的代码是blockaway.module的修订版本，它使用hook_theme()声明了一个主题函数，并将 drupal_add_js()调用移到了该主题函数中，而在hook_init()中调用这个主题函数。功能是一样的，但是现在聪明的开发者就可以对 blockaway.js文件进行覆写了。

<?php
/**
* @file
* Use this module to learn about jQuery.
*/
/**
* Implements hook_init().
*/
function blockaway_init() {
theme('blockaway_javascript');
}
/**
* Implements hook_theme().
* Register our theme function.
*/
function blockaway_theme() {
return array(
'blockaway_javascript' => array(
'arguments' => array(),
),
);
}
/**
* Theme function that just makes sure our JavaScript file
* gets included.
*/
function theme_blockaway_javascript() {
drupal_add_js(drupal_get_path('module', 'blockaway') .'/blockaway.js');
}

覆写的JavaScript文件：
Let’s go ahead and see if this approach works. We’re going to override the JavaScript provided by the module with JavaScript provided by the theme. Copy sites/all/modules/custom/blockaway/lockaway.js to your current theme—for example, themes/bartik/ blockaway.js. Let’s change the JavaScript file slightly so that we’ll know which JavaScript file is being used. Change the effect from slideDown("slow") to fadeIn(5000); this will fade in the blocks over a period of five seconds. Here is the new file:
让我们继续前进，来看看这种方法是否可以工作。我们将使用主题提供的JavaScript，来覆写模块提供的 JavaScript。把sites/all/modules/custom/blockaway/blockaway.js拷贝到你的当前主题下 ----例如，themes/bartik/blockaway.js。让我们稍微的修改一下JavaScript文件，这样我们就知道正在使用的是哪个JavaScript文件。将特效从slideDown("slow")改为fadeIn(5000)；这将使用5秒钟的时间来渐进的显示区块。下面是新文件：

/**
* Hide blocks in sidebars, then make them visible at the click of a button.
*/
jQuery(document).ready(function() {
// Get all div elements of class 'block' inside the left sidebar.
// Add to that all div elements of class 'block' inside the
// right sidebar.
var blocks = jQuery('#sidebar-first div.block, #sidebar-second div.block');
// Hide them.
blocks.hide();
// Add a button that, when clicked, will make them reappear.
jQuery('#sidebar-first').prepend('<div id="collapsibutton">Show Blocks</div>');
jQuery('#collapsibutton').css({
'width': '90px',
'border': 'solid',
'border-width': '1px',
'padding': '5px',
'background-color': '#fff'
});
// Add a handler that runs once when the button is clicked.
jQuery('#collapsibutton').one('click', function() {
// Button clicked! Get rid of the button.
jQuery('#collapsibutton').remove();
// Display all our hidden blocks using an effect.
blocks.fadeIn("5000");
});
});

The last change we need to make is to tell Drupal to load this new JavaScript file instead of the one in sites/all/modules/custom/blockaway. We do that by overriding the theme function. Add the following function to the template.php file of your theme (if your theme doesn’t have a template.php file,it’s okay to create one):
我们最后要做的修改就是告诉Drupal加载这个新文件，从而取代sites/all/modules/custom/blockaway中的文件。我们通过覆写主题函数来实现这一点。向你主题的template.php文件中（如果你的主题还没有一个template.php文件，那么你需要创建一个），添加下面所给的函数：

/**
* Override theme_blockaway_javascript() with the
* following function.
*/
function bartik_blockaway_javascript() {
drupal_add_js(path_to_theme() . '/blockaway.js');
}

Note:Change the name of the preprocess function so that it uses the name of the theme you are using. In the preceding example, I am using the Bartik theme.

Visit the Modules page to rebuild the theme registry so your changes will be recognized. When you visit a page in your web browser, you should see the Show Blocks button, and clicking it should reveal the blocks via a gradual fade-in effect instead of the slide effect we were using earlier. Congratulations!

现在，当你使用浏览器来访问一个页面时，你应该能够看到“显示区块”按钮了，点击这个按钮，将会使用一个渐进的淡入效果来显示区块，而不是我们前面所用的幻灯效果。恭喜恭喜！
You’ve learned how to use jQuery in your module, how to write it in a way that is friendly to themers and other developers, and coincidentally, how to cleanly override or enhance JavaScript files provided by other module developers who have been equally courteous.

你已经学会了如何在你的模块中使用jQuery，如何使用友好的方式编写jQuery以方便主题制作者和其他的开发者，同时，你还学会了如何覆写或增强其它模块中的JavaScript文件，这里假定这些模块中的JavaScript文件可被覆写。
Before we leave this example, let me demonstrate how to override a template file. First, remove the bartik_blockaway_javascript() function that you added to the template.php file. Next, in your current theme, create an empty file called blockawayjavascript. tpl.php. For example, if you are using the Bartik theme, create themes/bartik/blockaway-javascript.tpl.php. Don’t put anything inside this file.
Now visit the Modules page. The act of visiting this page will rebuild the theme registry. Drupal will find the template file and use it instead of the theme function in your module. The result is that blockaway.js will never be loaded; you’ve essentially commented out the theme function by creating an empty template file (recall from Chapter 9 that, when building the theme registry, Drupal will look for a template file and then for theme functions).

在我们结束这个例子的学习以前，让我演示一下如何使用模板文件进行覆写。首先，删除你添加到template.php文件中的 bartik_blockaway_javascript()函数。接着，在你的当前主题中，创建一个空文件 blockawayjavascript.tpl.php。例如，如果你使用的是Bartik主题，那么创建的就是themes/Bartik/blockaway-javascript.tpl.php。不要在这个文件中放置任何东西。现在导航到模块页面，访问这个页面的作用就是重新构建主题注册表。Drupal 将找到该模板文件，并使用它来替代你模块中的主题函数。最终的结果就是永远也不会加载blockaway.js了；通过创建一个空的模板文件，你实质上就是注释掉了该主题函数。

Now, add the following to your blockaway-javascript.tpl.php file:

现在，向你的blockaway-javascript.tpl.php文件中添加以下代码：

<?php drupal_add_js(path_to_theme() . '/blockaway.js'); ?>

When you reload your page, you should see that the JavaScript file is now loading. Do you see how these techniques can be useful for substituting your own enhanced JavaScript file in a third-party module or for preventing some JavaScript from loading?

当你重新加载页面时，你应该可以看到JavaScript文件现在加载进来了。如果你想将第3方模块中的JavaScript文件替换为你的增强版本，或者想阻止加载一些JavaScript文件时，这里所讲的这些技术还是很有用处的。

You cannot call drupal_add_js() from inside page.tpl.php or any theme functions that are called in its preprocessing (such as blocks), because they are executed too late in the page building process. See modules/block/block-admin-display-form.tpl.php for an example of a core template file that adds JavaScript.

你不能在page.tpl.php中调用drupal_add_js()，对于其它的一些主题函数，如果是在它的预处理阶段调用的话（比如区块），那么也不能使用drupal_add_js()。为什么呢？这是因为它们在页面构建流程中执行的顺序过于靠后。核心模板文件是如何添加 JavaScript的，可参看modules/block/block-admin-display-form.tpl.php。

本文摘自 Drupal爱好者，谢谢！

帐号		自动登录	找回密码
密码			注册

[Drupal教程] Drupal7中的jQuery的使用

相关帖子