如何创建一个像 drupal 7 中的按钮一样的图像按钮?
How to create an image button that behaves like a button in drupal 7?
我希望它如何工作:
我有触发 Ajax 调用的按钮列表(类型按钮),将那个项目添加到列表中。除了按钮看起来很丑外,这完全符合我的要求。
问题:
当我尝试用 "image button" 替换 "button" 时,提交了表单,这不是我想要的。有没有办法将图像添加到不触发提交的按钮?我可以禁用 "image button" 的提交吗?或者我应该在按钮上使用 css 添加图像吗?
"button"、"image button"和"submit"有什么区别?
要使类型 image_button 像在 system.module 中查找并找到 "'#executes_submit_callback' => TRUE",
的按钮一样,将其更改为 false 将阻止在 [=25] 上调用提交功能=].
来自 system.module 的代码:
$types['button'] = array(
'#input' => TRUE,
'#name' => 'op',
'#button_type' => 'submit',
'#executes_submit_callback' => FALSE,
'#limit_validation_errors' => FALSE,
'#process' => array('ajax_process_form'),
'#theme_wrappers' => array('button'),
);
$types['image_button'] = array(
'#input' => TRUE,
'#button_type' => 'submit',
'#executes_submit_callback' => TRUE, // <--- This is why submit is triggered
'#limit_validation_errors' => FALSE,
'#process' => array('ajax_process_form'),
'#return_value' => TRUE,
'#has_garbage_value' => TRUE,
'#src' => NULL,
'#theme_wrappers' => array('image_button'),
);
您可能遇到的另一件事是验证错误,要删除它只需添加 "'#validate' => array()"
或者如果您想要 运行 验证但忽略错误使用 "#limit_validation_errors' => array()"
。这也适用于按钮。
这是一个示例,您可以在其中试验上述内容并查看何时触发验证和提交回调。还包含一个复选框以显示何时发生验证错误。
function button_menu()
{
$items = array();
$items['button'] = array(
'title' => 'Button',
'page callback' => 'drupal_get_form',
'page arguments' => array('button_form'),
'access callback' => array(TRUE),
'type' => MENU_CALLBACK,
);
return $items;
}
function button_form($form, &$form_state)
{
// Add to prove the point of how validation is working
$form['checkbox'] = array(
'#type' => 'checkbox',
'#title' => t('checkbox'),
'#default_value' => FALSE,
);
$form['button'] = array(
'#id' => 'button_1',
'#type' => 'button',
'#name' => 'test1',
'#value' => 'test1',
//'#validate' => array(), // This line will remove validation completely
'#limit_validation_errors' => array(), // This line will run validation but ignore any errors
'#ajax' => array(
'callback' => 'button_test_callback',
'wrapper' => 'wrapper',
'method' => 'replace',
'effect' => 'fade',
),
);
$form['image_button'] = array(
'#id' => 'image_button_1',
'#type' => 'image_button',
'#src' => '/themes/bartik/logo.png', // hope you still have bartik theme
'#executes_submit_callback' => FALSE, // This line removes the submit callback
//'#validate' => array(), // This line will remove validation completely
'#limit_validation_errors' => array(), // This line will run validation but ignore any errors
'#ajax' => array(
'callback' => 'button_test_callback',
'wrapper' => 'wrapper',
'method' => 'replace',
'effect' => 'fade',
),
);
// Just some code to show what button was pressed
if (array_key_exists('triggering_element', $form_state) &&
($form_state['triggering_element']['#id'] == 'button_1' || $form_state['triggering_element']['#id'] == 'image_button_1'))
{
$form['markup'] = array(
'#type' => 'markup',
'#markup' => '<div id="wrapper"><p>'. $form_state['triggering_element']['#id'] .'</p></div>',
);
}
else {
$form['markup'] = array(
'#type' => 'markup',
'#markup' => '<div id="wrapper"><p>nothing</p></div>',
);
}
$form['submit'] = array(
'#type' => 'submit',
'#value' => 'Submit',
);
return $form;
}
function button_test_callback($form, $form_state)
{
return $form['markup'];
}
function button_form_validate($form, &$form_state)
{
// To display when validation is triggered
drupal_set_message('button_form_validate');
// Only when submit button is pressed we care about this error.
if ( $form_state['values']['checkbox'] == 0) {
form_set_error('checkbox', 'checkbox not checked');
}
}
function button_form_submit($form, &$form_state)
{
// To display when submit is triggered
drupal_set_message('button_form_submit');
}
我希望它如何工作:
我有触发 Ajax 调用的按钮列表(类型按钮),将那个项目添加到列表中。除了按钮看起来很丑外,这完全符合我的要求。
问题:
当我尝试用 "image button" 替换 "button" 时,提交了表单,这不是我想要的。有没有办法将图像添加到不触发提交的按钮?我可以禁用 "image button" 的提交吗?或者我应该在按钮上使用 css 添加图像吗?
"button"、"image button"和"submit"有什么区别?
要使类型 image_button 像在 system.module 中查找并找到 "'#executes_submit_callback' => TRUE",
的按钮一样,将其更改为 false 将阻止在 [=25] 上调用提交功能=].
来自 system.module 的代码:
$types['button'] = array(
'#input' => TRUE,
'#name' => 'op',
'#button_type' => 'submit',
'#executes_submit_callback' => FALSE,
'#limit_validation_errors' => FALSE,
'#process' => array('ajax_process_form'),
'#theme_wrappers' => array('button'),
);
$types['image_button'] = array(
'#input' => TRUE,
'#button_type' => 'submit',
'#executes_submit_callback' => TRUE, // <--- This is why submit is triggered
'#limit_validation_errors' => FALSE,
'#process' => array('ajax_process_form'),
'#return_value' => TRUE,
'#has_garbage_value' => TRUE,
'#src' => NULL,
'#theme_wrappers' => array('image_button'),
);
您可能遇到的另一件事是验证错误,要删除它只需添加 "'#validate' => array()"
或者如果您想要 运行 验证但忽略错误使用 "#limit_validation_errors' => array()"
。这也适用于按钮。
这是一个示例,您可以在其中试验上述内容并查看何时触发验证和提交回调。还包含一个复选框以显示何时发生验证错误。
function button_menu()
{
$items = array();
$items['button'] = array(
'title' => 'Button',
'page callback' => 'drupal_get_form',
'page arguments' => array('button_form'),
'access callback' => array(TRUE),
'type' => MENU_CALLBACK,
);
return $items;
}
function button_form($form, &$form_state)
{
// Add to prove the point of how validation is working
$form['checkbox'] = array(
'#type' => 'checkbox',
'#title' => t('checkbox'),
'#default_value' => FALSE,
);
$form['button'] = array(
'#id' => 'button_1',
'#type' => 'button',
'#name' => 'test1',
'#value' => 'test1',
//'#validate' => array(), // This line will remove validation completely
'#limit_validation_errors' => array(), // This line will run validation but ignore any errors
'#ajax' => array(
'callback' => 'button_test_callback',
'wrapper' => 'wrapper',
'method' => 'replace',
'effect' => 'fade',
),
);
$form['image_button'] = array(
'#id' => 'image_button_1',
'#type' => 'image_button',
'#src' => '/themes/bartik/logo.png', // hope you still have bartik theme
'#executes_submit_callback' => FALSE, // This line removes the submit callback
//'#validate' => array(), // This line will remove validation completely
'#limit_validation_errors' => array(), // This line will run validation but ignore any errors
'#ajax' => array(
'callback' => 'button_test_callback',
'wrapper' => 'wrapper',
'method' => 'replace',
'effect' => 'fade',
),
);
// Just some code to show what button was pressed
if (array_key_exists('triggering_element', $form_state) &&
($form_state['triggering_element']['#id'] == 'button_1' || $form_state['triggering_element']['#id'] == 'image_button_1'))
{
$form['markup'] = array(
'#type' => 'markup',
'#markup' => '<div id="wrapper"><p>'. $form_state['triggering_element']['#id'] .'</p></div>',
);
}
else {
$form['markup'] = array(
'#type' => 'markup',
'#markup' => '<div id="wrapper"><p>nothing</p></div>',
);
}
$form['submit'] = array(
'#type' => 'submit',
'#value' => 'Submit',
);
return $form;
}
function button_test_callback($form, $form_state)
{
return $form['markup'];
}
function button_form_validate($form, &$form_state)
{
// To display when validation is triggered
drupal_set_message('button_form_validate');
// Only when submit button is pressed we care about this error.
if ( $form_state['values']['checkbox'] == 0) {
form_set_error('checkbox', 'checkbox not checked');
}
}
function button_form_submit($form, &$form_state)
{
// To display when submit is triggered
drupal_set_message('button_form_submit');
}