9182

jQuery для начинающих // JavaScript

Конспект

Информатика, кибернетика и программирование

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

Русский

2013-02-25

435.14 KB

15 чел.

jQuery для начинающих // JavaScript

jQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение – лучше всего начинать с наглядных примеров, и они далее…

Как же все-таки работает jQuery?

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

?

1

2

3

<head>

<script type="text/javascript" src="jquery.js"></script>

</head>

А основные моменты Вам поможет понять следующая диаграмма:  

Как получить элемент с помощью jQuery?

Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивается селектор jQuery:

  1.  $(“#header”) – получение элемента с id=”header”
  2.  $(“h3″) – получить все <h3> элементы
  3.  $(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
  4.  $(“ul li”) – получить все <li> элементы из списка <ul>
  5.  $(“ul li:first”) – получить только первый элемент <li> из списка <ul>

Выдвижная панель

Начнем с простенького примера – слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример) Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между “active” и “btn-slide”), а панелька с id=”panel” будет выдвигаться/прятаться. (класс “active” изменяет позицию фонового изображения, см. CSS файл во вложении).

?

1

2

3

4

5

6

$(document).ready(function(){

$(".btn-slide").click(function(){

$("#panel").slideToggle("slow");

$(this).toggleClass("active");

 });

});

 

Магические исчезновения

Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):

Когда мы кликаем по картинке <img class=”delete”>, будет найден родительский элемент <div class=”pane”>, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:

?

1

2

3

4

5

6

7

$(document).ready(function(){

 

$(".pane .delete").click(function(){

$(this).parents(".pane").animate({ opacity: "hide" }, "slow");

 });

 

});

Связанная анимация

Теперь пример посложнее, но он поможет Вам лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см. пример): Line 0: когда прогрузилась страница (DOM готов к манипуляциям) Line 1: привязываемся к событию click для элемента <a class=”run”> Line 2: манипулируем элементом <div id=”box”> – уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds) Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром : “slow”, “normal”, “fast” или в миллисекундах Line 4: затем opacity=1, left=0, height=100, width=100, скорость – “slow” Line 5: затем top=0, скорость – “fast” Line 6: затем slideUp (с дефолтной скоростью анимации – “normal”) Line 7: затем slideDown, скорость – “slow” Line 8: возвращаем false для того чтобы браузер не перешел по ссылке

?

01

02

03

04

05

06

07

08

09

10

11

12

$(document).ready(function(){

$(".run").click(function(){

 

$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)

.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")

.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")

.animate({top: "0"}, "fast")

.slideUp()

.slideDown("slow")

 return false;

});

});

Гармошка #1

Пример реализации “гармошки”. (см. пример) Теперь приступим к разбору полетов: Первой строчкой мы добавляем класс “active” первому элементу <h3> внутри <div class=”accordion”> (класс”active” отвечает за позиционирования фонового рисунка – иконки со стрелочкой). Во второй строчке мы прячем все не первые <p> элементы внутри <div class=”accordion”>. Когда происходит клик по заголовку <h3>, для следующего в нём элемента <p> будет применен эффект slideToggle, затем для всех остальных элементов <p> будет применен эффект slideUp. Следующие действие изменяет класс заголовка на “active”, затем ищем все остальные заголовки <h3> и убираем у них класс “active”

?

01

02

03

04

05

06

07

08

09

10

11

12

13

$(document).ready(function(){

$(".accordion h3:first").addClass("active");

$(".accordion p:not(:first)").hide();

 

$(".accordion h3").click(function(){

 

$(this).next("p").slideToggle("slow")

.siblings("p:visible").slideUp("slow");

$(this).toggleClass("active");

$(this).siblings("h3").removeClass("active");

 });

 

});

Гармошка #2

Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример)

В CSS у нас указано для всех элементов <p> display:none. Теперь нам необходимо открыть третью панель. Для этого мы можем написать следующее $(“.accordion2 p”).eq(2).show(), где eq обозначает равенство. Помните, что индексирование начинается с нуля:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

$(document).ready(function(){

 

$(".accordion2 h3").eq(2).addClass("active");

$(".accordion2 p").eq(2).show();

 

$(".accordion2 h3").click(function(){

$(this).next("p").slideToggle("slow")

.siblings("p:visible").slideUp("slow");

$(this).toggleClass("active");

$(this).siblings("h3").removeClass("active");

 });

 

});

Анимация для события hover #1

Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см.пример):

Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента <em>, и анимируется его прозрачность и расположение:

?

1

2

3

4

5

6

7

$(document).ready(function(){

$(".menu a").hover(function() {

$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");

}, function() {

$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");

 });

});

Анимация для события hover #2

Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см.пример) Первым делом добавим тэг <em> в каждый элемент <a>. Когда произойдет событие mouseover, мы возьмем текст из атрибута “thetitle” и сохраним его в переменной “hoverText”, затем этот текст будет вставлен в тэг <em>:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

$(document).ready(function(){

 

$(".menu2 a").append("&lt;em&gt;&lt;/em&gt;");

 

$(".menu2 a").hover(function() {

$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");

var hoverText = $(this).attr("title");

$(this).find("em").text(hoverText);

}, function() {

$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");

 });

 

});

Кликабельные блоки

Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример): Создадим список <ul> с классом class=”pane-list” и мы хотим сделать элементы <li> кликабельными. Для начала привяжемся к событию click для элемента “.pane-list li”; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга <a> и сделает редирект на страницу указанную в атрибуте href.

?

1

2

3

4

5

6

7

$(document).ready(function(){

 

$(".pane-list li").click(function(){

window.location=$(this).find("a").attr("href"); return false;

 });

 

});


Складывающиеся панельки

Ну а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox). (см. пример)  

  1.  скрываем все элементы <div class=”message_body”> после первого.
  2.  скрываем все элементы <li> после пятого
  3.  клик по <p class=”message_head”> – вызывает метод slideToggle для следующего элемента <div class=”message_body”>
  4.  клик по <a class=”collpase_all_message”> – вызывает метод slideUp для всех <div class=”message_body”>
  5.  клик по <a class=”show_all_message”> – скрывает элемент, и отображает <a class=”show_recent_only”>, так же вызывается метод slideDown для всех <li> послепятого
  6.  клик по <a class=”show_recent_only”> – скрывает элемент, и отображает <a class=”show_all_message”>, так же вызывается метод slideUp для всех <li> после пятого

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

$(document).ready(function(){

 

//hide message_body after the first one

$(".message_list .message_body:gt(0)").hide();

 

//hide message li after the 5th

$(".message_list li:gt(4)").hide();

 

//toggle message_body

$(".message_head").click(function(){

$(this).next(".message_body").slideToggle(500)

return false;

});

 

//collapse all messages

$(".collpase_all_message").click(function(){

$(".message_body").slideUp(500)

return false;

});

 

//show all messages

$(".show_all_message").click(function(){

$(this).hide()

$(".show_recent_only").show()

$(".message_list li:gt(4)").slideDown()

return false;

});

 

//show recent messages only

$(".show_recent_only").click(function(){

$(this).hide()

$(".show_all_message").show()

$(".message_list li:gt(4)").slideUp()

 return false;

});

 

});


Имитация Backend’a WordPress’a

Я думаю многие из читателей сталкивались с админской частью wordpress’a, точнее с редактирование комментариев. Попробуем сделать что-то подобное. Для анимации фонового цвета нам понадобиться соответствующий плагин для jQuery. (см. пример)

  1.  добавим класс “alt” к каждому чётному элементу <div class=”pane”> (данный класс изменяет цвет фона элемента)
  2.  клик по <a class=”btn-delete”> инициирует появление сообщения (alert), так же происходит анимация фонового цвета и прозрачности (backgroundColor и opacity) для <div class=”pane”>
  3.  клик по <a class=”btn-unapprove”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на желтый и обратно) и добавляет класс “spam”
  4.  клик по <a class=”btn-approve”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на зеленый и обратно) и удаляет класс “spam”
  5.  клик по <a class=”btn-spam”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на красный), и изменяет параметр “opacity” на “hide”

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

//don't forget to include the Color Animations plugin

$(document).ready(function(){

 

$(".pane:even").addClass("alt");

 

$(".pane .btn-delete").click(function(){

alert("This comment will be deleted!");

 

$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")

.animate({ opacity: "hide" }, "slow")

return false;

});

 

$(".pane .btn-unapprove").click(function(){

$(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")

.animate({ backgroundColor: "#ffffff" }, "slow")

.addClass("spam")

return false;

});

 

$(".pane .btn-approve").click(function(){

$(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")

.animate({ backgroundColor: "#ffffff" }, "slow")

.removeClass("spam")

return false;

});

 

$(".pane .btn-spam").click(function(){

$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")

.animate({ opacity: "hide" }, "slow")

return false;

 });

});

Галерея изображений

Простейший пример реализации галереи, без перезагрузки страницы. (см. пример) Для начала добавим тэг <em> в заголовки <h2> По клику на изображения в <p class=thumbs> выполняем следующие действия:

  1.  сохраняем значение атрибута “href” в переменной “largePath”
  2.  сохраняем значение атрибута “title” в переменной “largeAlt”
  3.  заменяем в элементе <img id=”largeImg”> значение атрибута “scr” и “alt” значениями из переменных “largePath” и “largeAlt”
  4.  так же присваиваем элементу “h2 em” значение из “largeAlt”

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

$(document).ready(function(){

 

$("h2").append('<em></em>')

 

$(".thumbs a").click(function(){

 

var largePath = $(this).attr("href");

var largeAlt = $(this).attr("title");

 

$("#largeImg").attr({ src: largePath, alt: largeAlt });

 

$("h2 em").html(" (" + largeAlt + ")"); return false;

 });

 

});

Стилизируем ссылки

Большинство нормальных браузеров легко понимают когда мы хотим добиться от них стилизации ссылок для различного типа файлов, для это цели можно использовать следующее CSS правило: a[href $='.pdf'] { … }. Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery. (см. пример) Для начала добавим класс для каждой ссылки, в соответствии с типом файла. Затем выберем все элементы <a> которые не содержат ссылки на “http://www.webdesignerwall.com” и не начинающиеся на “#” в “href”, затем добавим им класс “external” и устанавливаем target= “_blank”.

?

01

02

03

04

05

06

07

08

09

10

11

12

13

$(document).ready(function(){

 

$("a[href$=pdf]").addClass("pdf");

 

$("a[href$=zip]").addClass("zip");

 

$("a[href$=psd]").addClass("psd");

 

$("a:not([href*=http://www.webdesignerwall.com])").not("[href^=#]")

.addClass("external")

.attr({ target: "_blank" });

 

});

Так же Вы можете посмотреть все примеры или скачать jQuery tutorial for beginners.

Вольный перевод: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/ Так же много полезных ссылок по jQuery найдете на следующей странице: http://blog.termit.name/jquery/ Может кому пригодиться еще библиотека для PHP: http://anton.shevchuk.name/php/php-library-for-jquery/


jQuery для начинающих. Часть 2. JavaScript Меню. // JavaScript

В первой части были рассмотрены базовые принципы работы селекторов и приведены несколько примеров, в данной статье я постараюсь акцентировать внимание на реализации JavaScript меню для Вашего сайта.

Если Вам готовый код наглядней документации, то переходим от слов к делу, т.е. на страницу с примерами.

Slide меню

Два slide-меню на странице: вверху и внизу.

Кликаем по ссылке с классом “btn-slide”, выезжает панель с меню.

Частично данный пример присутствует в первой части, так что особо углубляться в реализацию не буду, приведу лишь JavaScript код с пояснениями:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

<script type="text/javascript">

// когда страница загрузится

$(document).ready(function(){

// вешаем обработчик на ссылку с классом "btn-slide" (верхнее меню)

$(".btn-slide").click(function(){

// выдвигаем/прячем панель с id = panel1

$("#panel1").slideToggle("slow");

// изменяем класс самой ссылки

 $(this).toggleClass("active");

// и ничего не делаем дальше (дабы не было перехода по ссылки)

return false;

});

 

// вешаем обработчик на ссылку с классом "btn-slide2" (нижнее меню)

 $(".btn-slide2").click(function(){

// выдвигаем/прячем панель с id = panel2

$("#panel2").slideToggle("slow");

// изменяем класс самой ссылки

 $(this).toggleClass("active2");

// и ничего не делаем дальше (дабы не было перехода по ссылки)

return false;

});

});

</script>

Slide меню 2

Slide-меню слева и справа страницы. Для начала приготовим HTML :

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

<div class="left">

<!-- Непосредственно содержание меню, мы его прячем -->

 <div class="panel">

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

 </ul>

</div>

<!-- Панелька с кнопкой -->

 <p class="slide"><a href="#" class="btn-slide">Меню</a></p>

</div>

У нас должно получиться что-то наподобие следующего:

Теперь создадим обработчик событий для ссылок с классом “btn-slide”:

?

01

02

03

04

05

06

07

08

09

10

// создаем обработчик событий для ссылок с классом "btn-slide"

$(".btn-slide").toggle(function(){

// ... 1-ый клик по ссылке

// возвращаем false

return false;

},function(){

 // ... 2-ой клик по ссылке

// возвращаем false

return false;

});

Затем нам необходимо найти элемент с классом “panel” и выдвинуть его на 120 пикселей:

?

1

2

3

4

// идем по DOM'у на 2-а уровня вверх, внутри элемента (это div c классом left/right) находим нужный нам элемент и приращиваем ему 120 пикселей в ширину

$(this).parent().parent().find(".panel").animate({"width": "+=120px"}, "slow");

// заменяем класс кнопки (для изменение стрелочки)

$(this).toggleClass("active");

Соединяем это вместе:

?

1

2

3

4

5

6

7

8

9

$(document).ready(function(){

$(".btn-slide").toggle(function(){

$(this).parent().parent().find(".panel").animate({"width": "+=120px"}, "slow");

$(this).toggleClass("active"); return false;

},function(){

$(this).parent().parent().find(".panel").animate({"width": "-=120px",opacity: "hide"}, "slow");

$(this).toggleClass("active"); return false;

 });

});

Drop-down меню

Одна из самых распространенных реализаций меню для сайта это горизонтальное выпадающее меню, его конечно можно реализовать при помощи CSS, но статья у нас о jQuery, так что будем орудовать оным. Начнем с HTML’a (замечу, что для всех остальных примеров код практически не отличается):

Ну и собственно сам HTML:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<div class="topmenu">

<ul>

<li><a href="#" title="Меню 1">Меню 1</a>

<ul>

<li><a href="#" title="Элемент 1.1">Элемент 1.1</a></li>

<li><a href="#" title="Элемент 1.2">Элемент 1.2</a></li>

<li><a href="#" title="Элемент 1.3">Элемент 1.3</a></li>

</ul>

</li>

<li><a href="#" title="Меню 2">Меню 2</a>

<ul>

<li><a href="#" title="Элемент 2.1">Элемент 2.1</a></li>

<li><a href="#" title="Элемент 2.2">Элемент 2.2</a></li>

<li><a href="#" title="Элемент 2.3">Элемент 2.3</a></li>

</ul>

</li>

<li><a href="#" title="Меню 3">Меню 3</a>

<ul>

<li><a href="#" title="Элемент 3.1">Элемент 3.1</a></li>

<li><a href="#" title="Элемент 3.2">Элемент 3.2</a></li>

<li><a href="#" title="Элемент 3.3">Элемент 3.3</a></li>

 </ul>

</li>

</ul>

</div>

Далее нам необходимо добавить обработчик для события hover для элементов li:

?

1

2

3

4

5

6

7

8

$('.topmenu ul li').hover(

 function() {

// ...

},

function() {

// ...

}

);

И отображаем под-меню:

?

1

2

3

4

// находим элемент ul и вызываем анимацию slideDown

$(this).find('ul').slideDown();

// изменяем фон выбранного элемента путем добавления класса active

$(this).addClass("active");

А теперь всё вместе:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

$(document).ready(function(){

$('.topmenu ul li').hover(

function() {

$(this).addClass("active");

$(this).find('ul').stop(true, true); // останавливаем всю текущую анимацию

$(this).find('ul').slideDown();

},

function() {

$(this).removeClass("active");

$(this).find('ul').slideUp('fast');

 }

);

});

Drop-down AJAX меню

Горизонтальное выпадающее меню с подгрузкой элементов AJAX’ом. Для начала нам понадобится само меню:

?

1

2

3

4

5

6

7

<div class="topmenu">

<ul>

<li id="menu1"><a href="#" title="Меню 1">Меню 1</a></li>

<li id="menu2"><a href="#" title="Меню 2">Меню 2</a></li>

<li id="menu3"><a href="#" title="Меню 3">Меню 3</a></li>

 </ul>

</div>

И заготовки для подменю, назовем их menu1.html, menu2.html и menu3.html – по id соответствующих элементов меню (скорей всего данные элементы будут генерироваться динамически, но для упрощения примера используем статические странички):

Пример menu1.html:

?

1

2

3

4

5

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

Теперь, как и в предыдущем примере, нам необходим обработчик события hover:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

$(document).ready(function(){

$('.topmenu ul li').hover(

 function() {

// ... тут необходимо внести изменения в код

$(this).addClass("active");

},

function() {

// тут оставляем так как есть

 $(this).removeClass("active");

$(this).find('ul').slideUp('fast');

 }

);

});

Теперь необходимо загрузить недостающие элементы меню посредством AJAX’a:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

// получаем id активного элемента меню

var id = $(this).attr('id');

// запихиваем активный элемент в локальную переменную

var li = $(this);

$.ajax({

// формируем имя запрашиваемой посредством AJAX страницы

 url: 'ajax/'+id+'.html',

 beforeSend: function(){

// перед тем как "спросить" изменяем класс элемента - отображаем loading картинку

 li.addClass('loading');

},

success: function(data){

 // наполняем подменю

li.append(data);

// показываем что получилось

 li.find('ul').slideDown();

// убираем loading картинку

 li.removeClass('loading');

}

});

Собираем:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

$(document).ready(function(){

$('.topmenu ul li').hover(

 function() {

// добавляем проверочку - не загружали ли до этого элементы

 if ($(this).find('ul').length == 0) {

var id = $(this).attr('id');

var li = $(this);

$.ajax({

url: 'ajax/'+id+'.html',

beforeSend: function(){

li.addClass('loading');

},

success: function(data){

li.append(data);

 li.find('ul').stop(true, true); // останавливаем всю текущую анимацию

 li.find('ul').slideDown();

li.removeClass('loading');

}

});

} else {

$(this).find('ul').stop(true, true); // останавливаем всю текущую анимацию

$(this).find('ul').slideDown();

}

$(this).addClass("active");

},

function() {

$(this).find('ul').slideUp('fast');

 $(this).removeClass("active");

}

);

});

Drop-down меню

Вертикальное выпадающее меню. Достаточно простенький примерчик:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

$(document).ready(function(){

// добавить обработчик события hover

 $('.topmenu ul li').hover(

function() {

$(this).find('ul:first').stop(true, true);

$(this).find('ul:first').slideDown();

},

function() {

$(this).find('ul:first').slideUp('fast');

 }

);

// всем элементам меню с вложенностью добавить символ &raquo;

 $('.topmenu li:has(ul)').find('a:first').append('&raquo;');

});

Float меню

Плавающее меню. Нам понадобится плагин Dimensions (дабы работали методы height() и width()) – для jQuery 1.3.x данный плагин уже не нужен. Ну с HTML я думаю, Вы разберетесь:

Теперь по порядку – начнем с получение информации о текущем расположении “плавающих” меню:

?

1

2

3

4

// получаем информацию из css о расположении верхнего меню

menu1 = parseInt($(".right").css("top").substring(0,$(".right").css("top").indexOf("px")));

// расположении нижнего меню вычисляем отталкиваясь от размеров окна (96 взято на глаз)

menu2 = $(window).height() - 96;

Далее, нам необходимо “повесить” свою функцию для события scroll:

?

1

2

3

$(window).scroll(function () {

// тут будем перетаскивать наши меню

});

Ну и собственно наполнение:

?

1

2

3

4

5

6

7

8

9

$(window).scroll(function () {

// определяем новое положение для наших меню

 offset1 = menu1 + $(document).scrollTop() + "px";

offset2 = menu2 - $('.left .panel').height() + $(document).scrollTop() + "px";

 

// перетаскиваем элементы на новое место

$('.right').animate({top:offset1},{duration:500,queue:false});

$('.left').animate({top:offset2},{duration:1000,queue:false});

});

Так же добавим отображение/скрытие элементов подменю:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

// для всех элементов "a" которые находятся в "li" со вложенными списками "ul"

$('.panel ul li:has(ul) a').click(function() {

 // идем к паренту, находим "ul" и прячем/скрываем его

 $(this).parent().find('ul').slideToggle();

 return false;

});

// кнопка "+" - скрываем все "ul" вложенные в "li"

$('a.plus').click(function(){

// идем к паренту, находим следующий элемент в доме, ищем в нем "ul li ul", выполняем "slideUp"

 $(this).parent().next().find('ul li ul').slideUp('fast');

 return false;

});

// кнопка "-" - отображаем все "ul" вложенные в "li"

$('a.minus').click(function(){

// идем к паренту, находим следующий элемент в доме, ищем в нем "ul li ul", выполняем "slideDown"

 $(this).parent().next().find('ul li ul').slideDown('slow');

 return false;

});

Так же Вы можете скачать все примеры в одном архиве.


jQuery для начинающих. Часть 3. AJAX // JavaScript

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов…

Что такое AJAX я думаю рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы…

Примечание: Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)

jQuery(..).load

Начнем с самого простого – загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

  1.  url запрашиваемой страницы
  2.  передаваемые данные (необязательный параметр)
  3.  функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:

?

1

2

3

4

5

$(document).ready(function(){ // по окончанию загрузки страницы

$('#example-1').click(function(){ // вешаем на клик по элементу с id = example-1

$(this).load('ajax/example.html'); // загрузку HTML кода из файла example.html

})

});

Пример подгружаемых данных (содержимое файла example.html):

?

1

2

3

Example<br/>

Data Loaded By AJAX<br/>

Bye-Bye

Пример работы

jQuery.ajax

Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр – объект включающий в себя все настройки (выделены параметры которые стоит запомнить):

  1.  async – асинхронность запроса, по умолчанию true
  2.  cache – вкл/выкл кэширование данных браузером, по умолчанию true
  3.  contentType – по умолчанию “application/x-www-form-urlencoded”
  4.  data – передаваемые данные – строка иль объект
  5.  dataFilter – фильтр для входных данных
  6.  dataType – тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
  7.  global – тригер – отвечает за использование глобальных AJAX Event’ов, по умолчанию true
  8.  ifModified – тригер – проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false
  9.  jsonp – переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)
  10.  processData – по умолчанию отправляемые данный заворачиваются в объект, и отправляются как “application/x-www-form-urlencoded”, если надо иначе – отключаем
  11.  scriptCharset – кодировочка – актуально для JSONP и подгрузки JavaScript’ов
  12.  timeout – время таймаут в миллисекундах
  13.  type – GET либо POST
  14.  url – url запрашиваемой страницы

Локальные AJAX Event’ы:

  1.  beforeSend – срабатывает перед отправкой запроса
  2.  error – если произошла ошибка
  3.  success – если ошибок не возникло
  4.  complete – срабатывает по окончанию запроса

Для организации HTTP авторизации (О_о):

  1.  username – логин
  2.  password – пароль

Пример javaScript’а:

?

1

2

3

4

5

6

7

8

9

$.ajax({

url: '/ajax/example.html', // указываем URL и

dataType : "json", // тип загружаемых данных

success: function (data, textStatus) { // вешаем свой обработчик на функцию success

$.each(data, function(i, val) { // обрабатываем полученные данные

/* ... */

});

}

});

jQuery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

  1.  url запрашиваемой страницы
  2.  передаваемые данные (необязательный параметр)
  3.  callback функция, которой будет скормлен результат (необязательный параметр)
  4.  тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

jQuery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:

  1.  url запрашиваемой страницы
  2.  передаваемые данные (необязательный параметр)
  3.  callback функция, которой будет скормлен результат (необязательный параметр)
  4.  тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

JavaScript:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

$(document).ready(function(){ // по завершению загрузки страницы

$('#example-3').click(function(){ // вешаем на клик по элементу с id = example-3

$.post('ajax/example.xml', {}, function(xml){ // загрузку XML из файла example.xml

 $('#example-3').html('');

$(xml).find('note').each(function(){// заполняем DOM элемент данными из XML

$('#example-3').append('To: ' + $(this).find('to').text() + '<br/>')

.append('From: ' + $(this).find('from').text() + '<br/>')

.append('<b>' + $(this).find('heading').text() + '</b><br/>')

.append( $(this).find('body').text() + '<br/>');

 });

}, 'xml'); // указываем явно тип данных

})

});

Файл example.xml:

?

1

2

3

4

5

6

7

<?xml version="1.0" encoding="UTF-8"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

Пример работы

jQuery.getJSON

Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:

  1.  url запрашиваемой страницы
  2.  передаваемые данные (необязательный параметр)
  3.  callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

?

01

02

03

04

05

06

07

08

09

10

11

12

$(document).ready(function(){ // по завершению загрузки страницы

$('#example-4').click(function(){ // вешаем на клик по элементу с id = example-4

$.getJSON('ajax/example.json', {}, function(json){ // загрузку JSON данных из файла example.json

 $('#example-4').html('');

 // заполняем DOM элемент данными из JSON объекта

 $('#example-4').append('To: ' + json.note.to + '<br/>')

.append('From: ' + json.note.from + '<br/>')

.append('<b>' + json.note.heading + '</b><br/>')

.append( json.note.body + '<br/>');

 });

})

});

Файл example.json:

?

1

2

3

4

5

6

7

8

{

note:{

to:'Tove',

from:'Jani',

heading:'Reminder',

body:'Don\'t forget me this weekend!'

 }

}

Пример работы

jQuery.getScript

jQuery.getScript данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:

  1.  url запрашиваемого скрипта
  2.  callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

?

1

2

3

4

5

6

7

$(document).ready(function(){ // по завершению загрузки страницы

$('#example-5').click(function(){ // вешаем на клик по элементу с id = example-5

$.getScript('ajax/example.js', function(){ // загрузку JavaScript'а из файла example.js

testAjax(); // выполняем загруженный JavaScript

});

})

});

Файл example.js:

?

1

2

3

function testAjax() {

$('#example-5').html('Test completed'); // изменяем элемент с id = example-5

}

Пример работы

Обработчики подгруженного контента

Если перед вами стоит задача повесить обработчик события на подгружаемый AJAX’ом контент, то вам стоит обратить внимание на метод live, с его помощью вы сможете осуществить задуманное, необходимо лишь немного преобразовать код:

?

01

02

03

04

05

06

07

08

09

10

11

12

// было бы, если бы контент элемента #main не подгружался AJAX'ом

$('#main a').click(function(event){

console.log($(this).attr('href'));

 return false; // отменяем действие по умолчанию и всплытие события

});

 

// теперь предположим, что контент элемента #main подгружается AJAX'ом

// вносим минимум изменений в предыдущий код

$('#main a').live('click', function(event){

console.log($(this).attr('href'));

 event.preventDefault(); // отменяем действие по умолчанию, но не трогаем bubbling - чтобы не мешать другим обработчикам

});

В данном примере используется метод live, но я бы всё же посоветовал использовать метод delegate, более подробно о данном методе описано в 6-ой части — «События»

Отправка Формы

Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства “сбора” данных из формы лучше использовать плагин jQuery Form либо родный методы serialize и serializeArray.

Отправка Файлов

Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload

Взаимодействие с PHP

Для организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery

Примеры использования JSONP

Отдельно стоит отметить использование JSONP – ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать – то это подключение удаленного JavaScript’a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):

При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:

http://api.domain.com/?type=jsonp&query=test&callback=?

Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().

Google Поиск

Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье “jQuery + AJAX + (Google Search API || Yahoo Search API)

Yahoo Поиск

Пример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье “jQuery + AJAX + (Google Search API || Yahoo Search API)

JSONP API

Приведу так же небольшой список открытых API с поддержкой JSONP:

  1.  Google – поиск и большинство сервисов
  2.  Yahoo – поиск и большинство сервисов
  3.  Flickr
  4.  MediaWiki – соответственно и все производные – Wikipedia, Wiktionary и т.д.
  5.  Digg
  6.  CNET
  7.  aideRSS

События

Для удобства разработки, на AJAX запросах висит несколько event’ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event’ы можно повесить свою функцию.

Пример для отображения элемента с id=”loading” во время выполнения любого AJAX запроса:

?

1

2

3

4

5

$("#loading").bind("ajaxSend", function(){

$(this).show(); // показываем элемент

}).bind("ajaxComplete", function(){

$(this).hide(); // скрываем элемент

});

Для локальных событий – вносим изменения в опции метода ajax():

?

1

2

3

4

5

6

7

8

9

$.ajax({

beforeSend: function(){

// Handle the beforeSend event

},

complete: function(){

// Handle the complete event

 }

// ...

});

Для большей наглядности, приведу следующую диаграмму (кликабельно):

Ну и собственно список всех event’ов:

  1.  ajaxStart – Данный метод вызывается в случае когда побежал AJAX запрос, и при этом других запросов нету
  2.  beforeSend – Срабатывает до отправки запроса, позволяет редактировать XMLHttpRequest. Локальное событие
  3.  ajaxSend – Срабатывает до отправки запроса, аналогично beforeSend
  4.  success – Срабатывает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных. Локальное событие
  5.  ajaxSuccess – Срабатывает по возвращению ответа, аналогично success
  6.  error – Срабатывает в случае ошибки. Локальное событие
  7.  ajaxError – Срабатывает в случае ошибки
  8.  complete – Срабатывает по завершению текущего AJAX запроса (с ошибкои или без – срабатывает всегда).Локальное событие
  9.  ajaxComplete – Глобальное событие, аналогичное complete
  10.  ajaxStop – Данный метод вызывается в случае когда больше нету активных запросов


 

А также другие работы, которые могут Вас заинтересовать

