Cómo agregar CSS y Javascript para personalizar formularios Drupal7
La personalización de formularios de Drupal7 es más o menos la misma que la de Drupal6, pero existen algunas diferencias. En esta ocasión hablaré sobre cómo personalizar formularios en Drupal7. Cree un nuevo módulo "form_theme" y luego cree un formulario como se muestra a continuación:
Mi nombre es [FORM INPUT] [FORM INPUT] y tengo [FORM INPUT] años.
Los valores predeterminados de estos tres elementos del formulario muestran "Nombre", "Apellido" y "Edad" en orden. Cuando el usuario hace clic en una ENTRADA, el valor del elemento del formulario está vacío y luego puede escribir. lo que quieras.
Esta función simple implica:
Formulario temático
Agregar JQuery (JavaScript) al formulario
Agregar CSS { 3 u& v2 ~ # Z
El objetivo principal de este tutorial es aprender a crear un tema para el formulario. No introduciré demasiado código que no esté relacionado con el tema. Asimismo, si quieres entender este tutorial, primero debes saber:
Cómo crear un módulo en Drupal7
Cómo usar drupal_get_form() para crear un formulario en Drupal L. , k% L+ ]6 @
No explicaré demasiado sobre el código CSS y JQuery en el tutorial. Puedes simplemente copiarlo y pegarlo localmente para experimentar. Jaja, mi propósito es cómo agregar CSS y JQuery en Drupal.
; V8 L' p, l' R; V, r& h
¡Empecemos!
Paso uno: use hook_menu() para registrar una ruta para el formulario
Primero necesito registrar una ruta de página para mostrar el formulario. La siguiente es la implementación de hook_menu(). : ; L! ] & j! G: ~9 i, P: @
función form_theme_menu()
{% A' A / V) E6 Y / D
$menu['form_theme'] = matriz- L( C9 Q8 b, B& O# y
(5 L: V; A: z9 Y5 V& F s ) z
'title' => 'Theming Forms',# ^, @* y" ~# E$ s
'description' => 'Practicando formas temáticas en Drupal 7 ',6 j* _8 q. V* y% {: E* S2 Y- W) ]
'page callback' => 'drupal_get_form',
'argumentos de página' => array('form_theme_form'),
'access callback' => TRUE,
);
return $menu;9 R2 l- k+ U8 `$ Z. q, j S* ~# Q
}- b1 U( ?) f8 D! W4 h# K3 b >$ w" u1 g) p5 |8 f0 a
; i% L* q7 z* ]' ?$ ^
Paso 2: ¡Defina la forma! _' D0 {/ R F$ U; / f9 t2 ^
En mi formulario, necesito tres campos de texto. El formulario se define de la siguiente manera:
$form['first_name'] = matriz
(# `% w. I7 N( [! c! i5 V6 G
'# tipo' => 'campo de texto' ,3 {3 e) ~ h* }- @5 s
);
$form['last_name'] = array4 B1 w' a ( U3 l9 m) j2 Y
(+ c, U$ e/ c( T+ S
'#type' => 'campo de texto',
);; o% T. G- h.
$forma['edad'] = matriz
(
'#tipo' => ' textfield',
'#maxlength' => 3,
>9 s: g7 |6 p" g" k# v
Oye, el código es muy simple. He creado estos elementos de formulario con poca decoración u otra configuración.
Luego, necesito agregar CSS y Javascript al formulario.
Drupal7 tiene un nuevo atributo, #attached, que puedo agregar a través de él. El código es el siguiente:
$ Z ]- H6 M- B6 v0 s- h0 p: c* [
// Obtener la ruta al módulo
$path = drupal_get_path('module', 'form_theme') ;3 v A& `7 M, d
// Adjunte el CSS y JS al formulario
$form['#attached'] = array7 P* _0 l2 @% | ' @
(
'css' => array8 E2 S8 q. q! p! r
(
'tipo' => 'archivo',$ e/ J4 u, Z* x" i6 O3 W
'datos' => $ruta . '/form_theme.css',
),
'js' => matriz
(
'tipo' => 'archivo',; u% U. h2 q) Q+ G$ p9 ~ # o
'datos' => $ruta '/form_theme.js',5 W1 X* H* I" T2 n' u* k1 d
),
);; x/ j' W4 Z: D+ T8 N >5 J' P3 o; _8 Q, w: k0 N& K; C v( w0 ?0 E
Este método tiene una gran ventaja en comparación con drupal_add_js() y drupal_add_css(), es decir, otros módulos pueden realizar modificaciones basadas en los estilos y scripts del módulo.
/ \( o/ V2 {6 O& h! N$ u
Finalmente, devuelve mi formulario $form, el código es el siguiente:
función form_theme_form($form, &$form_state)
{7 M/ x! j
$form['first_name'] = matriz
(
'#type' => 'textfield',
) ;
$form['last_name'] = matriz
(1 H* u; X4 K& V
'#type' => 'campo de texto', # u ! q% v3 p' @" V+ Q4 e- w4 }
);
$form['edad'] = matriz
() m1 K : a5 }5 I7 v( x0 g
'#type' => 'textfield',
'#maxlength' => 3,
); q; a" u* D8 v1 U% ]0 a3 M2 t
// Obtener la ruta al módulo
$path = drupal_get_path('module', 'form_theme ') ;+ I9 e) M# G+ Q8 l ]; S
// Adjunte el CSS y JS al formulario
$form['#attached'] = array
(7 o, N- U# ]& R$ H" l9 b
'css' => matriz
(- b6 U7 M& H6 l4 o9 R ; i" J
'tipo' => 'archivo',7 f+ U0 q* i. K! g/ M5 a
'datos' => $ ruta '/ form_theme.css',
),/ y- g0 B: @* _+ B7 V) c3 ^4 ^
'js' => matriz
(
'tipo' => 'archivo',- ?2 p6 a' }! n; k3 I
'datos' => $ruta . ' /form_theme.js ',
),6 P6 }' l \' s; q# l+ w7 e5 \
);9 \& w4 f!
return $form;9 Y: l- Z! g( }# G$ N4 [
} >. D" J8 ?! g5 x8 U7 J6 p' E: Q2 _) u: a
8 Z: E) N' |+ K. G1 v
Paso 3: Utilice hook_theme() para registrar una función de tema
A partir de Drupal6, la función del tema debe registrarse a través de hook_theme(), pero todavía existen algunas diferencias sutiles entre Drupal6 y Drupal7. En Drupal7, la función del tema del formulario no usa "argumentos", sino que usa un "elemento de representación" con solo "formulario" como valor.
Al registrar funciones de tema, debe mantener el índice coherente con las funciones de formulario que ha definido. El código es el siguiente:) c! v- b! p" m9 n) X3 M! G/ ~$ M7 ^
función form_theme_theme()
{" |1 C, f4 Q. S
matriz de retorno: x; k; @( }/ l) J' W% ?
(
'form_theme_form' => matriz
(
'render element' => 'formulario', Y" j3 @3 n" g X1 a
),
);; z: e( J7 m6 j: d* t" z7 `
} >>p >
Como puede ver, ya registré una función de tema. El nombre de la función de tema es muy importante, porque la función de tema tiene el mismo nombre que el formulario, y Drupal llamará automáticamente a la función de tema al implementar el. form. No necesito agregarlo. #theme en el formulario $form que definí, esto es redundante 3 b: \# q; Escribe la función temática & c3 O0 d9 L7. s& K- H ^
En Drupal7, hay varios puntos a tener en cuenta al escribir funciones temáticas. Estos son:
La función solo tiene. un parámetro, una matriz llamada $variables. Hay un índice de formulario y el valor de este índice incluye todos los elementos del formulario que haya definido.
Todos los elementos del formulario deben pasarse como parámetros a drupal_render(). function. Esta función convierte una matriz PHP en. HTML, y agregar Javascript y css lo hará automáticamente, solo necesita pasar estos parámetros.
Al final de escribir la función del tema, debe pasar los elementos de formulario restantes. drupal_render_children(), para que los elementos de formulario restantes u ocultos se puedan convertir a HTML. Esta es una gran diferencia con Drupal6, pasamos $form directamente a drupal_render(), pero en. Drupal7, este es el caso. Hacerlo provocará un bucle infinito y no aparecerá ningún mensaje de error 2 i6 I6 ?* L1 x4 V9 Z: U
La función del tema lleva el nombre de "theme_" más ". form_theme_form" que registramos arriba. de.
El código es el siguiente:
función theme_form_theme_form($variables)2 W8 q7 I% N0 n " f: g
{( a# u1 L, l4 X1 s3 J
// Aislar la definición del formulario de la matriz $variables
$form = $ variables[' form'];' t8 B$ u6 y4 S: W: j
$output = '
' . ';
// Coloque toda la estructura en un div que pueda usarse para
// propósitos CSS. >$output .= '
// Cada uno de los fragmentos de texto está envuelto en una etiqueta
// para permitir debe flotar hacia la izquierda ( g: _' \8 O- R' B. }) ~# }% G
$output .= '' t('Mi nombre es') . '< /span>';
// Los elementos del formulario se representan con drupal_render()/ ?# M# J3 v" k* p }5 O1 v
$output . = drupal_render( $formulario['first_name']);" N7 N$ w7 F! [
$salida .= drupal_render($formulario['last_name']);
$ salida .= '' . t('y yo soy') '';" g c6 e4 v, C# y/ t# c% K
$salida .= drupal_render($ formulario['edad']);8 ] Q* s, M' k
$salida .= '' . >';
$output .= '
// Pase los elementos restantes del formulario a través de drupal_render_children()
$salida .= drupal_render_children($form);! X% r2 L9 c* }
// devuelve la salida
devuelve $salida;
}8 L" N. n4 x8 J$ L7 l% H >1 T5 ^$ J5 t3 u, z
En este punto, he completado la mayor parte del contenido, definiendo la forma , registrar la función del tema, implementar funciones del tema.
Pero todavía no he agregado CSS ni Javascript.