如何创建一个像drupal 7中的按钮一样的图像按钮？

Question

我希望它如何工作：

我有触发 Ajax 调用的按钮列表（类型按钮），该调用将该项目添加到列表中。这完全符合我的要求，只是按钮看起来很丑。

问题：

当我尝试用“图像按钮”替换“按钮”时，表单被提交，这不是我想要的。有没有办法将图像添加到不触发提交的按钮？我可以禁用“图像按钮”的提交吗？还是我应该在按钮上使用 css 添加图像？

“按钮”、“图片按钮”和“提交”有什么区别？

Answer 1

为了使 image_button 类型像一个按钮，在 system.module 中查找并找到 "'#executes_submit_callback' => TRUE", 因此将其更改为 false 将阻止在您的 image_button 上调用提交函数。

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');
}