Javascript библиотека - jQuery

jQuery - что это такое?

jQuery – на сегодняшний день одна из самых сильных библиотек Javascript, главной задачей которой, является объединение HTML и Javascript в одно целое. C поддержкой библиотеки jQuery, программист легко может получить доступ практически к любому элементу разметки web страницы. Кроме этого, данная библиотека даёт возможность манипулировать атрибутами и содержимым элемента DOM. В библиотеке jQuery также имеются удобные функции для работы с Ajax.


JQuery – прекрасно подходит для украшения сайта различными анимациями, придавая тем самым, динамичность и современность дизайну, будь то меню в виде аккордеона, или динамические карты и т.п.
Большинство программистов и web дизайнеров во всем мире широко используют jQuery плагины, для создания потрясающих анимационных эффектов на веб страницах.

Один из таких плагинов представлен Вашему вниманию на данной веб странице. Его название "горизонтальный аккордеон" ( kwicks horizontal ) Именно, на его примере я постараюсь подробно объяснить установку на страницу сайта и настройку параметров отображения плагинов jQuery.

Плагины jQuery

Красивые плагины jQuery, сегодня можно встретить на страницах современных сайтов в сети интернет. Необычные эффекты, классные popup'ы, галереи и слайдшоу, реализованные преимущественно с помощью JavaScript-библиотеки jQuery.
Разработчиками в области JavaScript, ежемесячно выпускаются десятки новых jQuery плагинов, которые затем встраиваются в web проекты и радуют (а некоторые мозолят) глаз посетителя.


Главное достоинство всех плагинов состоит в том, что они кроссбраузерно отображаются во всех популярных web обозревателях и не требуют глубоких знаний javascript 'a для установки на веб странице (достаточно вставить готовый код в указанное место). Из недостатков можно лишь отметить, что при загрузке web страницы приходиться подгружать дополнительные JS-файл библиотеки jQuery.

Пример установки плагина jQuery на сайт

 

Последовательность действий для встраивания плагинов jQuery практически одинакова во всех случаях. Установку можно разделить на три основных шага:

  • подключение js-файлов библиотеки jQuery внутри тега <HEAD>…</HEAD>
  • вставляем javascript код, который при определённом событии выполнит необходимую функцию
  • размещение HTML элементов плагина jQuery на web странице
Теперь вернемся к плагину jQuery "горизонтальный аккордеон" ( kwicks horizontal ).
Шаг 1

В нашем случаи необходимо подключить к веб странице три js-файла:
Основная библиотека jQuery (jquery-1.2.6.min.js), которая подключается во всех случаях так как в ней описаны все главные функции jQuery.
И два вспомогательных JS-файла (kwicks.js и jquery.easing.js), в них описаны функции, непосредственно относящееся к плагину jQuery (kwicks).
Для этого перед закрывающемся тегом </HEAD> прописываем следующий javascript код:

  <script  src="js/jquery-1.2.6.min.js"  type="text/javascript"></script>
  <script  src="js/jquery.easing.js"  type="text/javascript"></script>
  <script  src="js/kwicks.js"  type="text/javascript"></script>
  
Шаг 2

Далее, ниже подключенных файлов, пишем код, который запустит наш плагин jQuery как только DOM будет полностью построен (ready):

  <script type="text/javascript">
  $().ready(function()  {
  $('#example6  .kwicks').kwicks({
  max:  320,
  spacing:  5,
  duration:  1500,
  easing:  'easeOutBounce'
}); }); </script>
Шаг 3

В нужном месте на web странице размещаем HTML элементы , куда будет выводиться результат работа плагина jQuery.

  <div  id="example1">
  <ul  class="kwicks">
  <li  id="kwick1"></li>
  <li  id="kwick2"></li>
  <li  id="kwick3"></li>
  <li  id="kwick4"></li>
  </ul>
  </div>
  
Вот и всё. Скачать архив с исходными данными.
В архиве продемонстрировано семь вариантов данного плагина ( горизонтальные и вертикальные ).

