Рейтинг: 5.0/3

Метки

дизайн веб-формы

Опрос: Чего добавлять больше?

Чего добавлять больше?
Всего ответов: 192

Главная » 2011 » Май » 26 » Эффектное оформление пользовательских форм на сайте с помощью jQuery



Для начала мы рассмотрим работу с локальной формой регистрации пользователей на сайте.
Дело в том, что на сайтах системы uCoz существует два вида форм регистрации - локальная и uNet-форма.Локальная форма регистрации доступна на тех сайтах, где авторизация пользователей идёт по логину и паролю, uNet-форма присутствует там, где авторизация идёт по E-mail и паролю, причём E-mail привязан к так называемому uNet-аккаунту.

Итак, для тех, у кого на сайте локальная форма регистрации (а это гораздо лучше, потому как локальная форма регистрации практически полностью даёт возможность для её редактирования):

между тегами

Code
<head> и </head>


подключаем внешний файл стилей

Code
<link rel="stylesheet" href="/uniform.default.css" type="text/css" media="screen">


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

Также в корневой папке Вашего сайта создайте папку images, в которую закачайте изображения из одноимённой папки архива.

После открывающего тега body вставляем скрипты

Code
<script src="http://ucozcreative.ucoz.ru/jquery.uniform.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
  $(function(){
  $("input, textarea, select, button").uniform();
  });
  </script>


В общих настройках сайта выбираем версию библиотеки jQuery jquery-1.6.1.js

Теперь осталось только в файле стилей uniform.default.css прописать полные пути до файлов-изображений из созданной нами папки images.



Результат вживую Вы можете посмотреть на данном сайте, открыв страницу регистрации.

Теперь что касается оформления uNet-формы, алгоритм действий тот же самый, единственное но: в IE проблемы с корректным отображением формы, в остальных браузерах всё ОК.



Точно таким же способом производится оформление "Страницы редактирования персональных данных" Вживую можно также посмотреть на этом сайте, зайдя в свой профиль и в нём в редактирование данных.

Ссылка:
BB-код:
HTML-код:
Всего комментариев: 1
  1.   Понравилось: +1
    1  dastyle 2011-06-21, 03:01

    Отлично, себе на сайт поставлю)

Имя *:
Email:
Код *: