Вы читаете “jQuery”, в блоге Оптимизация сайтов от cross{blog}
- Опубликовано:
- 12.08.07 / 11pm
- Рубрика:
- Разработка сайтов
Реклама
Полезные ссылки
jQuery
В продолжение темы о div верстке. Наверное Вы видели этот вебдванольный эффект, когда при наведении на строку, она вся зажигается бэкграундом с закругленными краями. Все очень красиво и эргономично смотрится, а главное, что подобный эффект можно сделать не сильно нагружая javascript страницу.
Конечно, если попробовать эти закругленные края, учитывая, что ширина и высота может быть разной, верстать с помощью javascript - получится сложно... Вот тут то и поможет плагин jQuery, который называется jQuery.corner. Вот демка по его работе, а тут можно скачать плагин.
А вот и сама верстка закругленных краев div`ами.
Файлик index.html:
<html>
<head>
<script type="text/javascript" src="./js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="./js/jquery.corner.js"></script>
</head>
<body>
<div name="edged1" id="edged1" style="width:200;height:100;background-color:#dedede">Контент</div>
<script>
$("div[@id^=edged]").each(function(i){
$(this).corner();
});
$("div[@id^=edged]").each(function(i){
$(this).hover(function(){
$(this).css("background-color","f3f3f3");
$(this).css("cursor","pointer");
},function(){
$(this).css("background-color","dedede");
$(this).css("cursor","arrow");
});
});
</script>
</body>
Дорабатываем под себя и получаем красивенький эффект. А теперь маленькое отступление о jQuery:
В итоге разработки библиотеки jQuery получился отличнейший фреймворк, благодаря которому теперь возможна реализации многих очень удобных приложений под веб. То, что ранее казалось невозможных или сильно груздным, с помощью jQuery теперь строится буквально за несколько часов и совершенно не нагружает работу системы. Да, найдутся противники, или почитатели других библиотек javascript - Prototype, MooTools и тд, но тут уж каждому выбирать самому.
Так же хочется обратить внимание всех на сайт http://visualjquery.com/
jQuery
Комментарии (3)Оставить комментарий |