Drupal 7 开发内部培训资料, 分头诗人

在Drupal 7创建一个新的webform元素.-- 滑动条。

猪跑啦独家原创专稿,欢迎您转载本文,转载请注明来源。

有时候Webform默认字段类型并不能满足我们,我们希望他们有一些新的元素,如滑动条。下面将告诉你如何实现。

 

 

定义新的webform组件

首先你需要的是自定义一个模块。
定义一个新字段类型/组件需要使用钩子hook_webform_component_info()。本指南将通过使用jQuery UI添加一个新的滑块组件。

<?php
function MODULE_NAME_webform_component_info() {
  $components = array();
  $components['slider'] = array(
    'label' => t('Slider'),
    'description' => t('Create a slider for users to select a value.'),
    'features' => array(
      'csv' => TRUE,
      'email' => TRUE,
      'email_address' => FALSE,
      'email_name' => FALSE,
      'required' => FALSE,
      'title_display' => FALSE,
      'title_inline' => FALSE,
      'conditional' => FALSE,
      'group' => FALSE,
      'spam_analysis' => FALSE,
      'attachment' => FALSE,
    ),
    'file' => 'components/slider.inc',
  );
  return $components;
}
?>

数组中有很多元素,这里大概介绍。
CSV
如果设置为 TRUE, 组件的值将被传递到CSV输出。
Email
如果设置为 TRUE, 组件的值将包含在%email_values token里面。
Email address
如果设置为 TRUE, 组件的值就能用在email地址中的to/from 里面。
Email name
如果设置为 TRUE, 组件的值就能用在email 名称里。
Required
如果设置为 TRUE, 定义组件是否必填。
Title display
如果设置为 TRUE, 标题的字段将显示。
Title inline
如果设置为 TRUE 同时 Title display 也设置为 TRUE, 标题将与组件同行显示。
Conditional
如果设置为 TRUE, 该组件可以被用作一个条件值,改变其他字段/组件的输出。
Group
如果设置为 TRUE, 该该组件可用于集合多个组件。
Spam analysis
如果设置为 TRUE, 该组件持有数据,可以用于垃圾邮件分析模块。
Attachment
如果设置为 TRUE, 该组件让form支持文件上传。

这个file 元素不是必须的,如果设置了file,意味着所有的相关函数都写在file指定的文件里面,这样就便于管理,所以推荐用file元素。

好了,创建file指定的文件:components/slider.inc

 

_webform_defaults_component() 函数:

<?php
function _webform_defaults_slider() {
  return array(
    'name' => '',
    'form_key' => NULL,
    'pid' => 0,
    'weight' => 0,
    'value' => '',
    'mandatory' => 0,
    'extra' => array(
      'field_prefix' => '',
      'field_suffix' => '',
    ),
  );
}
?>

extra的数组你有权利定义任何额外的信息,丰富你的组件。

_webform_theme_component() 函数:

<?php
function _webform_theme_slider() {
  return array(
    'webform_display_slider' => array(
      'render element' => 'element',
    ),
  );
}
?>

这个函数允许您添加额外的信息到 hook_theme().

_webform_edit_component() 函数:

<?php
function _webform_edit_slider($component) {
  $form = array();
  $form['extra']['field_prefix'] = array(
    '#type' => 'textfield',
    '#title' => t('Left'),
    '#default_value' => $component['extra']['field_prefix'],
    '#size' => 60,
    '#required' => TRUE,
    '#maxlength' => 255,
    '#weight' => 1.1,
    '#parents' => array('extra', 'field_prefix'),
    '#description' => t('Text placed to the left of the slider'),
  );
  $form['extra']['field_suffix'] = array(
    '#type' => 'textfield',
    '#title' => t('Right'),
    '#default_value' => $component['extra']['field_suffix'],
    '#size' => 60,
    '#required' => TRUE,
    '#maxlength' => 255,
    '#weight' => 1.2,
    '#parents' => array('extra', 'field_suffix'),
    '#description' => t('Text placed to the right of the slider'),
  );
  return $form;
}
?>

在这里你可以通过使用form API定义你的额外的表单元素到组件的编辑页面。

 

_webform_render_component() 函数:

<?php
function _webform_render_slider($component, $value = NULL, $filter = TRUE) {
  $node = isset($component['nid']) ? node_load($component['nid']) : NULL;
  drupal_add_library('system', 'ui.slider');
  drupal_add_js('jQuery(document).ready(function(){jQuery("#webform-slider-'. $component['form_key'] .'").slider({
    min: 1,
    max: 5,
    step: 1,
    value: jQuery("#"+ jQuery("#webform-slider-'. $component['form_key'] .'").attr("data-rel") +" input").val(),
    slide: function(event, ui) {
      jQuery("#"+ jQuery("#webform-slider-'. $component['form_key'] .'").attr("data-rel") +" input").val(ui.value);
    }
  });});', 'inline');
  $slider = '<div class="slider-item slider-item-first">'. ($filter ? _webform_filter_xss($component['extra']['field_prefix']) : $component['extra']['field_prefix']) .'</div>';
  $slider .= '<div class="slider-item slider" id="webform-slider-'. $component['form_key'] .'" data-rel="webform-component-'. $component['form_key'] .'"></div>';
  $slider .= '<div class="slider-item slider-item-last">'. ($filter ? _webform_filter_xss($component['extra']['field_suffix']) : $component['extra']['field_suffix']) .'</div>';
  $element = array(
    '#type' => 'hidden',
    '#default_value' => $filter ? _webform_filter_values($component['value'], $node, NULL, NULL, FALSE) : $component['value'],
    '#required' => $component['mandatory'],
    '#weight' => $component['weight'],
    '#prefix' => '<div class="slider-wrapper clearfix">'. $slider .'</div>',
    '#theme_wrappers' => array('webform_element'),
  );
  if (isset($value)) {
    $element['#default_value'] = $value[0];
  }
  else {
    $element['#default_value'] = 3;
  }
  return $element;
}
?>

_webform_render_component()函数定义了表单元素发送到webform本身。

对于滑块元素,我使用一个隐藏的字段来保存它的值,并通过jQuery添加滑块效果。

_webform_display_component() 函数:

<?php
function _webform_display_slider($component, $value, $format = 'html') {
  return array(
    '#title' => $component['extra']['field_prefix'] .' / '. $component['extra']['field_suffix'],
    '#weight' => $component['weight'],
    '#theme' => 'webform_display_slider',
    '#theme_wrappers' => $format == 'html' ? array('webform_element') : array('webform_element_text'),
    '#format' => $format,
    '#value' => $value[0],
    '#translatable' => array('title', 'field_prefix', 'field_suffix'),
  );
}
?>

_webform_display_component()  函数定义了组件的值如何显示。因为使用一个自定义主题函数 #theme,所以#theme对应的函数,也必须得定义。

<?php
function theme_webform_display_slider($variables) {
  $element = $variables['element'];
  $value = $element['#value'];
  return trim($value) !== '' ? $value : ' ';
}
?>

_webform_table_component() 函数:

<?php
function _webform_table_slider($component, $value) {
  return check_plain(empty($value[0]) ? '' : $value[0]);
}
?>

这定义了这个值是显示在reports table里面。

_webform_csv_headers_component() & _webform_csv_data_component() 函数:

这两个函数定义了组件值从Webform CSV输出显示。

<?php
function _webform_csv_headers_slider($component, $export_options) {
  $header = array();
  $header[0] = '';
  $header[1] = $component['extra']['field_prefix'];
  $header[2] = $component['extra']['field_suffix'];
  return $header;
}
?>

有3行标题,你可以输入数据,作为CSV输出的内容。

<?php
function _webform_csv_data_slider($component, $export_options, $value) {
  return !isset($value[0]) ? '' : $value[0];
}
?>

列出了完整的可用函数,查看Webform模块文件夹里面的文件webform.api.php。这个文件已经所有可用的组件钩子。