Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » JavaScript » Урок jQuery № 2 - "Стилизация форм с помощью jQuery"
Не нравится(-) 84 Нравится(+)
24-07-2009, 19:25 - dyzajner (JavaScript, jQuery)
Урок jQuery № 2 - "Стилизация форм с помощью jQuery"

Здравствуйте уважаемые пользователи!
Чтобы долго не затягивать, публикую второй урок по просьбе "OniX"

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

И так приступ :)
1) Первый шаг.
По традиции создаём файлы index.html и style.css
В index.html прописываем следующее

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Урок jQuery № 2 - "Стилизация форм с помощью jQuery"</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="jquery.js" type="text/javascript"></script>


2) Второй шаг.
Создаём каркас для обратной связи.

    <div id="inputArea">
       <form method="post" action="#">
      
        <label>Ваше имя:</label><input type="text" />
        <label>Ваш e-mail:</label><input  type="text" />
        <label>Тема письма:</label><input type="text" />
        <label>Текст сообщения:</label><textarea rows="4" cols="30"></textarea>
        <input type="submit" value="Отправить"></form>

        </div>
</body></html>

3) Третий шаг.
Теперь поработает немного над css, чтобы сделать нашу обратную связь красивее

/*
=============================================================
© 2008 - 2009 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Российская школа CSS. Урок jQuery № 2 - "Стилизация форм с помощью jQuery"
style.css - Набор стилей для урока
=============================================================
*/

        body
        {
            font-family: Arial, Sans-Serif;
            font-size: 13px;
        }

/*
=============================================================
Общие настройки
=============================================================
*/
    #input
    {
        font-family: Arial, Sans-Serif;
        font-size: 13px;
        background-color: #ffffff;
        padding: 10px;
        width:440px;
    }
    #inputArea input, #inputArea textarea
    {
        font-family: Arial, Sans-Serif;
        font-size: 13px;
        margin-bottom: 5px;
        display: block;
        padding: 4px;
        width: 430px;
    }
/*
=============================================================
обводка форм
=============================================================
*/
        .activeField
        {
            background-image: none;
            background-color: #ffffff;
            border: solid 1px #046e8c;
        }
/*
=============================================================
Градиен форм
=============================================================
*/
        .idle
        {
        border: solid 1px #85b1de;
        background-image: url( '../images/gray_bg.png' );
        background-repeat: repeat-x;
        background-position: top;
        background-color:#FFFFFF;
        }

5) Пятый шаг
Теперь наша цель, сделать, чтобы форма правильно и красиво отображалась.
Прописываем следующий код между тегами и
<script type="text/javascript">        
$(document).ready(function(){        
$("input, textarea").addClass("idle");            
$("input, textarea").focus(function(){                
$(this).addClass("activeField").removeClass("idle");        
}).blur(function(){                
$(this).removeClass("activeField").addClass("idle");        
});        
});    
</script>


Вот и подошло время к концу урока. Надеюсь вам понравить)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 23638 раз(а) и написали 9 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Июль 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!