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

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

Материалы данной статьи включены в учебник «jQuery для начинающих». Учебник распространяется бесплатно, и сопровождается интерактивными примерами.

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

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

&lt;head&gt;                                                               
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

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

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

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

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

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

Начнем с простенького примера – слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)

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

$(document).ready(function(){
    $(&quot;.btn-slide&quot;).click(function(){
        $(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
    });
});

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

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

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

$(document).ready(function(){
 
    $(&quot;.pane .delete&quot;).click(function(){
        $(this).parents(&quot;.pane&quot;).animate({ opacity: &quot;hide&quot; }, &quot;slow&quot;);
    });
 
});

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

Теперь пример посложнее, но он поможет Вам лучше понять 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 для того чтобы браузер не перешел по ссылке

$(document).ready(function(){
    $(&quot;.run&quot;).click(function(){
 
        $(&quot;#box&quot;).animate({opacity: &quot;0.1&quot;, left: &quot;+=400&quot;}, 1200)
        .animate({opacity: &quot;0.4&quot;, top: &quot;+=160&quot;, height: &quot;20&quot;, width: &quot;20&quot;}, &quot;slow&quot;)
        .animate({opacity: &quot;1&quot;, left: &quot;0&quot;, height: &quot;100&quot;, width: &quot;100&quot;}, &quot;slow&quot;)
        .animate({top: &quot;0&quot;}, &quot;fast&quot;)
        .slideUp()
        .slideDown(&quot;slow&quot;)
        return false;
    }); 
});

Гармошка #1

Пример реализации “гармошки”. (см. пример)

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

$(document).ready(function(){
    $(&quot;.accordion h3:first&quot;).addClass(&quot;active&quot;);
    $(&quot;.accordion p:not(:first)&quot;).hide();
 
    $(&quot;.accordion h3&quot;).click(function(){
 
        $(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
        .siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        $(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
     });
  
 });

Гармошка #2

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

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

$(document).ready(function(){
 
    $(&quot;.accordion2 h3&quot;).eq(2).addClass(&quot;active&quot;);
    $(&quot;.accordion2 p&quot;).eq(2).show();
 
    $(&quot;.accordion2 h3&quot;).click(function(){
        $(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
        .siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        $(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
    });
 
});

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

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

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

$(document).ready(function(){
    $(&quot;.menu a&quot;).hover(function() {
        $(this).next(&quot;em&quot;).animate({opacity: &quot;show&quot;, top: &quot;-75&quot;}, &quot;slow&quot;);
    }, function() {
        $(this).next(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;-85&quot;}, &quot;fast&quot;);
    });
});

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

Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см. пример)

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

$(document).ready(function(){
 
    $(&quot;.menu2 a&quot;).append(&quot;&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;&quot;);
 
    $(&quot;.menu2 a&quot;).hover(function() {
        $(this).find(&quot;em&quot;).animate({opacity: &quot;show&quot;, top: &quot;-75&quot;}, &quot;slow&quot;);
        var hoverText = $(this).attr(&quot;title&quot;);
        $(this).find(&quot;em&quot;).text(hoverText);
    }, function() {
        $(this).find(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;-85&quot;}, &quot;fast&quot;);
    });
 
});

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

Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример):

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

$(document).ready(function(){
 
    $(&quot;.pane-list li&quot;).click(function(){
        window.location=$(this).find(&quot;a&quot;).attr(&quot;href&quot;); return false;
    });
 
});

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

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

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

$(document).ready(function(){
 
    //hide message_body after the first one
    $(&quot;.message_list .message_body:gt(0)&quot;).hide();
 
    //hide message li after the 5th
    $(&quot;.message_list li:gt(4)&quot;).hide();
 
    //toggle message_body
    $(&quot;.message_head&quot;).click(function(){
        $(this).next(&quot;.message_body&quot;).slideToggle(500)
        return false;
    });
 
    //collapse all messages
    $(&quot;.collpase_all_message&quot;).click(function(){
        $(&quot;.message_body&quot;).slideUp(500)
        return false;
    });
 
    //show all messages
    $(&quot;.show_all_message&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_recent_only&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideDown()
        return false;
    });
 
    //show recent messages only
    $(&quot;.show_recent_only&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_all_message&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideUp()
        return false;
    });
 
});

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

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

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

//don't forget to include the Color Animations plugin
$(document).ready(function(){
 
    $(&quot;.pane:even&quot;).addClass(&quot;alt&quot;);
 
    $(&quot;.pane .btn-delete&quot;).click(function(){
        alert(&quot;This comment will be deleted!&quot;);
 
        $(this).parents(&quot;.pane&quot;).animate({ backgroundColor: &quot;#fbc7c7&quot; }, &quot;fast&quot;)
        .animate({ opacity: &quot;hide&quot; }, &quot;slow&quot;)
        return false;
    });
 
    $(&quot;.pane .btn-unapprove&quot;).click(function(){
        $(this).parents(&quot;.pane&quot;).animate({ backgroundColor: &quot;#fff568&quot; }, &quot;fast&quot;)
        .animate({ backgroundColor: &quot;#ffffff&quot; }, &quot;slow&quot;)
        .addClass(&quot;spam&quot;)
        return false;
    });
 
    $(&quot;.pane .btn-approve&quot;).click(function(){
        $(this).parents(&quot;.pane&quot;).animate({ backgroundColor: &quot;#dafda5&quot; }, &quot;fast&quot;)
        .animate({ backgroundColor: &quot;#ffffff&quot; }, &quot;slow&quot;)
        .removeClass(&quot;spam&quot;)
        return false;
    });
 
    $(&quot;.pane .btn-spam&quot;).click(function(){
        $(this).parents(&quot;.pane&quot;).animate({ backgroundColor: &quot;#fbc7c7&quot; }, &quot;fast&quot;)
        .animate({ opacity: &quot;hide&quot; }, &quot;slow&quot;)
        return false;
    });
});

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

Простейший пример реализации галереи, без перезагрузки страницы. (см. пример)

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

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

$(document).ready(function(){
 
    $(&quot;h2&quot;).append('&lt;em&gt;&lt;/em&gt;')
 
    $(&quot;.thumbs a&quot;).click(function(){
 
        var largePath = $(this).attr(&quot;href&quot;);
        var largeAlt = $(this).attr(&quot;title&quot;);
 
        $(&quot;#largeImg&quot;).attr({ src: largePath, alt: largeAlt });
 
        $(&quot;h2 em&quot;).html(&quot; (&quot; + largeAlt + &quot;)&quot;); return false;
    });
  
 });

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

Большинство нормальных браузеров легко понимают когда мы хотим добиться от них стилизации ссылок для различного типа файлов, для это цели можно использовать следующее CSS правило: a[href $=’.pdf’] { … }. Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery. (см. пример)

Для начала добавим класс для каждой ссылки, в соответствии с типом файла.
Затем выберем все элементы <a> которые не содержат ссылки на “http://www.webdesignerwall.com” и не начинающиеся на “#” в “href”, затем добавим им класс “external” и устанавливаем target= “_blank”.

$(document).ready(function(){
 
    $(&quot;a[href$=pdf]&quot;).addClass(&quot;pdf&quot;);
 
    $(&quot;a[href$=zip]&quot;).addClass(&quot;zip&quot;);
 
    $(&quot;a[href$=psd]&quot;).addClass(&quot;psd&quot;);
 
    $(&quot;a:not([href*=http://www.webdesignerwall.com])&quot;).not(&quot;[href^=#]&quot;)
      .addClass(&quot;external&quot;)
      .attr({ target: &quot;_blank&quot; });
 
});

Так же Вы можете посмотреть все примеры или скачать 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/

Цикл статей

426 thoughts on “jQuery для начинающих”

Антон.
С вашей помощью написал простейший скрипт . здесь Внизу блок с логотипами.

Возникают проблемы с отображением в IE7. В остальных браузерах отображается корректно.

Сам скрипт:

//hide logobox-body after the first one
     $(".logobox-body:gt(0)").hide();
 
//toggle logobox-body
   $(".logobox-head").click(function(){
       $(this).next(".logobox-body").slideToggle(500);
         
        return false;
    });

Как обойти?

Максим says:

2009-06-09 at 06:44

Здравствуйте!
Статья полезная, очень. Но у меня такой вопрос, не могли бы подсказать, как реализовать два autocomplete input’а, связанных между собой. Много где уже перерыл, но подобного нигде не нашел.

Reply

Добрый день, отличная статья, помогла в выборе js фреймворка.
Один вопрос: как сделать так что бы ссылки, каторые вызывают JS скрипт каторый подгружает какие то данные, работали и как обычные ссылки?
например у меня сейчас так:

$(document).ready(function(){
$("a.load").click(function()
  {  
        $.ajax({url: '/index/index/',
        success:function(data){
            $('div.text2').html(data); 
            }
        })
     
  }) ...

1	`<a` `href="#"` `rel="nofollow">Загрузить</a>`

Если в адрибут href вписать ссылку, то ява скрипт не срабатывает, а если не вписать, то, отключив JS, не работает ссылка

Anton Shevchuk says:

2009-06-15 at 07:36

Впишите ссылку, только не забудьте вернуть false в JS, дабы не было перехода:

1
2
3
4
$("a.load").click(function(){
$.ajax({...});
return false; // вот тут
});

Reply

Vladimir says:

2009-06-15 at 10:55

Спасибо, отличный перевод!
Есть один вопрос:
Недавно занялся jQuery, сразу же возникла проблема:

При использовании jQuery Lightbox (http://leandrovieira.com/projects/jquery/lightbox/), все отлично работает для файлов с расширением .html,но для .xhtml, почему-то даже стандартный пример lightbox’a (который поставляется с самим lightbox’ом), не работает…причем только в google Chrome (в firefox и IE все ОК)
Было бы очень здорово, если кто-нибудь помог!
Спасибо!

Reply

Скажите пожалуйста а каким образом можно работать с окном открытым JS?

$("#printer").click(function(){
         myWin= open("", "displayWindow",
    "width=500,height=400,status=yes,toolbar=yes,menubar=yes");
      $(myWin.document).html("<b>!!!</b>");
 
      });

Не понимаю как можно вызвать его, по какому идентификатору?
Будут ли действовать на него все методы и свойства jquery?

Anton Shevchuk says:

2009-06-26 at 10:52

С подобной задачей не сталкивался, возможно с pop-up окном следует работать следующим образом:

1
2
3
4
$("#printer").click(function(){
myWin= open("", "displayWindow", "width=500,height=400,status=yes,toolbar=yes,menubar=yes");
$(myWin.document).find('body').html("!!!");
});

Reply

badboychik says:

2009-07-03 at 21:01

скажите как побороть скачкообразность в примере с гармошками? там плавно свертывается только пикселей 50, а потом оставшаяся высота резким скачком открывается. Причем свертывается плавно полностью, только при раскрытии такое. Особенно заметно когда текста много а ширины мало

Reply
Антон says:

2009-07-13 at 14:35

при переходе из яндекса такое сообщение:

запрос: jquery
********************************
Внимание

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

Если вы действительно хотите перейти по этой ссылке, нажмите на нее здесь: http://anton.shevchuk.name/javascript/jquery-for-beginners
*********************************

Reply
1. Anton Shevchuk says:
  
  2009-07-13 at 16:19
  
  Очень странно, это кто ругается? – сам Яндекс, Блог, или какой-нить файервол?
  
  Reply
alarm says:

2009-07-14 at 13:46

Привет. Попробовал сделать меню с использованием jquery – вышло вот что http://design.alarmplace.ru/menu/index.html . Вот не пойму как его довести до ума – во-первых IE отображает криво, превращая круглые уголки во что-то непонятное. Во-вторых – как сделать кликабельной всю область таба, а не только шрифт. Ну и в целом, хочется узнать, можно ли оптимизировать этот JS-код, возможно стоит изменить какие-то моменты? Буду благодарен за совет.

Reply
Olchil says:

2009-07-17 at 09:43

Благодарю за уроки!! Давно хотела начать изучать jquery. А тут все так просто и ясно :) Спасибо :)

Reply
Aleks says:

2009-07-21 at 20:11

еще одна хорошая статья по jQuery: http://rsdn.ru/article/inet/jQuery.xml

Reply

Делаю мини галерею на Juery.
На данном этапе есть вот что:

<a href="3.jpg" title="Название картинки" rel="nofollow">Показать картинку</a>

При клике на ссылку выплывает картинка и на ней описание картинки в теге H2
Но я хочу сделать чтобы “Название картинки” была ссылкой на страницу
Используя этот метод с “rev=help” и xhref насколько я почитал они как нельзя лучше подходят для этих целей

<a href="3.jpg" title="Название картинки" rel="nofollow">Показать картинку</a>

Использую скрипт

$(".foto a").click(function(){
$(".pblock")
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 b").html("" + largeAlt + "");
return false;
});

Кто силен в квери, подскажите что дописать следует, чтобы “Название картинки” стала ссылкой от xhref

Anton Shevchuk says:

2009-07-31 at 11:39

Если хотите запаблишить код – используйте соответствующие кнопки на QuickBar’e

Reply

Magneto says:

2009-09-19 at 17:56

А как сделать чтоб Выдвижная панель выдвигалась слева или справа ?

Reply
1. Matskoff-Lion says:
  
  2009-09-27 at 10:11
  
  А чем тебе не нравится вариант:
  
  1
  $("#panel").animate({width: "0"}, "slow");
  
  Reply

У меня такая маленькая проблема, есть такой код:

<UL>
    <li><a id="kat1">Katalog 1</a>
        <ul id="links1">
            <li>Link 11</li>
            <li>Link 12</li>
            <li>Link 13</li>
        </ul>
    </li>
    <li><a id="ka2">Katalog 2</a>
        <ul id="links22">
            <li>Link 21</li>
            <li>Link 22</li>
            <li>Link 23</li>
        </ul>
    </li>
    <li><a id="kat3">Katalog 3</a>
        <ul id="links3">
            <li>Link 31</li>
            <li>Link 32</li>
            <li>Link 33</li>
        </ul>
    </li>
</UL>
    

Мне нужно эффектом гармошки скрывать и расрывать подпункты меню (links1, links2, links3) нажимая на ссылки (Katalog 1, Katalog 2, Katalog 3). Так как я в jquery пару дней, то воспользовался самым простым способом и прописал такое:

<script type="text/javascript">
$(document).ready(function(){
 
   $("#kat1").click(function(event){
   event.preventDefault();
   $(links1).slideToggle("normal");
    });
 
   $("#kat2").click(function(event){
   event.preventDefault();
   $(links2).slideToggle("normal");
    });
 
   $("#kat3").click(function(event){
   event.preventDefault();
   $(links3).slideToggle("normal");
 });
     });
    </script>

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

Anton Shevchuk says:

2009-10-07 at 13:21

Оптимизировать можно следующим образом:

1
2
3
4
$("ul > li > a").click(function(event){
event.preventDefault();
$(this).next().slideToggle("normal");
});

Насчет глюка с отображениям – тут я могу ошибаться, возможно проблема не в самом JS, а в CSS (или даже в каком-то определенном браузере). Более информативно было бы посмотреть на саму страницу…

Reply
1. Anton says:
  
  2009-10-08 at 07:29
  
  Большое спасибо, действительно такой глюк видно только в експлорере, в других браузерах все нормально. Антон, если вас не затруднит покажите пожалуйста на моем конкретном примере оптимизацию кода. Ато мне чайнику что-то никак не понять его принцип. Как мне его прикрутить конкретно под мой случай? Что там где и как?
2. Anton says:
  
  2009-10-08 at 07:38
  
  и еще, как избавиться от глюка в експлорере?

bobgubko says:

2009-10-09 at 20:34

А вот вопрос у меня назрел, надеюсь простой. Есть спан с текстом внутри:

1
<span id="block">some text</span>

А как получить через jQuery строку some text?

Reply
1. Anton Shevchuk says:
  
  2009-10-10 at 07:31
  
  См. описание функции text:
  
  1
  $('#block').text();
  
  Reply
bobgubko says:

2009-10-10 at 09:34

О! Весьма благодарен!

Reply
Алексей says:

2009-10-22 at 08:18

Спасибо, просто, понятно, доступно! Страничка в избранном ;)

Reply

Здравствуйте, Антон!
Подскажите пожалуйста, у меня есть код, который прокручивает содержимое влево-вправо:

/*<![CDATA[*/
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;   var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
/*]]>*/

и соответственно сам блок:

<div id="scroll">
<div id="left_lg"></div>
<div style="overflow: hidden;" class="sc_menu">
<ul class="sc_menu">
<li><a href="#"><img src="/images/" alt="" /></a></li>
<li><a href="#"><img src="/images/" alt="" /></a></li>
<li><a href="#"><img src="/images/" alt="" /></a></li>
<li><a href="#"><img src="/images/" alt="" /></a></li>
</div>
<div id="right_lg"></div>
</div>

Вопрос в том как изменить скрипт, чтобы содержимое плавно прокручивалось влево-вправо при клике на соответствующие кнопки (id=”right_lg”, id=”left_lg”)? Очень нужно.

Anton Shevchuk says:

2009-10-22 at 13:36

Хотелось бы увидеть код в живую, пока могу лишь предположить:

1
2
3
$("#left_lg").click(function(){
div.animate({scrollLeft:'+='+lastLi.outerWidth());
});

Только надо бы логику добавить по отслеживанию, что уже доскролили до конца.

Reply

Sania says:

2009-10-23 at 11:47

Антон, спасибо за ответ, но приведенный тобой код у меня не срабатывает, может не хватает знаний. Живой пример можно посмотреть здесь http://restostar.com/ там внизу блок с логотипами.

Reply
1. Anton Shevchuk says:
  
  2009-10-23 at 14:12
  
  У меня заработал следующий код:
  
  1
  2
  $("div.sc_menu").animate({scrollLeft:'-=300'}); // влево
  $("div.sc_menu").animate({scrollLeft:'+=300'}); // вправо
  
  Reply
Sania says:

2009-10-25 at 10:00

Спасибо огромное, Антон!!! Всё заработало как нужно! Очень выручил :)

Reply

Здравствуйте.В JQuery только с сегодняшнего утра…
Мне нужно сделать меню в виде гармошки.
После долгих раздумий получил код

<UL class="main">
    <li class="mainli"><p id="kat1">Katalog 1</p>
        <ul id="links1">
           <li><a>Link 11</a></li>
           <li><a>Link 12</a></li>
           <li><a>Link 13</a></li>
       </ul>
    </li>
    <li class="mainli"><p id="kat2">Katalog 2</p>
        <ul id="links2">
            <li>Link 21</li>
            <li>Link 22</li>
            <li>Link 23</li>
        </ul>
    </li>
    <li class="mainli"><p id="kat3">Katalog 3</p>
        <ul id="links3">
            <li>Link 31</li>
            <li>Link 32</li>
            <li>Link 33</li>
        </ul>
    </li>
</UL>

Связав два примера(первый про гармошку и второй из комментариев) получилось как то так

<script type="text/javascript">
$(document).ready(function(){
$(".main p:first").addClass("active");
$(".main ul:not(:first)").hide();
 
$(".main p").click(function(){
    $(this).next("ul").slideToggle("slow")
    .siblings("ul:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("p").removeClass("active");
    });
 
});
    </script>

Что то упорно не хочет скрывать не активные пункты меню, получается обычная ниспадающая меню…Необходимо, чтобы неактивные пункты скрывались, как в примере с Гармошкой #1

А можно ссылку на пример? А то не совсем понятно, что хотите получить…

http://anton.shevchuk.name/wp-demo/jquery-tutorials/accordion1.html
Только с элементами

<UL class="main">
    <li class="mainli"><p id="kat1">Katalog 1</p>
        <ul id="links1">
           <li><a>Link 11</a></li>
           <li><a>Link 12</a></li>
           <li><a>Link 13</a></li>
       </ul>
    </li>
    <li class="mainli"><p id="kat2">Katalog 2</p>
        <ul id="links2">
            <li>Link 21</li>
            <li>Link 22</li>
            <li>Link 23</li>
        </ul>
    </li>
    <li class="mainli"><p id="kat3">Katalog 3</p>
        <ul id="links3">
            <li>Link 31</li>
            <li>Link 32</li>
            <li>Link 33</li>
        </ul>
    </li>
</UL>

Ramil says:

2009-11-06 at 22:01

Неужто не решаемая задача?

Reply
alnes says:

2009-11-09 at 16:26

Открываю Вашу ссылку http://anton.shevchuk.name/wp-demo/jquery-tutorials/accordion1.html – все работает.
Ставлю эту страницу на свой домен – не работает.
Подскажите в чем ошибка.

Reply
blase says:

2009-11-11 at 11:10

ПЕРВЫЙ ПРИМЕР:
А как сделать, чтобы когда выполнялся slideToggle еще происходила анимация исчезания (opacity)
пробовал делать так

1
$("#panel").slideToggle("Slow").animate({opacity: "hide"}, "slow");

но оно делается не одновременно, а по очереди
и причем нужно, чтобы панель исчезала только когда задвигается обратно
как это можно сделать?

Reply

вот, попробовал еще и так:

$(".go").click(function(){
    if(!$("#panel").animate({opacity: 0.5}, "slow").slideDown("slow")){
    $("#panel").animate({opacity: 0.5}, "slow").slideDown("slow");}else{
        $("#panel").animate({opacity: 1}, "slow").slideUp("slow");};
});

но это совсем не то, что я хотел, нужно чтобы панель отъежала вверх тоже по клику,
вобщем – мне нужно, что я не могу сделать, никак не додумаюсь, чтобы при нажатии на кнопку(<a…), панель выползала таким способом:
анимация появления и одновременное выползание
и если еще раз нажать, то происходило заползание обратно и одновременная анимация исчезновения панели

blase says:

2009-11-11 at 12:59

подскажите пожалуйста, вот вот этот фреймворк jquery-1.3.2.min.js нормальный? дело в том что не воспроизводится animate(width…/height….left…/top… и так далее)

Reply
Денис says:

2009-11-13 at 21:19

Здравствуйте !!!
Будьте так добры, подскажите как получить значение name y img допустим name = 123

пример:

1
<img src="#" name= "123" />

как только не пробовал :(

1
2
var myimg = $("img").attr("name");
alert("Name=" + myimg); // не получается тоже

Reply
Денис says:

2009-11-14 at 11:21

Спасибо за ответ !!!

Reply
blase says:

2009-11-14 at 22:26

при чем здесь jquery, осмотрите лучше мой вопрос пожалуйста))))

Reply
Fly_Mouse says:

2009-11-19 at 05:33

Статья отличная) Спасибо=)

Теперь вопрос)))

Что имеем:
Допустим, в интернет магазине есть корзина и некий список товаров, который выводится в цикле. При нажатии на товар он добавляется в корзину

Задача:
Добавить пи нажати на товар вот такой эффект http://docs.jquery.com/UI/Effects/Transfer (см. красный и зеленый дивы внизу)

Код для двух дивов приведен в примере,который по ссылке

Вопрос:
1. Как нужно модифицировать код чтобы , например, было 3 дива (назовем их 1й, 2й и 3) и при нажатии как на 2й так и на 3й див рамка переходила к 1му
2. Как лучше реализовать поставленную задачу при помощи jQuery

Заранее благодарю=)

Reply
oreh says:

2009-11-22 at 17:42

Спасибо за статью!
Изучаю.Возник вопрос в примере Гармошка #1:
как выполняется вот эта строчка?

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

Я так понимаю подразумевается что this тут это текущий h3,
но разве после предыдущей строчки

1
2
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");

this это параграфы-сёстры(видимые) h1 по которому был клик?

Заранее спасибо за комментарии.

Reply

Антон, подскажите пожалуйста почему этот кусок кода не работает в Опере и Фаерфоксе:

     
<head>
<title>Сайт</title>
<script type="text/javascript"  src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
    $(content).load("text.html");
});
</script>
</head>
    <body>
<table>
    <tr>
    <td id="content"></td>
   </tr>
</table>
     
</body>
</html>

Anton Shevchuk says:

2009-12-03 at 10:16

Неправильно указан селектор, должно быть так:

1
2
3
$(document).ready(function(){
$('#content').load("text.html");
});

Reply
1. Anton says:
  
  2009-12-03 at 12:17
  
  Спасибо большое! Все работает.

Asoas says:

2009-12-06 at 15:40

Меня очень заинтересовала возможность применения события к определённому классу, при этом очень хочется узнать как такое возможно вообще на JS.
Вот например код:

1
2
3
4
5
6
$(document).ready(function(){
    $("div.msgtop").click(function(){
        $(this).next("div.msgmsg").slideToggle("slow");
        $(this).toggleClass("active");
    });
});

в котором видно что при клике на див с классом msgtop сворачивается див с классом msgmsg. На деле имеется куча дивов с этими классами, но в итоге при клике на какой либо из них сворачиваются не все дивы с классом msgmsg, а только тот на который кликнули.
Очень хотелось бы узнать как такое сделать самому без jQuery.

Reply

По вашим примерам училась. Написаны хорошо и доступно. Но у меня не получается одна вещь. Я пытаюсь построить асинхронное дерево-меню по клику на ссылку. Взависимости от передаваемого параметра, у меня должно строится разное дерево. Это нужно, чтобы показать структуру подразделений по входному подразделению.
jquery предлагает пример асинх. дерева тут http://www.dynamicdrive.com/dynamicindex1/treeview/treeview_suppliment.htm
Но он сразу грузится, мне надо по клику.
я делала так

$(document).ready(function(){
        $(".search_table a").click(function(){
            var code = $(this).attr("value");
             
            $("#asynctree").treeview({
                url: "responseArray.php?kodbpod="+code
            });
           return false;
        });
     });

и дерево грузится в контент asynctree, но…
1. не обновляется контент (тоесть по второму клику к первому дереву прибавляется второе)
2. по второму клику, перестает работать(ветки не открываются и не закрываются) ПОМОГИТЕ ПОЖАЛУЙСТА!!! очень нужно.

Здравствуйте!
я недавно начал смотреть jquery на ваших примерах, и решил сделать гармошку….короче, вставил код на саму страницу:

<script type="text/javascript">
$(document).ready(function(){
     
    $(".accordion h5:first").addClass("active");
    $(".accordion p:not(:first)").hide();
 
    $(".accordion h5").click(function(){
        $(this).next("p").slideToggle("slow");
        $(this).toggleClass("active");
        $(this).siblings("h5").removeClass("active");
    });
 
});
</script>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> 
<title>проба</title>    
<link href="controlMenu.css" rel="stylesheet" type="text/css">
 
</head>
<body onLoad="initialize();" onUnload="GUnload();">
<div class="accordion">
  <h5>проба</h5> 
  <p>12345</p>
  <h5>проба1</h5> 
  <p>123456</p>
</div>

Он почему то открывает и сразу закрывает
Подскажите в чем проблема? – как видите код не менял практически…

Нурлан says:

2009-12-11 at 05:00

Ooups!
Извиняюсь :)
Вопрос снимаю…просто вчера до поздна мурыжился и оказся прописал код jq в двух местах

Прошу прощение за свою невнимательность!

Reply
Игорь says:

2009-12-14 at 00:34

Антон, подскажите, пожалуйста, как из

1
<a href="http://ya.ru">Я</a>

сделать

1
<a href="http://ya.ru/hello/">Я</a>

Спасибо.

Reply
Игорь says:

2009-12-14 at 01:50

кажись понял как сделать это с одной ссылкой

1
2
3
4
5
<script> $("a").mousemove(function()
  {
   $(this).replaceWith("<a href=\"" + $("a").attr("href") + "/hello/\">" + $(this).text() + "</a>");
  });
</script>

Но не получается это делать для двух и более ссылок, т.к. значение .attr(“href”) от первой ссылки присваивается для всех остальных. Помогите пожалуйста решить эту задачку.

Reply
1. Anton Shevchuk says:
  
  2009-12-14 at 10:18
  
  Привет, примерно так:
  
  1
  2
  3
  4
  $('a').each(function(){
  var href = $(this).attr('href');
  $(this).attr(href + '/hello/');
  });
  
  Reply
Игорь says:

2009-12-14 at 13:21

Антон, спасибо за подсказку использовать .each(function()
В итоге получилось вот так:

1
2
3
4
$('a').each(function(){
var href = $(this).attr('href');
$(this).replaceWith('<a href=\'' + href + '/hello/\'>' + $(this).text() + '</a>');
});

Reply
Dmitry says:

2009-12-18 at 22:55

Примного благодарен. Читаешь, все понятно….
Но вот включаешь, не работает ….. Мозг уже спалил. Прошу помощи!!!

Есть таблица. Двойной клик по строке должен возвращать id строки.

1
<tr class="even" id="2" >...</tr>

1
2
3
$("tr").dblclick(function(){
var idRow = $("this").attr("id");
alert(idRow);

Получаю Undefined.

Что я делаю не так?!

Reply
Dmitry says:

2009-12-18 at 22:58

Антон, прошу прощения! :)

Надо было тут запостить, чтобы увидеть, что THIS должно писаться без кавычек :LOL:

Все работает! Еще раз благодарю за Ваш ресурс!!!

Reply
Pastorman says:

2009-12-22 at 18:51

Здравствуйте. У меня огромная просьба. Помогите.
Не могу найти решение следующей задачи:
У меня есть первая страница к примеру test_1.htm на которой есть ссылка с классом .uroven1 на вторую страницу test_2.htm.
Необходимо чтобы при загрузке страницы test_2.htm в новом окне (использование фреймов исключено) скрипт выполнит любое действие (к примеру выбросит сообщение “WELLCOME”) – только после того как “поймёт или отследит” что открытие этой страницы произошло по событию “клик” на ссылку с классом .uroven1 что на странице test_1.htm.
Да и по большей части важней отследить класс ссылки, по которой перешли на новую страницу.
Сам скрипт вояется в jQuery.

Работа над скриптом ведётся как раз на том сайте на который ссылается мой ник.

Там открытие окна по ссылке должно проводиться дву способами:
1. Вывод через модальное окно -используется избитая тема jquery.fancybox.js (учитывая что в окно подгружается не просто контент а полноценный код html странницы полностью);
2. Вывод через команду “открыть в новом окне”.

Пробовал испоьлзовать куки – не получилось (открыть в новом окне и через модальное окно куки не переносит нужное мне значение в куки).

Пробовал глобальные переменные – но получается что эта переменная используется в скрипте на первой странице а на второй это переменная пуста.

Мне советовали перенести вместе с сылкой параметр через локал-сеарч – но тоже всё получилось не то.

Я уже в отчаянии. Не знаю что делать и как быть. Я новичёк что в Ява скриптах что в JQuery – и наверно не хватает базовых знаний.
Прошу не точный но хотя бы небольшой пример кода – что решит проблему. А дальше я уж сам. Просто две недели в одном тупике.

Reply
Женя says:

2009-12-22 at 21:27

Скажите пожалуйста у меня есть выпадающее меню, я нажимаю на заголовок h2 b у меня внизу выпадает список, мне надо чтобы он закрывался когда я кликну на любом месте страницы.
код jquery у меня такой

jQuery(document).ready(function($) {
jQuery(“li.widget_archive h2”).click(function () {
jQuery(“li.widget_archive ul”).slideToggle(“normal”);
});
jQuery(“li.widget_categories h2”).click(function () {
jQuery(“li.widget_categories ul”).slideToggle(“normal”);
});
jQuery(“li.widget_links h2”).click(function () {
jQuery(“li.widget_links ul”).slideToggle(“normal”);
});
});

Reply
Артём says:

2009-12-23 at 02:37

Здравствуйте.
При использование фотогалереи lightbox возникает следующая проблема,, когда при раскрытии фотографии места для отображения не хватает возникает полоса прокрутки ниже нижней границы сайта, однако чёрный фон не закрывает появившиеся “лишнее” пространство, смотрится очень не красиво, предполагаю это связанно со стилями и конкретно с этим фрагментом:

1
2
3
4
5
6
7
8
9
#jquery-overlay
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
}

если absolute сменить на fixed это поправит этот баг в опере и ie7, однако в ie6 становится только хуже, фотка раскрывается как надо, по центру, однако тёмная подсветка появляется ниже подвала, образуется прокрутка чёрного фона на высоту основной части сайта.

Подскажите пожалуйста как можно это поправить.

Reply

Подскажите, пожалуйста, как сделать, чтоб панель по клику выдвигалась снизу вверх из-за границ экрана и по клику убиралась обратно?

Делаю так:

$(document).ready(function()
    {
    $(".blog_h").click(function(){
      $(".blog_h_1").slideToggle("slow");
      $(".blog_main").toggleClass("blog_main_2");
    });
     
    });

.blog_h {
  border: 1px dashed red;
  height: 20px;
  width: 40px;
  margin-right: 200px;
  display: block;
}
 
.blog_h_1 {
  height: 80px;
  margin-right: 200px;
}
 
.blog_main {
  border: 1px dashed green;
  height: 80px;
  width: 100px;
  margin-right: 200px;
  margin-top: 0px;
  display: none;
}
 
.blog_main_2 {
  border: 1px dashed green;
  height: 80px;
  width: 100px;
  margin-right: 200px;
  margin-top: 0px;
  display: block;
}

В итоге при появлении окна появляется скрол из0за которого все сползает. Как сделать появление без скролла?

ZeDeX says:

2010-01-08 at 19:15

Как ни банально енто звучит но – Люди, хелп !
Вот решился изучить jquery … Решил применить на практике, благо есть где, и встал в ступор … даж не понимаю с чего начать-то :)
Есть такая задача: есть ссылка на картинку, при нажатии на ссылку должно выскакивать “модальное окно с ентой картинкой”, плюс – размер окна не должен изменятся в зависимости от размера картинки, а наоборот – картинка должна изменять свои размеры под размер окна …
Буду оч благодарен за объяснения или ссылки на какие-нить рабочие примеры … Кое что находил, но не подходило …

Заранее благодарен !

Reply
1. TSpider says:
  
  2010-02-15 at 12:39
  
  Самый простой вариант – использовать jQuery UI, там есть dialog().
  
  У него есть свойство modal
  Этому же диалогу ты будешь передавать его размеры, и точно такие же размеры кидай для скрипта, который формирует твое изображение.
  
  Логика вроде такова.
  
  Reply
Dmitry Kravchenko says:

2010-01-14 at 16:14

Прошу помощи )

Столкнулся с ситуацией, которая мне не очень ясна.

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

далее, мне нанадо сменить группу чтобы добавить элементы в другой список.

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

Но теперь собственно вопрос. У всех этих выгржуенных элементов есть две ссылки: одна удаляет элемент, вторая переходит на страницу, на которой можно переместить элемент. Так вот, пока элементы первый раз выгружаются, эти ссылки рабочие и jquery работает нормально. Но когда первый раз меняется контент в боковом диве, то ссылки перестают работать…jquery перестает реагировать на нажатие ?

ну собствено вот

1. сменить группу с выгрузкой элементов в боковой див
$(“#groupid”).change(function(){
$.post(‘/events/getparts’, {‘sel_group’:$(this).val()}, function(data){
$(“#boxdetail”).empty();
$(“#boxdetail”).append( data );

);

});
});

2. ссылки списка существующих элементов перестают работать. То есть, нажатие не приводит к выполнению jquery скрипта, который работал первый раз.

3. если обновить страницу. jquery снова один раз нормально отработает и повторяется ситуация.

причем, если смотреть исходники страницы, там видно старый контент, но на экране уже новый, выгруженный через jquery. Может здесь беда ?

вообщем ссылка вот
http://monitoroff.net/cp/addpart

Reply
master says:

2010-01-18 at 11:04

Почему примеры в Opere не работают??

Reply
1. Anton Shevchuk says:
  
  2010-01-18 at 11:07
  
  Какие примеры и в какой опере?
  
  Reply
SE7EN says:

2010-01-19 at 21:59

У меня возник вопрос по “Гармошке” 1 вариант.
Там скрытое содержимое находится между тегами и ? но мне нужно чтоб там была талица, просто так вставить её не получается она видна. подскажите как поправить?

Reply
1. Anton Shevchuk says:
  
  2010-01-20 at 07:43
  
  Для вставки HTML кода лучше воспользоваться соответсвующими кнопками, а то теги будут съедены…
  
  Reply
  1. Alex says:
    
    2010-02-01 at 20:33
    
    В один из блоков необходимо вставить форму быстрого ответа.
    Возможно ли это?
    С первой попытки, как и написал предыдущий автор -форма со всем содержимым “вываливается” из блока.
    Вы написали, что при вставке HTML кода нужно воспользоваться “соответствующими кнопками”… Нельзя ли разжевать? :)

У меня проблема с имитацией бэкенда вордпресс, точнее не с ней, а с ее дополнением. Я пытаюсь сделать так, чтобы при нажатии кнопки delete оно исчезало как и в примере, но и еще отсылала данные методом post на ../modules/content.php?do=tickets . Вот мой код:

$(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-delete").click(function(){
$.post("../modules/content.php?do=tickets", {
  delete: "89"
};
});
    });
  
    $(".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;
    });
  
});

Andrew says:

2010-01-25 at 10:23

Антон я ток начал использовать jQuery и у меня вопрос как сделать прокрутку внизу у Галереи изображений

Reply