Главная » Файлы » Прочие скрипты » jQuery

Замечательный эффект ввода сообщений в текстовые поля через плагин Fancy Input для uCoz
24.06.14, 16:33:11

Скачать файл




Сегодня наткнулся на этот замечательный плагин, который шикарно визуализирует ввод ваших сообщений в текстовые поля

Для начала посмотрите ДЕМО

Вот моя адаптация на фидле: ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<link rel="stylesheet" href="/css/fancyInput.css">
<script src='/js/fancyInput.js'></script>
<style>
.fancyInput {
  min-width:300px;
  max-width:250px;
  font-size: 16px;
  color: #FFF;
  vertical-align: middle;
  line-height: 1.3;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 2px 4px rgba(0, 0, 0, .2) inset, 0 0 12px rgba(255, 255, 255, .1);
  padding: 8px 20px;
  background: rgba(0, 0, 0, .1);
  border-radius: 5px;
}
</style>

Текстовое поле стилизуйте на своё усмотрение

Вот так оформляются текстовые поля:
Код
<div id='content' class="effect4">  
  <!-- класс effect4 - это номер эффекта вывода текста. Всего эффектов 5. Выставляйте тот, что вам понравится-->  
  <section class='input'>
  <div>
  <input type='text' />
  </div>
  </section>
</div>

В самый низ страницы после /body вставляйте:
Код
$('section :input').val('').fancyInput()[0].focus();
// Everything below is only for the DEMO
function init(str) {
  var input = $('section input').val('')[0],
  s = 'http://apo-ucoz.com - уникальные скрипты для uCoz'.split('').reverse(),
  len = s.length - 1,
  e = $.Event('keypress');

  var initInterval = setInterval(function () {
  if (s.length) {
  var c = s.pop();
  fancyInput.writer(c, input, len - s.length).setCaret(input);
  input.value += c;
  //e.charCode = c.charCodeAt(0);
  //input.trigger(e);

  } else clearInterval(initInterval);
  }, 150);
}

init();

Скрипт из прикреплённого архива залейте в папку js, стиль в папку css

Материал подготовлен и адаптирован Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: ввода, эффект, input, fancy, Через, текстовые, замечательный, плагин, поля, сообщений
Просмотров: 495 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: