Slyweb
На разработку сайта! Скидки 50%!

jQuery - самое нужное!

Здравствуйте уважаемые читатели, в этой статье собрано многое, что могло бы заинтересовать каждого интересующегося jQuery. Только практика в jQuery примерах, ни теории, ни "демагогии".

Оглавление статьи "jQuery - самое нужное!"

Пример 1. Используйте mouseleave вместо mouseout

Иногда приходится повозиться с элементами, на которых должно срабатывать определенное событие, например mouseover, но как на зло, внутри этих элементов есть ещё элементы, и иногда получается, что событие срабатывает дважды, а нам нужно только один раз. Для предотвращения данного поведения Вам нужно использовать обработчик события mouseleave вместо обработчика события mouseout.

  • Код
  • Ресурс
  1.<style>
  2. div { width:150px; height:130px; margin:5px; float:left;
  3. background:green;opacity:0.5; }
  4. div div { width:50px; height:50px; margin:5px; float:left;
  5. background:red; opacity:1;}
  6.</style>
  7.
  8.<body>
  9.
10.<script>
11.jQuery(document).ready(function(){
12.jQuery('#id_1, #id_2, #id_3')
13..each(function (){
14.jQuery(this).data('op',jQuery(this).css('opacity'));
15.})
16..mouseover(function (){
17.jQuery(this).animate({opacity: 1}, 500 );
18.})
19..mouseleave(function (){
20.jQuery(this).stop(true,true).animate({opacity: jQuery(this).data('op')}, 500 );
21.});
22.});
23.</script>
24.
25.
26.<div id="id_1"><div></div></div>
27.<div id="id_2"><div></div></div>
28.<div id="id_3"><div></div></div>
29.</body>

        

А вот и результат:

Пример 2. Запрещаем всплывать событиям!

А иногда, как на зло, при нажатии на элемент происходит двойное срабатывание события, что среди программистов называется всплыванием события по элементам структуры DOM, в результате чего данное событие инициируется и на других элементах, что вызывает циклическую реакцию обработчиков, когда функции обработчики начинают срабатывать на каждом элементе. Вам нужно знать, что событие, как правило, всплывает от дочерних элементов к родительским, и чтобы остановить всплывание событий от дочернего элемента к родительским используется кроссбраузерный метод stopPropagation(), как указано ниже.

  • Код
  • Ресурс
  1.<style>
  2. div { width:150px; height:130px; margin:5px; float:left;
  3. background:green;opacity:0.5; }
  4. div div { width:50px; height:50px; margin:5px; float:left;
  5. background:red; opacity:1;}
  6.</style>
  7.<body>
  8.<button>display event.namespace</button>
  9.<p></p>
10.
11.<script>
12.jQuery(document).ready(function(){
13.
14.
15.jQuery('div').click(function (e){
16.e.stopPropagation();
17.alert($(this).attr('id'))
18.});
19.
20.});
21.
22.</script>
23.
24.
25.<div id="id_1"><div></div></div>
26.<div id="id_2"><div></div></div>
27.<div id="id_3"><div></div></div>
28.
29.</body>

        

Пример 3. Вывод формы в зависимости от выбора пользователя

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

  • Код
  • Ресурс
  1.<body>
  2.<form>
  3. <input id="test" type="radio" class="radio" name="radio" >
  4. <input id="test1" type="radio" class="radio" name="radio" checked >
  5. </form>
  6. <div id="form"><div>
  7.<script type="text/javascript">
  8.
  9.$(function() {
10. $('input.radio').click(function(){ //при клике на радио класса radioin
11.
12. var frm = $('#form'); // выбираем див с ид form
13. var id = this.id; // получаем ид радио по которому кликнули
14. url = this.id+'.php'; // формируем url к нашей форме
15. frm.hide();
16. frm.empty(); // очищаем див
17. frm.load(url, function(){; //загружаем в див form1.php
18. frm.fadeIn('slow')
19. });
20. });
21.
22.});
23.</script>
24.</body>

        

Пример 4. Подгруздка данных на страницу!

