Предоставлен интерактивный список с кратким описанием из 22 самых популярных плагинов jQuery в 2011 году. Даны ссылки на официальные страницы и демо. 1. Chosen 2. HTML5 Uploader 3. Isotope 4. FlexSlider 5. FitText 6. FitVids 7. DropKick 8. jRumble 9. Arbor 10. Timelinr 11. MotionCAPTCHA 12. Waypoints 13. jQuery.fracs 14. Apprise 15. Reveal 16. grumble.js 17. Supersized 18. jVectorMap 19. Masonry 20. ResponsiveSlides.js 21. Sisyphus.js 22. Google+ Activity Widget

Шикарный он-лайн ресурс подбора css-стилей для вашего сайта.

Отличный он-лайн ресурс. Очень помогал при восстановлении Дикого Поля (http://dikoepole.org)

13 интересных и полезных визуальных эффектов на jQuery, от оригинальных слайдшоу до имитации гравитации! Названия не переводил, так как все мы тут достаточно владеем аглицким для понимания как темы, так и технической стороны вопроса.


( Читать дальше )

Для php-шников, работающих с ООП, не сталкивающихся с паттернами, но любящими прекрасное. Чудесное написание, оформление. Советую почитать php-шникам даже если не требуется по роду деятельности.

Разработчики серверных, клиентских или настольных приложений на JavaScript нередко сталкиваются с проблемами, связанными с объектами, функциями, наследованием и другими особенностями этого языка. Какие же приемы разработки приложений на JavaScript являются наиболее удачными? Данная книга дает ответ на этот вопрос, предлагая большое количество различных шаблонов программирования на JavaScript, таких как «единственный объект» (singleton), «фабрика» (factory), «декоратор» (decorator) и другие. Можно сказать, что они являются не только методами решения наиболее типичных задач разработки ПО, но и заготовками решений для целых категорий таких задач. Использование шаблонов при программировании на языке JavaScript имеет свои особенности. Некоторые из них, разработанные с позиций языков со строгим контролем типов, таких как C++ и Java, не могут непосредственно применяться в языках с динамической типизацией, таких как JavaScript. Для таких шаблонов в языке JavaScript имеются более простые альтернативы. Написанная экспертом по языку JavaScript Стояном Стефановым — ведущим специалистом компании Yahoo! и создателем инструмента оптимизации производительности веб-страниц YSlow 2.0, — книга включает практические советы по реализации каждого из рассматриваемых шаблонов с примерами программного кода. Автор также приводит антишаблоны — приемы программирования, которых следует но возможности избегать.



Скачать. Книга «JavaScript. Шаблоны»

Навеяно этим топиком по теме. Можно сказать, что это более усовершенсвованный способ, так как контентом могут выступать и изображения (картинки).
Три кита: код на JavaScript, разметка HTML, стили CSS.

1. JavaScript

function slideSwitch() {
    var $active = $('#slideshow DIV.active');
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

    // показываем картинки по-очереди, одна за другой
    var $next =  $active.next().length ? $active.next() : $('#slideshow DIV:first');

    // если надо показывать картинки случайным образом, то можно использовать закомментированный код ниже
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');
    $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); });
};

$(function() {
    setInterval( "slideSwitch()", 5000 ); // задержка 5 секунд
});

2. HTML

<div id="slideshow">
    <div class="active">контент 1</div>
    <div>контент 2</div>
    ..................................
    <div>контент n</div>
</div>

3. CSS

#slideshow { position:relative; height:400px; }
#slideshow DIV { position:absolute; top:0; left:0; z-index:8; opacity:0.0; height: 400px; background-color: #FFF; }
#slideshow DIV.active { z-index:10; opacity:1.0; }
#slideshow DIV.last-active { z-index:9; }

Класс стиля class=«active» можно изначально назначать на желаемый div-контент. Параметр height:400px можно менять на собственное усмотрение. Алгоритм вывода случайным образом можно усложнить и усовершенствовать. Более того, можно изменить анимационный эффект на свой.

Три кита: код на JavaScript, разметка HTML, стили CSS.

1. JavaScript

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // показываем картинки по-очереди, одна за другой
    var $next =  $active.next().length ? $active.next() : $('#slideshow IMG:first');

    // если надо показывать картинки случайным образом, то можно использовать закомментированный код ниже
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');
    $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() {$active.removeClass('active last-active');});
};

$(function() {
    setInterval( "slideSwitch()", 5000 ); // задержка 5 секунд
});

2. HTML

<div id="slideshow">
    <img src="image_1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="image_2.jpg" alt="Slideshow Image 2" />
    ...............................................
    <img src="image_n.jpg" alt="Slideshow Image n" />
</div>

3. CSS

#slideshow { position:relative; height:350px; }
#slideshow IMG { position:absolute; top:0; left:0; z-index:8; opacity:0.0; }
#slideshow IMG.active { z-index:10; opacity:1.0; }
#slideshow IMG.last-active { z-index:9; }

Класс стиля class=«active» можно изначально назначать на желаемую картинку. Параметр height:350px можно менять на собственное усмотрение. Алгоритм вывода случайным образом можно усложнить и усовершенствовать. Более того, можно изменить анимационный эффект на свой.

Есть несколько готовых библиотек, которые позволяют без перезагрузки страницы проверять уникальность вводимых данных без перезагрузки страницы по технологии AJAX (в статье речь не о них, но о простом «велосипеде» на jQuery). Это в подавляющих случаях используется в формах регистрации на сайтах. Наример, постановка задачи: необходимо ввести Ник (ФИО) и E-mail и автоматически в фоне проверить, есть ли такой же Ник и такой же электронный почтовый адрес уже в базе зарегистрированных пользователей.



( Читать дальше )

На хабре появился пост в котором подробно и наглядно описаны нововведения в jQuery 1.6, которые несовместимы с прошлыми версиями. Так что обновляемся осторожно!