Jquery скрипт подходящ за търсене в сайта
Posted by Posted in Статии Posted on 23-09-2009
Tags: $(document).ready(), div, form, hide(), Java Script, jQuery, show(), полезен скрипт
Здравейте,
на Вашето внимание предоставяме един наш скрипт, който честичко ползваме за визуализация на div. Проблема ни беше, че трябваше да добавим към един не много „просторен“ темплейт и търсене, задачата беше много сложна за преместване на вече изградения дизайн, за това решихме да скрием един div и при клиентско „поискване“, да го покажем по ефектен начин.
Тъй като имахме вече ползвана библиотека на jQuery решихме да използваме нея, за визуализирането и специално jQuery функциите:
- show()
- hide()
И така, нека започнем с CSS-а който ще използваме за оформление на div в който ще се намира търсенето:
-
font-family: Tahoma, Verdana, Arial, sans-serif;
-
font-size: 62.5%;
-
background-color: #333;
-
width: 300px;
-
height: 150px;
-
}
Тук няма какво да обясняваме, предполага се че след като сте се насочили към jQuery, вече знаете за какво става на въпрос в CSS 
Продължаваме със самият скрипт:
-
-
$('#online_usl').hide();
-
-
$('#click_usl').click(function(){
-
-
$('#online_usl').show("slow");
-
-
});
-
-
$('#close_friend').click(function(){
-
$('#online_usl').hide('fast');
-
})
-
-
});
Тук е момента, да споменем и за $(document).ready(), това е функция в jQuery която се изпълнява при зареждането на страницата. Е както виждате, при зареждане на страницата първото нещо което се изпълнява, това е скриване на
div с id online_usl. След това се зарежда функция, която „следи“ за натискане на елемент с id click_usl, ако има такъв „клик“, то се изпълнява функцията show() на jQuery. Тази функция има няколко параметъра:
- slow
- normal
- normal
- Време в ms
След като е заредена функцията за показване на div-a чрез следене на клик в елемент, то е необходимо да заредим и функция която да затваря показалият се div. Правим го като укажем, по сходен начин на показването, но използваме функцията hide().
Ето и целия скрипт, може да го свалите и пробвате, моля имайте в предвид, че самата библиотека е хоствана от Google, ако желаете да използвате локално този скрипт, изтеглете библиотеката от сайта на jQuery и променете пътя до нея.
-
<head>
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
$(document).ready(function(){
-
-
$('#online_usl').hide();
-
-
$('#click_usl').click(function(){
-
-
$('#online_usl').show("slow");
-
-
});
-
-
$('#close_friend').click(function(){
-
$('#online_usl').hide('fast');
-
})
-
-
});
-
</script>
-
<style type="text/css">
-
div#online_usl{
-
font-family: Tahoma, Verdana, Arial, sans-serif;
-
font-size: 62.5%;
-
background-color: #333;
-
width: 300px;
-
height: 150px;
-
}
-
</style>
-
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
-
</head>
-
<p><a href="#" id="click_usl">Търсене</a></p>
-
<div id="online_usl">
-
<span style="float: right;"> <a href="#" id="close_friend" style="color: #fff; text-decoration: none; margin-top: 3px; margin-right: 3px;">X</span>
-
<p> </p>
-
<p>Търсене:</p>
-
<center><input type="text" value="Търси…" /></center>
-
</div>
