Cufon and Jquery Magic Предварительный просмотр

Предварительный просмотр Jquery Magic позволяет пользователю вводить текст и автоматически обновлять его (так же, как это "поле представления" работает с загрузкой предварительного просмотра ниже!). Я бы хотел, чтобы пользователь мог вводить текст, а затем шрифт Cufon, чтобы перенять написанное (или просто набрать его шрифтом cufon).

$(function() {
$('form.example input:text').magicpreview('mp_'); 
});

Cufon.replace('p#mp_trythis1');

Пример здесь: http://twmorton.com/magicpreviewjquery/

2 ответа

Вот упрощенная версия (без magicpreview):

HTML часть:

<h1>Cufon Test</h1>
<input id="in" type="text">
<div id="out"><h1>Start typing ...</h1></div>

Часть Javascript:

Cufon.replace('h1');
$('#in').keyup(function(){
    $('#out').html('<h1>'+$(this).val()+'</h1>');
    Cufon.replace('#out h1');
});

Смотрите живой пример здесь

РЕДАКТИРОВАТЬ: вы можете увидеть две альтернативные версии, реализованные в виде плагинов jQuery.

  • v1 обновляется через 1000 мс после потери фокуса и только в случае загрязнения
  • v2 обновляется через 1000 мс после последнего нажатия

Хорошо, лучший пример того, что мне нужно, это предварительный просмотр шрифта, как на этом сайте:

http://www.fontspace.com/mario-arturo/sahara

Когда вы вводите то, что вам нужно, любой скрипт, запускающий предварительный просмотр, обновляет предварительный просмотр, чтобы показать вам, что вы ввели.

Другие вопросы по тегам