如何添加CSS和Javascript定制Drupal7表单

显示全部楼层 · 发表于 10-13-2011 02:13

Drupal7表单定制和Drupal6大致相同，但是也有一些区别。这次我就来说说Drupal7是如何定制表单的。新建一个“form_theme”模块，然后创建一个表单，显示如下：
My name is [FORM INPUT] [FORM INPUT] and I am [FORM INPUT] years old.
这三个表单元素的默认值依次显示“First name”，“Last name”和“Age”,当用户点击某个INPUT时，该表单元素的值为空，然后你就能随意书写了。
这个简易的功能涉及到：

主题化表单
给表单添加JQuery(JavaScript)
给表单添加CSS
& M0 g. B7 D3 x- @8 ]

这个教程的主要目的是学习如何主题化表单，我不会对一些与主题化不相关的代码做过多地介绍。同样地，如果你想看懂这篇教程，你必须先知道：

怎样在Drupal7中创建一个模块
怎样在Drupal中使用drupal_get_form()创建一个表单
# a( e# [4 G; a' L5 Q. n

我也不会对教程中的CSS和JQuery代码做过多的讲解，你可以直接复制并粘贴到本地去试验。呵呵，我的目的是如何将CSS和JQuery添加进Drupal中。
开始吧！
第一步：使用hook_menu()为表单注册一个路径
我需要先注册一个页面路径好展现表单，下面是hook_menu()的实现：

<?php
function form_theme_menu()
{
$menu['form_theme'] = array
(
      'title' => 'Theming Forms',
      'description' => 'Practicing theming forms in Drupal 7',
      'page callback' => 'drupal_get_form',
      'page arguments' => array('form_theme_form'),
      'access callback' => TRUE,
);
return $menu;
}
?>

第二步：定义表单
在我的表单里，我需要三个textfield，表单定义如下：

<?php
$form['first_name'] = array
(
'#type' => 'textfield',
);
$form['last_name'] = array
(
'#type' => 'textfield',
);
$form['age'] = array
(
'#type' => 'textfield',
'#maxlength' => 3,
);
?>

嘿嘿，代码十分简洁吧。我已经创建了这些表单元素，它们没什么修饰或其它配置。
然后，我需要添加CSS和Javascript到该表单。Drupal7有个新属性，#attached，我能通过它添加，代码如下：

<?php
// Get the path to the module
$path = drupal_get_path('module', 'form_theme');
// Attach the CSS and JS to the form
$form['#attached'] = array
(
'css' => array
(
      'type' => 'file',
      'data' => $path . '/form_theme.css',
),
'js' => array
(
      'type' => 'file',
      'data' => $path . '/form_theme.js',
),
);
?>

这种方法相比drupal_add_js()和drupal_add_css()有个很大的好处，就是其它模块可以在该模块的样式和脚本的基础上做修改。
最后，返回我的$form表单,代码如下：

<?php
function form_theme_form($form, &$form_state)
{
$form['first_name'] = array
(
      '#type' => 'textfield',
);
$form['last_name'] = array
(
      '#type' => 'textfield',
);
$form['age'] = array
(
      '#type' => 'textfield',
      '#maxlength' => 3,
);
// Get the path to the module
$path = drupal_get_path('module', 'form_theme');
// Attach the CSS and JS to the form
$form['#attached'] = array
(
      'css' => array
      (
         'type' => 'file',
         'data' => $path . '/form_theme.css',
      ),
      'js' => array
      (
         'type' => 'file',
         'data' => $path . '/form_theme.js',
      ),
);
return $form;
}
?>

第三步：用hook_theme()注册一个主题函数
从Drupal6开始，主题函数就需要通过hook_theme()注册，但是在Drupal6和Drupal7中还是有些细微的区别。在Drupal7中，表单的主题函数不是使用“arguments”，而是使用仅仅只有“form”一个值的“render element”。在注册主题函数时，你必须让索引和你已经定义的表单函数保持一致。代码如下：

<?php
function form_theme_theme()
{
return array
(
      'form_theme_form' => array
      (
         'render element' => 'form'
      ),
);
}
?>

正如你所见，我已经注册了一个主题函数。主题函数的命名十分重要，因为这个主题函数跟表单有相同的名称，Drupal在实现这个表单时会自动调用该主题函数。我也不需要添加#theme到我定义的表单$form中，这是多余的。
第四步：写主题函数
在Drupal7中，写主题函数，有几个注意点。它们是：