25365. Место и роль общественных объединений в реализации социальной работы 30.5 KB
  Место и роль общественных объединений в реализации социальной работы Современная парадигма социальной работы рассматривает ее как многосубъектную деятельность характеризующуюся активным участием наряду с государством общественных и благотворительных организаций в решении социальных проблем населения. В последние годы наблюдается значительный рост общественных организаций активизация их участия в осуществлении мероприятий по социальной защите населения. идея создания общественных объединений предполагала что они станут резервом...
25366. Социальное прогнозирование как метод научного познания: объект, предмет, его виды 14.26 KB
  В отечественной науке многочисленные попытки прогнозирования были осуществлены в 20х начале 30х годов. Научные основы прогнозирования вообще и социального в частности стали разрабатываться в нашей стране в конце 50х начале 60х годов что связано с творчеством таких ученых как Э. Цель прогнозирования не просто предвидеть те или иные явления а способствовать более эффективному воздействию на них в нужном направлении. В ходе научного прогнозирования решаются 2 задачи: 1 определяется и мотивируется цель вероятного...
25367. Антропологические основания социальной работы 23.5 KB
  Структура ответа: Вступление Понятие социальной работы Понятие антропологии. Антропологические основания социальной работы Вывод Социальная работа носит междисциплинарный характер поэтому она включает знания из различных областей. Социальная работа специфический вид профессиональной деятельности оказание государственного и негосударственного содействия человеку с целью обеспечения культурного социального и материального уровня его жизни предоставление индивидуальной помощи человеку семье или группе лиц словарьсправочник по...
25368. Социально-медицинские проблемы организации социальной работы 53.5 KB
  Социальномедицинские проблемы организации социальной работы. Все вышеперечисленные социальномедицинские проблемы свидетельствуют о том что резко возрастает объективная потребность решения взаимосвязанных проблем медицинского и социального характера на качественно новом уровне на уровне медикосоциальной работы. Специфика содержания и методики медикосоциальной работы позволяет рассматривать ее как самостоятельное направление многоаспектной социальной работы. Основным правовым актом обеспечивающим развитие социальной работы в сфере...
25369. Психология как система жизненных явлений 43.5 KB
  Психология наука о закономерностях развития и функционирования психики как особой формы жизнедеятельности. Психология как наука развивалась параллельно с такими понятиями как общественная деятельность социальная работа социальные службы и т. Психология сыграла немаловажную роль в развитии самого явления социального.
25370. Социологические проблемы 92 KB
  Проводятся многочисленные исследования имеющие целью определить экономический эффект образования проанализировать распределение детей из разных социальных слоев по типам учебных заведений влияние социальной среды на успехи учащихся в школе. Педагогика в социальной работе выступает в роли стержня деятельного компонента социальной работы потому что информационные задачи вопросы формирования знаний об обществе отношениях в группе воспитания защищенности развитие готовности личности к самопомощи решаются в основном педагогическими...
25371. Социальная сфера человеческой жизни 55.5 KB
  Многие страны пережили во второй половине XX столетия некий этапный период который потребовал не только поисков эффективных форм экономического политического и культурнодуховного развития общества но и поиска новых средств социальной поддержки населения. Это в свою очередь потребовало переосмысления противоречивого опыта социальной защиты населения советского периода истории отечественной благотворительности государственной социальной политики существующих форм организации социальной поддержки слабых групп населения. В этот период в...
25372. Экологические проблемы социальной работы 51 KB
  Главная теоретическая и практическая задача экологии раскрыть общие закономерности организации жизни и на этой основе разработать принципы рационального использования природных ресурсов в условиях все возрастающего влияния человека на биосферу. Взаимодействие человеческого общества и природы стало одной из важнейших проблем современности поскольку положение которое складывается в отношениях человека с природой часто становится критическим: исчерпываются запасы пресной воды и полезных ископаемых нефти газа цветных металлов и др....
25373. Социальная политика в системе общественных отношений, ее взаимосвязь с социальной работой 37 KB
  Социальная политика в системе общественных отношений ее взаимосвязь с социальной работой В условиях быстрых социальных перемен на макроуровне системы социальной работы для оптимизации ее деятельности требуется проведение эффективных социальных мероприятий и создание качественно новых программ разрешающих и предвосхищающих проблемы конкретного общества. Главная цель этих усилий состоит в содействии нормальному функционированию социальной сферы через реализацию социальной политики. Социальная политика представляет собой обязательный элемент...