Библиотека jquery позволяет менять css-стили «на лету», как мы с Вами уже убедились. Что же из этого можно полезного извлечь, кроме изменения цвета ? Например достаточно красивый скрытие и показ объектов. Той же логин-панели. Рассмотрим как это реализовать..
Полный код с комментариями (Показ и скрытие логин-панели):
<!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>Логин</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script><!--подключение библиотеки-->
<script type="text/javascript">
var my; //определение переменной-флажка
$(document).ready(function(){ //если DOM готов к манипуляции
$(".run").click(function(){ // если кнопка нажата
if (my == "yes") { //проверяем переменную-флажок
$('#box').css({visibility: "hidden"});//скрытие панели, если она открыта
my = "no";
}
else {
$('#box').css({visibility: "visible"}); //показ панели, если она скрыта
my = "yes";
}
return false;
});
});
</script>
<!--определение стилей-->
<style type="text/css">
#box {
visibility: hidden;
height: 200px;
width: 200px;
position: relative;
}
</style>
</head>
<body>
<input type="button" class="run" value = "Логин" />
<div id="box">
<form>
Введите логин:<input type = "text" name = "login"><br />
Введите пароль:<input type = "password" name = "pass">
<input type = "submit" name = "sub" value = "Логин" />
</form>
</div>
</body>
</html>
Пример можно посмотреть здесь
Comments ( 0 )