Регистрация Главная Пользователи Все разделы прочитаны
Сообщения за день Справка Регистрация
Навигация
Zhyk.org LIVE! Реклама на Zhyk.org Правила Форума Награды и достижения Доска "почета"

Ответ
 
Опции темы
Старый 24.05.2015, 02:41   #1
 Пехотинец
Аватар для zZkamedosZz
 
zZkamedosZz знает себе ценуzZkamedosZz знает себе ценуzZkamedosZz знает себе ценуzZkamedosZz знает себе ценуzZkamedosZz знает себе ценуzZkamedosZz знает себе ценуzZkamedosZz знает себе ценуzZkamedosZz знает себе ценуzZkamedosZz знает себе ценуzZkamedosZz знает себе ценуzZkamedosZz знает себе цену
Регистрация: 17.01.2014
Сообщений: 67
Популярность: 4064
Сказал(а) спасибо: 145
Поблагодарили 138 раз(а) в 101 сообщениях
Отправить сообщение для zZkamedosZz с помощью Skype™
 
По умолчанию [JS] Красивая форма с индикатором заполнения

[Ссылки могут видеть только зарегистрированные пользователи. ]
Привет всем. Сегодня я хочу показать вам, как можно быстро создать красивую форму с индикатором заполнения.
Зайдите на [Ссылки могут видеть только зарегистрированные пользователи. ] и скачайте архив со стилями и скриптом. Создаем htmlфайл следующего содержания:
HTML:
Код:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Fort.js</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="fort.min.css">
  <script src="fort.min.js"></script>
</head>
<body>
  <div class="form-wrapper">
   <div class="top">
   <div class="colors"></div></div>
   <h1 style="color: #000; text-align: center;">Fort.js</h1>
   <form name="form" action="#">
    <div class="form">
     <div class="form-item">
      <label for="text">
      <span class="fontawesome-user"></span></label>
      <input type="text" name="text" required="required" placeholder="Name" autocomplete="off">
     </div>
     <div class="form-item">
      <label for="text">
      <span class="fontawesome-user"></span></label>
      <input type="text" name="text" required="required" placeholder="Username" autocomplete="off">
     </div>
     <div class="form-item">
      <label for="password">
      <span class="fontawesome-lock"></span></label>
      <input type="password" name="password" required="required" placeholder="Password" autocomplete="off">
     </div>
     <div class="button-panel">
      <input type="submit" class="button" title="Sign In" value="Test It Out">       <p class="view">
      <a  href="https://github.com/Colourity/Fort.js" id="ref">View on GitHub</a></p>
     </div>
   </div>
   </form>
  </div>
  **********
   sections();
  </script>
</body>
</html>
Подключаем стили и скрипт в теге head, затем создаем форму строго такой структуры и вызываем функцию в теге script. В зависимости от того, какую функцию мы вызовем, эффект будет разным. По мере заполнения формы, сверху будет двигаться линия. Если, к примеру, вы вызовите функцию sections, то полоска будет разбиваться на секции причем разного цвета.

Эффекты могут быть такие: default(), sections(), gradient(), flash(). Попробуйте каждую и посмотрите, что изменится.

В конце стоит сказать, что размер полоски, ее положение и прочее вы можете поменять в стилях.
________________
Не можешь жить, займись чем-нибудь другим.
  Ответить с цитированием
Пользователь сказал cпасибо:
ZFrost (04.12.2016)
Старый 04.12.2016, 15:27   #2
Заблокирован
 Пехотинец
Аватар для ZFrost
 
ZFrost у всех на слухуZFrost у всех на слухуZFrost у всех на слухуZFrost у всех на слухуZFrost у всех на слухуZFrost у всех на слухуZFrost у всех на слухуZFrost у всех на слухуZFrost у всех на слухуZFrost у всех на слуху
Регистрация: 18.05.2013
Сообщений: 97
Популярность: 1374
Сказал(а) спасибо: 52
Поблагодарили 45 раз(а) в 31 сообщениях
 
По умолчанию Re: [JS] Красивая форма с индикатором заполнения

Форма конечно шикарная, можно использовать!
  Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[Информация] Прицел с индикатором бронепробиваемоси dreamzy Общение и обсуждение по World of Tanks 3 02.03.2012 22:40

Заявление об ответственности / Список мошенников

Часовой пояс GMT +4, время: 03:56.

Пишите нам: [email protected]
Copyright © 2024 vBulletin Solutions, Inc.
Translate: zCarot. Webdesign by DevArt (Fox)
G-gaMe! Team production | Since 2008
Hosted by GShost.net