Вот этот пример точно должен знать уважающий себя разработчик, так как, если человек заботится о своих посетителях, то он не должен грузить весь набор js файлов и картинок, как это делают многие начинающие разработчики. Грузите сперва часть верхней страницы, а потом остатки, в момент начала прокрутки страницы, в следствие чего пользователь быстрее увидит страницу. В следующем примере по достижении элемента с классом helpattr (см. строку 3), будет загружена страница указанная в методе load() - единожды, дальнейшая прокрутка страницы будет проигнорирована.

  • Код
  • Ресурс
  1.jQuery(function(){
  2. var ds_loaded = false,
  3. top = jQuery(".helpattr").offset().top,
  4. instructionsCloned = false;
  5.
  6. function check(){
  7. if ( !ds_loaded && jQuery(window).scrollTop() + jQuery(window).height() > top ) {
  8. jQuery.load("url");
  9. ds_loaded = true;
10. }
11. }
12.
13. jQuery(window).scroll(check);
14.
15. check();
16.
17.
18.});

        

Пример 5. Как поставить курсор в поле input?

Вопрос для новичков, но всё же, может кто не знает!

  • Код
  • Ресурс
  1.$('input.text').focus();

        

Пример 6. Перенаправляем на страницу с jQuery

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

  • Код
  • Ресурс
  1. $('.button1').click(function() {
  2. document.location.href="www.example.com/index.php?id=" + $(this).attr('id');
  3. });
  4.

        

Пример 7. jQuery начало autocomplate

Очень простой недоделанный autocomplate, иногда просят, чтоб всплывающее окно появлялось точно под input, этого достичь можно используя методы position и offset.

  • Код
  • Ресурс
  1.<script>
  2. $(function() {
  3. $("#myinput").click(function(){
  4. $(this).hide('slow');
  5. $('#option-dialog').show('slow');
  6. });
  7. $('#option-dialog li a').click(function(){
  8. var a = $(this).text();
  9. $(this).closest('#option-dialog').hide('slow');
10. $("#myinput").val(a).show('slow');
11. return false
12. });
13.});
14.</script>
15.<div id="option-dialog" style="display:none;">
16.
17.<ul>
18. <li><a href="#" value="1">First</a></li>
19. <li><a href="#" value"2">Second</a></li>
20.</ul>
21.</div>
22.<input type="text" id="myinput" />

        

А вот и результат нажмите:

Пример 8. Удаление элемента после задержки.

Конечно, нужно рассказать Вам про метод delay, в следующем примере, анимация будет начата только после истечения 1 секунды. Метод delay, по моему мнению, можно использовать при скрытии меню, например при случайном отведении, от субменю, чтобы субменю резко не исчезало, ведь человек может случайно дёрнуть рукой.

  • Код
  • Ресурс
  1.#test {
  2. width: 100px;
  3. height: 100px;
  4. background: #ffb;
  5. padding: 10px;
  6. border: 2px solid #999;
  7.}
  8.
  9.$(function() {
10. $('#test').delay(1000).fadeOut();
11.});
12.
13.<div id="test">test</div>

        

А вот и результат нажмите на элементе:

Нажми здесь!

Пример 9. Полная загрузка удаленной страницы

Многих интересует как можно загрузить вместо одной страницы другую без перезагрузки основанной страницы, - этого невозможно сделать по той причине, что вся страница это объект window, а его взять с другой страницы и заменить им текущий нельзя, по крайней мере в jQuery. Может найдутся продвинутые программисты и просветят меня. В качестве варианта подойдёт замена body, что я и сделал в следующем примере.

  • Код
  • Ресурс
  1.<script type="text/javascript">
  2.$(document).ready(function() {
  3. $('a').live('click', function() {
  4. $.post(this.href, $('form').first().serialize(), function(result) {
  5.
  6. $('body').html(result);
  7. });
  8. return false;
  9. });
10.});
11.</script>
12.<a href="test.php">test.php</a>

        

Пример 10. Загружаем популярное с твиттера

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

  • Код
  • Ресурс
  1.<style>
  2..post {
  3.width:50%;
  4.height:100px;
  5.border:2px solid #cadceb;
  6.background:#4F81A2;
  7.margin:5px;
  8.padding:5px;
  9.color:#fff;
10.}
11..post div{
12.height:50px;
13.background:#4F81A2;
14.margin-left:50px;
15.color:#fff;
16.
17.}
18.</style>
19.<body>
20.<script type="text/javascript">
21.(function($){
22. $.fn.tweets = function(options) {
23. $.ajaxSetup({ cache: true });
24. var defaults = {
25. tweets: 5,
26. before: "<div>",
27. after: "</div>",
28. };
29. var options = $.extend(defaults, options);
30. return this.each(function() {
31. var obj = $(this);
32. $.getJSON('http://search.twitter.com/search.json?callback=?&rpp='+options.tweets+'&q=from:'+options.username,
33. function(data) {
34. $.each(data.results, function(i, tweet) {
35. if(tweet.text !== undefined) {
36.
37. $(obj).append('<div class="post"><img style="float:left;" src="'+tweet.profile_image_url+'" />'+options.before+tweet.text+options.after+'</div>');
38.
39. }
40. });
41. }
42. );
43. });
44. };
45.})(jQuery);
46.$( function(){
47.$('#tweets').tweets({
48. tweets:5,
49. username: "blog_medvedev"
50. });
51.});
52.</script>
53.<div id="tweets">
54.</div>
55.</body>

        

А вот и результат! Что пишет Президент Росии в своём блоге?

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

На сегодняшний день twitter API поддерживает множество параметров json объекта, наиболее популярные опции, которые были рассмотрены в листинге:

  • to_user_id - идентификатор пользователя
  • from_user - имя пользователя, от которого поступил пост
  • profile_image_url - изображение пользователя, посты которого выводятся

Вид ответа в формате json выглядит следующим образом:

  • Код
  • Ресурс
  1.{"results":[
  2. {"text":"@twitterapi http://tinyurl.com/ctrefg",
  3. "to_user_id":396524,
  4. "to_user":"TwitterAPI",
  5. "from_user":"jkoum",
  6. "metadata":
  7. {
  8. "result_type":"popular",
  9. "recent_retweets": 100
10.
11. },
12. "id":1478555574,
13. "from_user_id":1833773,
14. "iso_language_code":"nl",
15. "source":"<a href="http:\/\/twitter.com\/">twitter</a>",
16. "profile_image_url":"http://s3.amazonaws.com/twitter_production/profile_images/118412707/2522215727_a5f07da155_b_normal.jpg",
17. "created_at":"Wed, 08 Apr 2009 19:22:10 +0000"},
18. ... truncated ...],
19. "since_id":0,
20. "max_id":1480307926,
21. "refresh_url":"?since_id=1480307926&q=%40twitterapi",
22. "results_per_page":15,
23. "next_page":"?page=2&max_id=1480307926&q=%40twitterapi",
24. "completed_in":0.031704,
25. "page":1,
26. "query":"%40twitterapi"}
27.}
28.

        
Со всем списком переменных допустимых для передачи в запросе, как у нас в листинге (строка 37 листинга), Вы можете ознакомиться на сайте dev.twitter.com. Я думаю Вам пригодится данный код и как эталон для создания плагинов jQuery, т.е. для продвижения самого себя, и для развития собственного сайта публикацией новостей!

Пример 11. Выдвижное меню на jQuery

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

  • Код
  • Ресурс
  1.<style>
  2.#theMenu, #theMenu ul { list-style:none; width:15em;margin:0;padding:0; }
  3.#theMenu a { background:#F6F6F6; color:#010101;
  4. display:block; font-weight:bold; padding:0.5em 1em; text-decoration:none;
  5. border:1px solid #DFDFDF;
  6.}
  7.#theMenu ul a { background:#F6F6F6; color:#010101;
  8. font-weight:normal; text-decoration:none;
  9.}
10.#theMenu ul a:hover { background:#F0EBE1; text-decoration:underline; color:#711515; }
11.
12.</style>
13.<body>
14.
15.<script type="text/javascript">
16.
17.$(document).ready(function () {
18. $("#theMenu > li > a").not(":first").find("+ ul").slideUp(1);
19. $("#theMenu > li > a").click(function () {
20. $(this).find("+ ul").slideToggle("fast");
21. });
22.});
23.
24.</script>
25.<ul id="theMenu">
26. <li><a title="open or close this section" href="#">Info</a>
27. <ul>
28. <li><a href="#">Basic</a></li>
29. <li><a href="#">Advanced</a></li>
30. </ul>
31. </li>
32.
33. <li><a title="open or close this section" href="#">Documents</a>
34. <ul>
35. <li><a href="#">Newsletters</a></li>
36. <li><a href="#">Policies and Procedures</a></li>
37. <li><a href="#">job Descriptions</a></li>
38. </ul>
39. </li>
40.</ul>

        

А вот и результат!

В заключение

На последок, хотелось бы узнать, что бы ещё хотели пользователи узнать в следующих статьях? И указали бы об этом в комментариях к статье! Успехов и до встреч!


Александр Ермаков