函数只有一个参数，命名为$variables的数组。$variables有一个form索引，该索引的值就包括所有你已定义的表单元素。
所有的表单元素必须要作为参数传给drupal_render()函数。这个函数能将一个PHP数组转换成HTML，并且将Javascript和css添加进去。这些Drupal会自动帮你完成，你仅仅需要传递这些参数就行了。
在写主题函数的最后，你必须将剩余的表单元素传给drupal_render_children()函数，这样才能将剩下的或隐藏的表单元素转换成HTML。这是跟Drupal6一个很大的不同。在Drupal6中，我们直接传递$form给drupal_render()，但是在Drupal7中，这样做就会导致死循环，而且不会出现任何错误提示。- A7 F4 [% Z8 G" L9 |: }, f2 j0 M

主题函数是以“theme_”加上我们上面注册过“form_theme_form”命名的。代码如下：

<?php
function theme_form_theme_form($variables)
{
// Isolate the form definition form the $variables array
$form = $variables['form'];
$output = '<h2>' . t('Please enter your information below') . '</h2>';
// Put the entire structure into a div that can be used for
// CSS purposes
$output .= '<div id="personal_details">';
// Each of the pieces of text is wrapped in a <span>
// tag to allow it to be floated left
$output .= '<span>' . t('My name is') . '</span>';
// Form elements are rendered with drupal_render()
$output .= drupal_render($form['first_name']);
$output .= drupal_render($form['last_name']);
$output .= '<span>' . t('and I am') . '</span>';
$output .= drupal_render($form['age']);
$output .= '<span>' . t('years old.') . '</span>';
$output .= '</div>';
// Pass the remaining form elements through drupal_render_children()
$output .= drupal_render_children($form);
// return the output
return $output;
}
?>

到这里，我已经完成大部分的内容，定义表单，注册主题函数，实现主题函数。但是我还没添加CSS和Javascript。
第五步：创建CSS和Javascript文件
在第二步中我添加了CSS和JS路径，这两个文件都在form_theme模块的根目录。CSS代码如下：

#personal_details span, #personal_details div
{
float:left;
}

#personal_details .form-item-first-name, #personal_details .form-item-last-name
{
width:115px;
}

#edit-first-name, #edit-last-name
{
width:100px;
}

#personal_details .form-item-age
{
width:50px;
}

#edit-age
{
width:35px;
}

#personal_details span
{
margin-right:5px;
padding-top:5px;
}

Javascript代码如下：

// We wrap the entire code in an anonymous function
// in order to prevent namespace collisions, and to
// allow for jQuery to be set in a safe mode where
// it will not collide with other javascript libraries.
// While this is the proper way to do it in Drupal 7,
// this method is actually good to use in Drupal 6 as
// well, for the same reasons.
(function($)
{
// In Drupal 6, each element of Drupal.behaviors
// was a function that was executed when the
// document was ready. In Drupal 7, each element
// of Drupal.behaviors is an object with an
// element 'attach' (and optionally an element
// 'detach'), which is executed when the document
// is ready
Drupal.behaviors.formTheme = {
attach:function() {
// First, define an empty array
var defaults = [];
// Next, add three elements to the array,
// one for each of the form elements. The value
// is of the array element is set as the default
// text. This text is run through Drupal.t(),
// which is the Drupal JavaScript equivalent
// of the Drupal PHP t() function, and allows
// for translating of text in a JavaScript document
defaults["#edit-first-name"] = Drupal.t("First Name");
defaults["#edit-last-name"] = Drupal.t("Last Name");
defaults["#edit-age"] = Drupal.t("Age");
// Next we loop through each of the elements of the array
var element;
for(element in defaults)
{
// We wrap the body in the following if() statement
// as each element in an array will also have a
// prototype element. If you don't understand this,
// don't worry. Just copy it. It will make your
// for(A in B) loops run better.
if(defaults.hasOwnProperty(element)) {
// 1) Set a placeholder in the form element
// 2) Set the CSS text color to grey for the placeholder
// 3) Attach an onfocus and onblur listener to each element
$(element).val(defaults[element]).css("color", "grey").focus(function()
{
// This is entered on focus. It checks
// if the value of the form element is
// the default value of the placeholder,
// and if it is, it clears the value and
// sets the text color to black,as the
// entered text will be the actual text
// and not the greyed out placeholder text.
var key = "#" + $(this).attr("id");
if($(this).val() === defaults[key]) {
$(this).css("color", "black").val("");
}
}).blur(function()
{
// This is entered on blur, when the element
// is exited out of. It checks if the element
// is empty, and if it is, it sets the default
// placeholder text back into the element, and
// changes the text color to the grey placeholder
// text color.
if($(this).val() == "") {
var key = "#" + $(this).attr("id");
$(this).css("color", "grey").val(defaults[key]);
}
});
}
}
}
};
}(jQuery));

好了，你可以试试看。
原文出自：http://junepeng.info/zh/node/28

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

[Drupal教程] 如何添加CSS和Javascript定制Drupal7表单

相关帖子