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

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

До сих пор я изменил кнопку на и, используя стандартные стили css для элемента «ввод» или «ввод [тип = «отправить»]», работает нормально, но я пробовал оба из них в cufon безрезультатно.

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


forms html css cufon
person Tom Harvey    schedule 22.08.2009    source источник
comment
Я предполагаю, что это будет работать внутри элемента <button>, но не с элементом <input>. Что вы пробовали?   -  person Philippe Gerber    schedule 22.08.2009
comment
До сих пор я пробовал ‹input type=submit/› — не знал об элементе ‹button›; Я попробую это сейчас. Спасибо пока   -  person Tom Harvey    schedule 22.08.2009

Ответы (4)


arrow_upward
7
arrow_downward 

$('.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. Он отлично работает и по-прежнему возвращается к вводу «отправить» с отключенным javascript.

person Paul Welsh    schedule 14.07.2010

arrow_upward
5
arrow_downward

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

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

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

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

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

person Tom Harvey    schedule 22.08.2009

arrow_upward
3
arrow_downward

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

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

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

Дайте мне знать, если вышеизложенное помогло! Ваше здоровье

person omadmedia    schedule 21.04.2010

arrow_upward
1
arrow_downward

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

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

Сделанный !

person Jonathan    schedule 03.03.2010