О записи
Реклама


Полезные ссылки

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/

Добавить пост в: Google slashdot YahooMyWeb Digg Technorati Delicious Забобрить эту страницу! Добавить на Newsland.ru Добавить на СМИ2 Добавить на RUmarkz Добавить на Ваау! Добавить на rucity.com Добавить в закладки МоёМесто.ru