Комментарии по теме: "Javascript библиотека - jQuery".

  1. автор Евгений

    Добрый день!
    Я пытаюсь сделать, чтобы скрипт http://scrollme.nckprsn.com/ заработал на изображение, которому я присвоил id — solo.
    Для этого я скачал архив с плагином, расположенный в нем файл jquery.scrollme.js я разместил в папке /js/ на сервере (сайт создается на wordpress). Затем прописал в файле functions.php следующий код для исполнения:

    add_action( 'wp_enqueue_scripts', function(){
    wp_enqueue_script( 'jquery.scrollme',
    get_template_directory_uri() . '/js/jquery.scrollme.js',
    array ( 'jquery' ),
    true
    );
    });

    Далее в файле footer.php я прописал следующий код:

    <div class="scrollme">
    <div
    id="#solo"
    data-when="enter"
    data-from="0.5"
    data-to="0"
    data-opacity="0"
    data-translatex="-200"
    data-rotatez="90"
    </div>
    </div>

    Все вышеперечисленный действия никак не повлияли на анимацию изображения. Сайт я делаю для себя, по урокам в интернете, но по данному моменту мне с трудом удается найти правильное решение (пытаюсь уже 4 дня), как и что правильно взаимосоединить. Перечитал много одинаковых статей с разными вариантами подключения jQuery, но ничего не выходит. Явно что-то просто недопонимаю и упускаю.Прошу вашей помощи или совета.

    Спасибо.

  2. автор Евгений

    С каким браузером работаешь?
    Ни когда не замечал данной функции. Открытие происходит только при наведении курсора.
    Но если даже и есть, что тебе мешает поставить на первое место другой елемент (который тебе нравится)

  3. автор Серега

    В этом аккордеоне есть функция раскрытия элемента при загрузке страницы. По умолчанию он раскрывает первый элемент аккордеона. Мне интересно узнать, как раскрыть другой. Спасибо

  4. автор Евгений

    ты, это о чём?

  5. автор Сергей

    Привет! Не подскажешь, как сделать в этом скрипте, чтобы активный элемент по умолчанию был не 1, а например 3?

  6. автор Костя

    Скажите пожалуйста, как изменить стрелку "toTop", чтобы она появлялась не при первом повороте колёсика, а, скажем например, на 5-ом?

  7. автор Евгений

    Много новых красивых скриптов находится в темах WordPress'а. В принципе, любой из них можно выдернуть и адаптировать под свои нужды.
    Порядок размещения и файлы будут аналогичны описанным выше.

  8. автор Валерий Сергеевич

    Скажите пожалуйста, у вас есть примеры новых красивых скриптов?

  9. автор Евгений

    Это там, где файл "index" лежит.

  10. автор Андрей

    В корне сайта - это где?
    titel?

  11. автор Евгений

    Разместите иконку сайта (favicon.ico) в корне сайта и всё.

  12. автор Андрей

    Подскажите пожалуйста, как можно установить favikon на своём сайте?

  13. автор Егор

    Евгений, спасибо большое!)

  14. автор Евгений

    Основная библиотека jQuery (jquery-1.2.6.min.js), которая подключается во всех случаях так как в ней описаны все главные функции jQuery.
    С сайта jQuery можно всегда скачать последнюю версию.

  15. автор Егор

    Евгений, скажите пожалуйста, в "jquery-1.2.6.min.js" прописан только "аккордеон"? Или это по всем плагинам jQuery?

  16. автор Евгений

    Может Вы подключаете один и тот же JS, толбко разных версий.

  17. автор Егор

    Упс, извините, перепутал(
    Почему то когда я прописываю путь в шаге 1 перед закрытием "head" к другому плагину, этот не работает...просто в линию выстраивается, и бездействует? Как это исправить?

  18. автор Евгений

    Егор, конечно можно и все должно работать

  19. автор Егор

    Скажите пожалуйста, почему при подключении других плагинов jQuery этот отключается? И можно ли как нибудь это предотвратить, оставив его на странице и при том подключив другой плагин?

  20. автор Евгений

    Выравнивание по центру задается для DIV'а, в котором все находится.
    Шаг 3: для div'а id="example1" задаем свойство text-aling:center

  21. автор Никита

    Скажите пожалуйста, где и как прописывается выравнивание "Аккордеона" по центру?
    Никак не могу выровнять, всё время в левом углу ячейки((

  22. автор Евгений

    Слава, без начальных знаний Javascript это будет сделать тяжело.
    Настройки внешнего вида в файле "menu.js"
    Текст ссылок и сами ссылки в "menucontext.js"

  23. автор Слава

    Скажите пожалуйста, как использовать скрипт "Меню с прокруткой"?)

    я новичок в скриптах(

  24. автор Влад

    Евгений, большое спасибо!

  25. автор Евгений

    Влад, с кнопкой все очень просто:

    1. Перед </body> вставляем код:


    <a href="#" id="toTop"><img src=http://www.wellsait.ru/images/up1.png border="0" align="absmiddle" /></a>

    <script src="http://www.wellsait.ru/scripti/jquery-1.9.1.min.js" type="text/javascript"></script>

    <script src="http://www.wellsait.ru/scripti/to_top.js" type="text/javascript"></script>

    <script type="text/javascript">

    $(function() {

    $("#toTop").scrollToTop();

    });

    </script>


    2. В файл стилей (style.css) добавляем стиль кнопки:


    #toTop {

    position: fixed;

    bottom: 20px;

    right: 2px;

    background: none;

    cursor: pointer;

    }


    Скачайте файлы "to_top.js" и "jquery-1.9.1.min.js"

    разместите у себя на сервере и пропишите к ним правильно путь в выше указанном коде.

    И не забудте указать свою картинку (up1.png)

    Вот и всё.

  26. автор Влад

    Спасибо большое за скрипты! Очень классные и всё понятно расписано!!! Скажите пожалуйста, какой скрипт мне надо использовать, чтоб при постепенной прокрутке страницы появлялась стрелка "наверх", и при нажатии на неё происходил плавный переход вверх?

  27. автор Виталий

    Отличный плагин, прекрасно работает. Нашёл новое применение ему: организовал полочки с видеокассетами для экономии места на странице. Посмотрите http://sher45.narod.ru/809uap/video.html

  28. автор Андрей

    Спасибо, отличный плагин, отличный сайт. Админу респект!

  29. автор Евгений

    Михаил, скорее всего это связано с размером (width) картинок. по-пробуйте уменьшить ширину или количество картинок

    ЦИТАТА "лезет еще одна ниже"
    наверно она не помещается по ширине

  30. автор Михаил

    Тоже проблема с активностью картинки, лезет еще одна ниже, что делать?

  31. автор кристина

    Спасибо

  32. автор Евгений

    Спасибо огромное!!!!!!!!!! извините=)) ещё вопрос=) русский язык почему то не отображается, только английский.

  33. автор Евгений

    <li id="kwick_2"><a href="index.html"><img src="img.jpg" width="400" height="300"></a></li>

  34. автор Евгений

    хотел сделать как выше описанно чтобы картинка была активной, но именно в "аккордеоне" ни чего не произошло, появилась еще одна картинка ниже. Что делать?

  35. автор Андрей

    Извиняюсь! Открывал в Firefox, где установлено Real Plaer и Adobe Flech они видимо друг другу мешают. Первое удалил, и проблема исчезла. Спасибо.

  36. автор Евгений

    Посмотрел, всё работает.
    Но лучше установить облако из архива new_tagcloud.zip (ссылка в комментариях)

  37. автор Андрей

    Добрый день!
    Плагин облако тегов работает только в автономном режиме без подключения к интернету. Выкладываю все на сайт в инете - ничего нет. Подскажите пожалуйста в чем проблема?

  38. автор Сергей Александрович

    Просто нет слов сайт уникальный! Спасибо Администратору wellsait.ru . ПРИМЕРЫ ВАШИХ СКРИПТОВ НА taganrogboard.ru
    Еще раз спасибо!!!!

  39. автор Евгений

    В третьем шаге: <li id="kwick_4"><a href="url ссылки"><img src="url фото" /></a></li>

  40. автор Владимир

    Подскажите как можно сделать фото на аккордеоне активными, то есть при нажатии на фото переадресация на другую страницу сайта
    Зарание благодарю!

  41. автор нармин

    spasibo

  42. автор Андрей

    Вот так чудеса не подозревал что много такого можно сделать!!! Спасибо админу что выложил все это. Обязательно попробую что нибудь!!!

  43. автор Евгений

    Большая просьба, оставлять сообщения только по данной теме. Спам, реклама и т.д. будут удаляться.

Добавить комментарий