Хороший обзор полезностей в разработке с помощью jQuery.

Предлагаю посмотреть на очень красивый и качественный слайдер контента (да и картинок, если хотите) на JQuery. На данный момент разработано три стиля (картинки кликабельны, каждая ведёт на демо):

Modern Slide In


Sliding Horizontal Parallax


Apple Style


Нужно отметить, что это бета-версия плагина и авторы предлагают присоединиться к дальнейшей разработке по усовершенствованию.

Кроссбраузерность:
IE6-10
Opera
GoogleChrome
FireFox
Safari

Главные моменты ТЗ:

— должно работать локально на компьютерах пользователей
— во всех браузерах (даже в ie6)
— должно быть простым в использовании
— должно соответствовать задуманному дизайну, его элементам.
— легко расширяться — т.е. при необходимости выпуска новых версий должно «легко» расширяться функционалом с помощью JavaScript и изменяться, добавляя новые функциональные элементы при помощи css и dhtml.



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

Предоставлен интерактивный список с кратким описанием из 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

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


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

Навеяно этим топиком по теме. Можно сказать, что это более усовершенсвованный способ, так как контентом могут выступать и изображения (картинки).
Три кита: код на 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 и автоматически в фоне проверить, есть ли такой же Ник и такой же электронный почтовый адрес уже в базе зарегистрированных пользователей.



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

Очень часто сталкиваюсь с вопросами реализации связанных динамичных выпадающих списков (select), очень много методов, самых различных, даже JSON в некоторых используется, что на мой скромный взгляд только дублирует данные из базы и создаёт банальную избыточность.

Однажды познакомился с $.ajax (JQuery), который может передавать данные методами GET или POST и понял, что связанные списки, это проще простого.

Ниже описан метод с использованием базы данных. Вся красота решения состоит в написании двух маленьких (похожих друг на друга) функций на JavaScript и одного исполняемого файла на PHP с кодом в 20 строк алгоритма переключения и генерации.

Нужно отметить, что есть методы, в которых можно генерировать динамические списки неограниченное количесво раз и все они будут связаны. В данной статье приводятся всего три списка, что, по-моему, достаточно для понимания метода как такового и создания на его основе улучшенных алгоритмов реализации задачи.



( Решение проблемы )

При подключении jQuery к Joomla 1.5.x столкнулся с проблемой отработки скрипта почему-то только в Google Chrome. Даже IE давал результаты.

Методом простого отслеживания (просто отключит header Joomla) выяснил, что причиной были именно встроенные по-умолчанию скрипты Mootools.

Вопрос конечно же загуглен до предела, но все же хочется повториться и услышать мнения сообщества по этому вопросу.
Самым простым решение для меня было отключить Mootools при помощи вставки скрипта:

<?php $headerstuff = $this->getHeadData();
  $scripts = $headerstuff['scripts'];
  $headerstuff['scripts'] = array();
  foreach($scripts as $url=>$type) {
    if (strpos($url, 'js/mootools.js') === false && strpos($url, 'js/caption.js') === false) {
      $headerstuff['scripts'][$url] = $type;
    }
  }
  $this->setHeadData($headerstuff); ?>

При этом я увидел желаемый результат! На что же повлиял отключенный Mootools остается для меня загадкой.

p.s. Включение режима noConflict jQuery результата не дало. Но я догадываюсь, что тупой непонимающей вставкой кода, результата и не должно быть, потому продолжу курить JavaScript чего и вам желаю.
Спасибо за внимание.