Украшаем форму при помощи jQuery
Займёмся украшательством формы ввода с помощью замечательного
фреймворка jQuery о котором я буду писать много и долго. В уроке буду
использовать CSS и jQuery.
В итого после всех телодвижений у нас получиться нечто подобное
Движение 1 - Начало
Сначала надо создать форму, которую мы будем украшать .
<form> <input id="status" name="status" type="text" value="Type something here" /> <input type="submit" value="Submit" /> </form>
Я включил “Type something here” в качестве значения по умолчанию для входа. Это текст, который будет показан в форме, но исчезает, когда поле активируется.
Движение 2 – CSS
C формой всё ясно. Теперь нам надо написать CSS и включить в него параметры активного / неактивного стиля формы. Для этих целей будем использовать idleField и focusField.
Создаём файл с таблицей стилей main.css
И подключаем его в оснавном шаблоне
В нём пишем:
*{
margin:0;
padding:0;
font:bold 12px "Lucida Grande", Arial, sans-serif;
}
body {
padding: 10px;
}
#status{
width:50%;
padding:10px;
outline:none;
height:36px;
}
.focusField{
border:solid 2px #73A6FF;
background:#EFF5FF;
color:#000;
}
.idleField{
background:#EEE;
color: #6F6F6F;
border: solid 2px #DFDFDF;
}
Движение 3 – Подключаем jQuery
Вот часть, где подключим к форме jQuery . Мы хотим, чтобы происходило две вещи
1. Выбранное поле изменяло неактивной класс на активный
2. По умолчанию текст внутри «Type something here» исчезал при вводе текста.
3. Кроме того, мы хотим, чтобы это произошло противоположное, когда форма становится неактивной.
Создаём файл focus_form.js, закачиваем jQuery! Положим всё в папку с исходным шаблоном
Подключаем оба файла в нашем шаблоне
<script src="jquery-1.3.1.min.js" type="text/javascript"></script> <script src="focus_form.js" type="text/javascript"></script>
В focus_form.js пишем
$(document).ready(function() {
$('input[type="text"]').addClass("idleField");
$('input[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value == '')){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
});
Немного разберём данный код.
Для каждого текстового поля применяем класс idleField
$('input[type="text"]').addClass("idleField");
После того как текстовое поле становится активным, удалятся неактивный стиль(removeClass(”idleField”)) и добавить активный стиль(addClass(”focusField”)).
$('input[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
});
Когда пользователь нажимает на поле, мы хотим, чтобы текст “Type something here”
Исчезал, а на его месте можно был вводить текст
if (this.value == this.defaultValue){
this.value = '';
}
Следующая часть сценария описует, что происходит, когда поле становится неактивным, в основном делает противоположное, что только что объяснил.
$('input[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == ''){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
DEMO СКАЧАТЬ
Связанные записи
-
http://goldblog.com.ua Yura Zaripov
