Можно ли заставить Cufon работать на кнопке?

Question

Так что сейчас я ломаю голову - в данный момент мы используем элемент для кнопки, чтобы придать ему свой собственный шрифт, хорошо - это работает, но так как мы используем Cufon на остальной части сайта, нам интересно, можно ли заставить Cufon работать над кнопкой.

Пока что я изменил кнопку на и с помощью стандартных стилей CSS для элемента 'input' или 'input [type = "submit"] "работает нормально - но я попробовал оба из них в cufon, чтобы выгода.

Это кнопка - так как Cufon генерирует изображения, это должно работать, но, возможно, я делаю это неправильно - кто-нибудь может помочь?

Answer 1

$('.input-button').each(function(){
    $(this).hide().after('<span class="input-button">').next('span.input-button').text($(this).val()).click(function(){
        $(this).prev('input.input-button').click();
    });
});

Я использовал приведенный выше код для копирования значения ввода в диапазон, что позволяет мне использовать cufon. Он отлично работает и все еще возвращается к вводу 'submit' с отключенным JavaScript.

Answer 2

Использование элемента следующим образом:

<button type="buton">value</button>

работал при применении стиля Cufon:

Cufon.replace('button', {color: '-linear-gradient(#999, 0.45=#666, 0.45=#555, #999)'});

Большое спасибо:)

Answer 3

Я думаю, что нет способа заставить Cufon работать с <input type="submit" />. Основная причина в том, что нет места для вставки холста ...

Однако вы можете просто переключиться на более семантически подходящий <button>, который нуждается в закрытии </button> и, таким образом, создает место для холста.

Очень важно, однако, убедитесь, что вы также указали тип с ним, поскольку IE7 и ниже не будут отправлять форму, если вы этого не сделаете. Также кажется, что указание типа приводит к единообразному поведению во всех браузерах.

Дайте мне знать, помогло ли это! Приветствия

Answer 4

Единственное решение, которое я нашел для использования Cufon на кнопках <input type="submit"/>, - это использование Javascript (лично jQuery).

1. Скопируйте текст кнопки ввода (атрибут «значение») в диапазон.
2. Замените диапазон, используя Cufon.replace ()
3. Удалить текст кнопки ввода
4. Установите диапазон над кнопкой
5. Распространение события click () от диапазона до кнопки

Готово!