Cómo agregar CSS y Javascript para personalizar formularios Drupal7
Mi nombre es [ENTRADA DE FORMULARIO] [ENTRADA DE FORMULARIO] y mi edad es [ENTRADA DE FORMULARIO]. Los valores predeterminados de estos tres elementos del formulario son "Nombre", "Apellido" y "Edad" respectivamente. Cuando el usuario hace clic en una ENTRADA, el valor del elemento del formulario está vacío. Cuando el usuario hace clic en una ENTRADA, el valor del elemento está vacío y luego puedes escribir lo que quieras.
Esta característica simple implica:
Temas del formulario
Agregar JQuery al formulario
Agregar CSS al formulario {3 u& v2 ~ # Z
El objetivo principal de este tutorial es aprender cómo crear un tema en un formulario. No entraré en detalles del código que no tienen nada que ver con el tema. No entraré en demasiados detalles sobre el código que es irrelevante para el tema. Nuevamente, si quieres seguir este tutorial, primero debes saber:
Cómo crear un módulo en Drupal 7
Cómo crear un formulario en Drupal usando drupal_get_form(). L, k% L+ ]6 @
No haré mucho con el código CSS y JQuery en el tutorial, puedes simplemente copiarlo y pegarlo localmente para experimentar. Oh, mi objetivo es cómo agregar CSS y JQuery a Drupal.
; V8 L' p, l' R; V, r& h
¡Empieza!
Paso 1: Utilice hook_menu()
¡Primero necesito registrar una ruta de página para que se pueda mostrar el formulario! ]&j! G: ~9 i, Q: @
formato de función _theme_menu()
{% A' A/ V) E6 Y/ D
$menu['form_theme'] = matriz- L( C9 Q8 b, B& O# y
(5 L: V; A. Y5 V& ?z9 Y5 V& F; s) z
'title' =& gt; 'Theming Forms',# ^, @* y" ~# E$ s
'description' =& gt; 'Practicando temas de formularios en Drupal 7',6 j* _8 q.V* y% {：E* S2 Y- W)
'page callback' => 'drupal_get_form',
'page argumentos' => 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 tabla! _' D0 {/ R F$ U; _( |, X0 A/ 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( [! i5 V6 G
'#type' => 'textfield',3 {3 e) ~ h* }- @5 s
);
$ formulario['apellido'] = matriz4 B1 w' a( U3 l9 m) j2 Y
(+ c, U$ e/ c( T+ S
'#tipo ' = > 'campo de texto',
);; o% T.G- h
$form['edad'] = matriz
(
'#type' => 'textfield',
'#maxlength' => 3,
); >9 s: g7 |6 p" g" k# v
Oye, el código es bastante claro, ¿verdad? He creado estos elementos del formulario sin muchas modificaciones ni otras configuraciones.
Luego necesito agregar CSS y Javascript al archivo. forma. .
drupal7 tiene un nuevo atributo #attached que puedo agregar usando el siguiente código:
$ Z ]- H6 M- B6 v0 s- h0 p: c* [
// Obtener ruta del módulo
$path = drupal_get_path('module', 'form_theme');3 v A& ; `7 M, d
// Adjunte CSS y JS al formulario
$form['#attached'] = array7 P* _0 l2 @% |' p >
(
'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
'data' => $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; p > Este enfoque tiene una gran ventaja sobre drupal_add_js() y drupal_add_css(), es decir, otros módulos se pueden modificar según los estilos y scripts del módulo.
/ \( o/ V2 {6 O& h!N$ u
Finalmente, volviendo a mi formulario $form, el código es el siguiente:
función form_theme_form($form, &$form_state)
{7 M/ x [e: b0 G$ |# Q* {: j
$form['first_name'] = matriz
(
'#type' => 'campo de texto',
) ;
$formulario['apellido_ nombre'] = matriz
(1 H* u; X4 K& V
'#tipo' => '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 ruta del módulo
$path = drupal_get_path('module', 'form_theme') ;+ I9 e) M# G+ Q8 l.]; S
// Adjunte 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 \& ?' p>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: Use hook_theme()
A partir de Drupal 6, la función del tema debe registrarse usando hook_theme(), pero en Drupal 6 y Drupal Todavía existen algunas diferencias sutiles en cómo funcionan en Drupal 7. En Drupal 7, la temática de formularios ya no usa "parámetros", sino que puede usar "elementos de representación" cuyo valor es simplemente "formulario". función, debe mantener el índice coherente con la función de formulario definida.
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 `
}
>
Como puede ver, 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 cuando. implementando el formulario Necesito agregar #theme al formulario $form que definí porque es redundante: \# q; c3 O0 d9 L7 s& K- H ^
Hay algunos puntos importantes a tener en cuenta al escribir funciones temáticas en Drupal 7. Son:
La función tiene un solo parámetro, que se llama $variables. $variables tiene un índice de formulario cuyo valor incluye todos los elementos del formulario que usted define.
Todos los elementos del formulario deben pasarse como parámetros a la función drupal_render(). a HTML. y agregar Javascript y css. Drupal hace esto automáticamente, solo necesita pasar estos parámetros
Al final de escribir la función del tema, debe pasar los elementos restantes del formulario. Función drupal_render_children(. ) para convertir elementos de formulario restantes u ocultos a HTML. En Drupal 6, pasamos $form directamente a drupal_render(), pero en Drupal 7, esto resultó en un bucle infinito sin ningún mensaje de error. : U
La función del tema lleva el nombre de "theme_" más el "form_theme_form" que registramos anteriormente. El código es el siguiente:
< ?php+ z/ M- h) A0. A, `, p0 q D
función theme_form_theme_form($variables)2 W8 q7 I% N0 n" f: g
{( a# u1 L, l4 X1 s3 J< / p>
// Aislar la forma de definición de $variables($variables)2 W8 q7 I% N0 n" f：g
{( a# u1 L, l4 X1 s3 J
//Aislar la definición del formulario en forma de $matriz de variables
$form = $variables['form'];' p>$output = '
' .t('Ingrese su información a continuación') '
';// Coloque toda la estructura en un
< utilizable. p>// CSS div.B; @- R3 s+ `" U
$output . = '
// Cada texto está envuelto en un
// marca para que pueda flotar hacia la izquierda (g: _ ' \8 O- R' B. }.}) ~# }% G
$output . '' . t('Mi nombre es') '';
// ¿Usar drupal_render()/ para representar elementos del formulario?# M# J3 v" k* p }5 O1 v
$salida . = drupal_render($form['first_name']);" N7 N$ w7 F![
$salida . = drupal_render($formulario [ 'apellido']);
$salida . = '' . t('y yo soy') '';" g c6 e4 v, C# y/ t #. c% K
$salida. = drupal_render($form['edad']);8 ]
$salida. = drupal_render($forma['edad']); * s, M' k
$salida . = '' . t('años.') '';
$salida . '
// vía drupal_render_children()
$salida . = drupal_render_children($formulario);!X % r2 L9 c* }
// Devuelve el resultado de salida
return $output;
}8 L" N. n4 x8 J$ L7 l% H >1 T5 ^$ J5 t3 u, z
En este punto, he completado la mayor parte del trabajo, incluida la definición del formulario, el registro de la función del tema y la implementación de la función del tema, pero no he agregado CSS y Javascript.