jQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение – лучше всего начинать с наглядных примеров, и они далее…
Как же все-таки работает jQuery?
Ну для начала Вам понадобится сам фреймворк, его вы сможете скачать с домашней страницы проекта, затем проинициализировать:
<head> <script type="text/javascript" src="jquery.js"></script> </head>
А основные моменты Вам поможет понять следующая диаграмма:
Как получить элемент с помощью 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(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
Магические исчезновения
Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):
Когда мы кликаем по картинке <img class=”delete”>, будет найден родительский элемент <div class=”pane”>, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:
$(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 для того чтобы браузер не перешел по ссылке
$(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”
$(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 обозначает равенство. Помните, что индексирование начинается с нуля:
$(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>, и анимируется его прозрачность и расположение:
$(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>:
$(document).ready(function(){
$(".menu2 a").append("<em></em>");
$(".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.
$(document).ready(function(){
$(".pane-list li").click(function(){
window.location=$(this).find("a").attr("href"); 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
$(".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. (см. пример)
- добавим класс “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(){
$(".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> выполняем следующие действия:
- сохраняем значение атрибута “href” в переменной “largePath”
- сохраняем значение атрибута “title” в переменной “largeAlt”
- заменяем в элементе <img id=”largeImg”> значение атрибута “scr” и “alt” значениями из переменных “largePath” и “largeAlt”
- так же присваиваем элементу “h2 em” значение из “largeAlt”
$(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”.
$(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/
Цикл статей
This entry was posted
on Monday, March 3rd, 2008 at 17:32 and is filed under HTML and CSS, JavaScript.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
@Sergio:
Если не хотите обновлять jQuery до версии 1.3 то Вам необходимо биндить событие “click” уже в callback функции где вы вызываете AJAX
Попутно задам ещё один вопрос: мне нужна анимация, как показано в видеофайле http://abkhasia.com/arabica/animate.rar (opacity + enlarge + centred at screen), и чтобы раскрываемое большое изображение ЦЕНТРИРОВАЛОСЬ (это тоже пока не представляю как осуществить) именно в соответствии с размерами index (т.е. по центру клиентской области браузера), а не внутри динамически подключаемых страниц. (http://abkhasia.com/arabica/centred.jpg)
@Sergio
Советую Вам таки использовать UTF-8 вместо windows-1251…
По-поводу анимации, для начала задайте начальные параметры картинки в CSS:
$('#content_div img').css({width: 0, height: 0, top: height/2, left: width/2}); // height - высота картинки // width - ширинаЗатем анимируйте:
$('#content_div img').animate({top: 0, left: 0, width: width, height:height});Не получается. Ладно, не так всё просто в jQuery. Помучаюсь ещё 2-3 дня, если получится, выложу готовый пример. Спасибо за советы, все помогли.
[...] jQuery для начинающих [...]
Заметка: UTF-8 нельзя использовать на index.html , иначе в Internet Explorer слои не будут отражаться.
При всем моем к Вам уважении это бред, какие слои у Вас не отображаются? Второй год как отказался вообще от 1251 и все отлично отображается, в том числе и в ИЕ. Поправьте, если не прав.
В таком случае извиняюсь. Значит это мой частный случай, либо я не произвел какое-то необходимое действие во избежание этого неприятного эффекта.
С анимацией начало кое-что получаться. Думаю, завтра выложу готовый пример с исправлениями и ссылками, подкрепляющими суть написанного в коде.
четвёртая и пятая строки в пункте “Связанная анимация” дублируются
Ответьте пожалуйста на вопрос Ильи про передачу параметров. Мне тоже интересно знать.
Люди помогите !
Использую плагин jquery.autocomplete.js , и никак не могу разобраться как в одном из автокомплитов динамически изменить свойство css для кнопки(стрелки).
Вот код:
jQuery().ready(function($){ $("#autocomplete").hover(function() { $("?????????").css("height","100px"); }) $("#autocomplete").autocomplete({ source:['a','b','c','d','e'], onKeyPress:function(){ var o=this; setTimeout(function(){ o.ac.val(o.ac.val().replace(/[^0-9]+/g,"")); },50) }, fillin:true }); });У автокомплита есть елемент img , это та самая кнопка , и если писать из евента onKeyPress:function(){ this.img.hide(); }) все работает, так вот и не могу догнать что это за объект “this” , и как к нему обращаться из вне !
Помогите А…
Итак, я доделал пример с анимацией большого изображения. Суть: при клике на маленькое маленькие изображения, находящиеся внутри динамически подключаемых страниц, развернуть на экране большу. версию того изображения, по которому был произведен клик. При клике по всплывшему большому изображению, оно “закрывается”.
В коде оставил много закомментированных (и не только) строк, которые возможно помогут тем, кто будет модифицировать код.
Выкладываю код:
$(document).ready(function(){ $("#huge").css({ position: "absolute", opacity: "0.0"}); /*$("#huge").hide();*/ var hugeimage, kartinka; $("#content_div img").live("click", function(){ $("#rsnake").css({display:"block"}); $("#huge").css({opacity: "0.0"}); kartinka=this; /*$("p:odd").text( kartinka.name ); */ xx=$(kartinka).height(); yy=$(kartinka).width(); aa=$(kartinka).offset(); currentsrc=kartinka.src; /*var hugeimag=new Image();*/ hugeimag=new Image(); hugeimag.src=currentsrc+".jpg"; /*ii=$(kartinka).attr('src');*/ /*$("#huge").attr('src',ii);*/ $("#huge").attr('src',hugeimag.src); $("p:odd").text( hugeimag.src); return false; }); /* click */ $("#huge").bind("load", animaBig); function animaBig() { $("#rsnake").css({display:"none"}); /*$("#huge").css({visibility:"visible"});*/ $("#huge").css({display:"block"}); $('#huge').css({top: aa.top, left: aa.left}); $('#huge').height(xx) .width(yy); /*$("#content_div img").css('width'); */ cc=hugeimag.width; dd=hugeimag.height; $('#huge').animate({top: $(window).height()/2-$("#huge").height()/2, left: $(window).width()/2-$("#huge").width()/2, opacity: "0.1"}, "normal"); /*$('#huge').animate({ width: $("#huge").attr( function() { return kartinka.width } ), height:$("#huge").attr( "height" ), opacity: "1.0"}, "slow");*/ $('#huge').animate({top: $(window).height()/2-dd/2, left: $(window).width()/2-cc/2, width: cc, height: dd, opacity: "1.0"}, "slow"); /*$("#huge").css({width: cc, height: dd, opacity: "1.0"});*/ /*$("#huge").fadeIn("slow");*/ } $("#huge, body").click(function(){ /*$(this).animate({opacity: "0.0"}, "fast");*/ $("#huge").hide(); $("#huge").css({opacity: "0.0"}); }); }); /* ready */Легенда:
huge – это ID тэга img, который находится в html файле
в него и будем загружать наши большие изображения.
rsnake – это ID тэга div, который показывается пока не прогрузилось большое изображение
(в этот div можно поместить любое сообщении вида “Подождите…”)
currentsrc – это переменная, содержащая полный путь к файлу с маленькими изображениями. При помощи этой переменной получаем имя большого изображения для последующей его загрузки в div с ID=huge Если имя маленького файла было 1.jpg, то большой файл следует называеть 1.jpg.jpg
А почему бы не использовать конструкцию вида:
выбираем все a.ico и перехватываем клик.
А еще лучше — готовый плагин lightbox
блин, второй мой пост так и не отправился, даже несмотря на то,что система писать: double detected…
Дубль 3:
Теперь комментарии, точнее проблемы, с которыми я сталкивался во время написания этого кода:
1. Для получения имени файла без полного пути и без расширения пишем вместо строк 20-23 в приведенном выше коде следующее:
var fso = new ActiveXObject("Scripting.FileSystemObject"); var currentsrc = fso.GetBaseName(kartinka.src); /*var hugeimag=new Image();*/ hugeimag=new Image(); hugeimag.src="images/"+currentsrc+"big"+".jpg";Теперь, если имя маленького файла было 1.jpg, то большой файл следует называеть 1big.jpg
Но для этого в настройках браузера должен быть включен ActiveX раз. И это не заработало на одном из известных хостингов (который я использую), два, хотя на локальном компьютере срабатывает. Не понял в чем здесь загвоздка, поэтому использую первый вариант (1.jpg.jpg)
P.S. Поскольку функции вычитания строк (обратной конкатенации) не существует, то банально вычесть из image.src символы “.jpg”, а затем прибавить “big.jpg” не получится.
2. Помимо fast, low и normal в функции animate можно задавать числовое значение скорости анимации. Например, “1500″ эквивалентно 1.5 секундам.
3. Нахождение размеров изображения. Просто используя функции Height()
и Width() получить реальные размеры картинки не получится, вместо этого получите размеры, заданные в CSS, либо в самом теге IMG. Нашел решение, используемое для предзагрузки моих изображений:
4. Заметил, что CSS, как минимум в моем коде, имеет приоритет. Это может помешать при задании размеров элемента функциями Height(размер) и Width(размер). Поэтому в 3 строке кода я убрал описания ширины и длины элемента с id=huge.
5. Замечено, что $(‘#huge’).css({top: aa.top, left: aa.left}); (строка 47) не срабатывает, если убрать строки 48 и 49:
$('#huge').height(xx) .width(yy);Не понял почему; но имейте ввиду.
6. Не забывайте заключать в кавычки значения длины и ширины, значения непрозрачности и скорости анимации, значения атрибутов элементов и т.д. и т.п. Например,
при задании размеров элемена в CSS, даже когда они равны 0, все равно необходимо использовать кавычки. (кстати добавлять px к значениям ширины и длины не требуется, ну это так..)
7. Центрирование элемента в клиентской области браузера, а не внутри элемента-родителя:
var poluchaemTocnoeMestorapologenieElementaKartinkaNaStranice=$(kartinka).offset();
Дальше можно отталкиваться от координат этого элемента, получив его высоту и смещение от левого бортика браузера.
Теперь в нужном месте можем использовать эти координаты:
poluchaemTocnoeMestorapologenieElementaKartinkaNaStranice.Top
poluchaemTocnoeMestorapologenieElementaKartinkaNaStranice.Left
Например: $(‘#huge’).css({top: poluchaemTocnoeMestorapologenieElementaKartinkaNaStranice.top, left: poluchaemTocnoeMestorapologenieElementaKartinkaNaStranice.left}); (строка 47)
8. Ссылки, которые я использовал для написания кода анимации большого изображения:
http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback
http://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=78
http://docs.jquery.com/Selectors
http://docs.jquery.com/Attributes
http://docs.jquery.com/Events
http://docs.jquery.com/CSS
http://wdh.suncloud.ru/js14.htm
Думаю, ссылки помогут посетителям этой странички создать множество своих интересных вариаций на тему анимации и не только.
To, Eldarado
я чета не заметил в вашем коде принципиального отличия, тот же перехват события click для всех изображений, что и в строке 8: $(“#content_div img”).live(“click”, function(){
Да, на первый взгляд вроде код должен упроститься, но я предпринял пару попыток, и большие изображения не появлялись, не знаю, возможно здесь свои заморочки с получением оригинальных размеров картинки, либо проблемы в функции animate, которая возможно не умеет анимировать элемент (в данном конкретном случае распозновать, что в нем прямой линк на изображение), больше мучаться не стал, т.к. и без того заставил себя неделю потратить на доведение скрипта до завершенного состояния. Может в будущих кодах попробую применять элемент для аналогичных целей.. В общем опыта в jQuery у меня пока нет, это мой первый скрипт на этом языке, так что не судите строго, что получилось, тем и делюсь. =)
На счет lightbox спасибо, посещу завтра jquery.com поизучаю, я полагаю там искать надо.. потому что в поисковиках ничего подобного моему эффекту я в инете не нашел.
P.S. Антон, ничего не понимаю, у меня к коду ещё есть пост с комментариями, который никак не хочет добавлятся. Вчера писал Duplicate comment detected; it looks as though you’ve already said that!
Ща вроде добавил, но снова ничего не появилось и теперь снова будет детектить дупликат. Не знаю, может просто я его не вижу. Есть ли ограничение на длину поста?
Я обновил тему для поддержки постраничной навигации и вложенности – но походу в WP 2.7 это еще сыро :)
Все оказалось намного банальней – комментарий попал в спам…
Sergio, можно ссылку на живой код? Возможно, я просто не понял принцип работы.
Плагин LightBox: http://leandrovieira.com/projects/jquery/lightbox/
Eldarado, да уже не важно, потому что теперь я всем вам, уважаемые посетители, советую юзать Lightbox =) Я оказывается видел уже этот Lightbox, но не заострил на нем внимания, т.к. думал, что картинка одного размера остается и с ней никаких эффектов не происходит, а раздвигается лишь черная полупрозрачная область, аналоги чего я встречал на разных сайтах, и везде это жутко тормозило. Но в Lightbox всё быстро появляется и прогружается, очень приятные впечатления. Плюс к этому если уменьшить размер окна браузера до размеров, меньших чем размеры картинки, то картинка также уменьшиться, чтобы уместиться в новом окне… полная динамика.
http://plugins.jquery.com/project/jquerylightbox_bal
http://www.balupton.com/sandbox/jquery_lightbox/ – демонстрационый пример
Ну а мне просто нужная была минимальная анимация самой картинки без всяких затемнений экрана и прочего акцентирования внимания на объекте, что я и реализовал, на мой взгляд получилось легенько и ненавящиво.
P.S. Ссылку на “живой” код я Вам оставляю, Eldarado, если есть желание разобраться – http://abkhasia.com/arabica/index.html
P.S.S. Мой последний коммент от 09 числа потерял некоторые тэги, которые я забыл как код обозначить(ну там правда обозначать нечего, например )
дальше:
…
//здесь я хочу вставить div или id с другой страницы, но полный ступор
Посмотрите в сторону документации: http://docs.jquery.com/Ajax/load#urldatacallback
Пример как раз Вам подойдет…
нет, не то.
вот пример:
<script> $.get("dat.html", function(dat){ $("#bt1").append(dat); } ); </script> <div id="bt1" width="100" height="100"></div>здесь скрипт читает dat.html, но валит все в кучу, тогда как нужно, чтоб отобразился только конкретный ID или DIV
<script> $(document).ready(function(){ $("iframe").contents().find("body").append("<img scr=images/bt.jpg>"); }); </script> <iframe id="bt" width="100" height="100"></iframe>здесь попытался вывести иконку.
получается так, что скрипт видит только то, что в нем и на странице, за ее пределами не видит. или я чего то перемудрил и не понял
У нас какое-то недопонимание, чем следующая конструкция не подходит (обрати внимание на различия)?
$.get("dat.html #my-div", function(dat){ $("#bt1").append(dat); } );я только три дня как копаю jquery :)
здесь
$.get("dat.html #my-div", function(dat){ $("#bt1").append(dat); } );отображается весь файл, а мне нужно только отдельный его фрагмент или текста или картинка.
#my-div – это и есть отдельный фрагмент загружаемого файла…
Ну для начала Вам понадобиться сам фреймворк
понадобится
“и эти люди учат других”
Благо не русскому языку учу…
master а попонятнее или подробнее?
Ну для начала Вам понадобиться сам фреймворк
понадобится
“и эти люди учат других”
Непонятно? Я про правописание “-тся” “-тья”. Не все учили язык по надписям в форумах и на заборах, некоторые ещё и книжки читали.
Подробнее тут:
http://my-tribune.blogspot.com/2008/07/blog-post_08.html
не работает так … .get(“dat.html #t1″…, пустая страница отображается
какую то ошибку делаю, даже простое
не отображается
Столкнулся с такой проблемой, делал выпадающее меню на jQuery и если на сайт заходишь первый раз то отображается всё криво, но если обновить то всё отлично, кто знает в чём дело?
Антон, благодарю за помощь. Я PHP- программист, ну и верстальщик заодно. Поэтому не всё было понятно. Пишут, что пользоваться библиотекой – проще простого, а когда с первого раза не получается увидеть эффект, начинаешь искать по инету. Ваши примеры помогли начать. Как говорится, сразу же заработали. И пошло- поехало. Больше всего волнует вопрос совместимости с браузерами. Но это нужно тестировать самостоятельно.
В своем блоге написал про JQuery и ссылку на ваш блог :)
если коротко, то IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome
http://ejohn.org/files/jquery1.3.1/test/ – проверка конкретного браузера
почаще обновляйте библиотеку и несовместимость будет -> 0
Спасибо Вам, Антон! Начал осваивать jQuery с Вашего блога.
Прошу подсказки: как при выборе элементов исключить какой-либо?
Конкретно необходимо вот что:
$(“.menu a”) – из этого набора исключить активную ссылку, имеющую класс active.
Заранее благодарен, с уважением.
Как-нить так:
$(".menu a:not(.active)");Больше примеров в 4-ой части статьи: http://anton.shevchuk.name/javascript/jquery-for-beginners-selectors/
Здравствуйте, Антон.
Не могли бы вы посоветовать календарь на jQuery наподобии Datepicker, только не для заполнения форм, а для навигации? Исполнение Datepicker очень нравится, но он все-таки для другого… Или его можно переделать под навигацию? Документацию читал, но не разобрался с этим.
[...] статей “jQuery для начинающих”, в четырех частях (1,2,3 и [...]
статьи оболденные…но не могли бы пподсказать как осуществить что то наподоби галереии изображений только чтоб вместо изображений другой html документ отображался также по клику на ссылку!ооочень надо…
[...] здесь простой и понятный [...]
Здравствуйте, Антон.
В первую очередь хочу поблагодарить за статью. Именно с неё я начал изучение jQuery.
Сейчас я верстаю такой компонент как Tooltip – всплывающую подсказку. С jQuery трудностей не возникло. Трудности с позиционированием в IE, а именно с порядком слоёв. Не могли бы Вы помочь?
Приведу пример:
.tooltip-wrapper { position:relative; } .tooltip { position:absolute; z-index:10000; left:-22px; top:1.5em; width:20em; padding:.5em 1.8em .5em 1em; border:2px solid #999; background:#ffc; }Проблема в том, что в IE ссылки оказываются выше самих подсказок.
Помогите плиз? Сделал меню выпадающее – но нужно что бы оно выдавало задержку при закрытие (типа убрал мышку случайно на долю секунды – что бы в этот мемент не закрылось, а по возвращение мыши передумало закрываться)… Помогите объясните как сделать?
$('#TopMenu > ul > li').hover( function() { var id = $(this).attr('id'); $(this).addClass("selected"); $('#Sub'+id).show(); }, function() { var id = $(this).attr('id'); $(this).removeClass("selected"); $('#Sub'+id).hide(); } );я делал такую штуку! нужно использовать setTimeout(функция, задержка в мс)
вот пример:
var obj = null; function checkHover() { if (obj) { obj.find('ul').hide(); } } $(document).ready(function() { $('#nav-main li ul').hide(); // apply bgiframe if available to fix IE6 Select Overlap Bug if ($.fn.bgiframe){ $('#nav-main li ul').bgiframe(); } $('#nav-main > li').hover(function() { if (obj) { obj.find('ul').hide(); obj = null; } $(this).find('ul').show(); }, function() { obj = $(this); setTimeout("checkHover()",400); }); });Или вот еще пример:
http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
А вот в FF3 не работает :(
Спасибо за статью, начал по ней осваивать jQuery. Сам я в общем-то php-программист :)
Хочу сделать примерно такую вещь – список ссылок, при щелчке на элемент которого под ним показывается абзац некоторого текста, появляющегося при помощи slideUp и slideDown.
Вот фрагмент кода:
$(document).ready(function(){ var IdOldText = 'Text0'; if ($("div#Text0details").is(":hidden")) { $("div#Text0details").slideDown("slow"); } $("#links a").click(function(){ var hoverText = $(this).attr("id"); if(IdOldText != 'X' && IdOldText != hoverText) { $("div#"+IdOldText+"details").slideUp("slow", function(){$("div#"+hoverText+"details").slideDown("slow");}); } IdOldText = hoverText; }); });Проблема в том, что если достаточно быстро щелкать по списку, предыдущий текст почему-то не успевает скрыться. Если же slideDown вызывать не callback-ом, а сразу после slideUp-ф, то тогда получается не совсем тот эффект… Буду признателен за подсказку по доработке.
Пытаюсь сделать что-то такое
jQuery('#exit').css({ height:30, background:'#fff url(exit.jpg)' });Так картинка exit.jpg берется из корня сайта localgost/exit.jpg.
Как заставить картиночку грузится из тойже папки, где лежит сам скрипт?
А почему не попробуешь путь прописать?
Дарк, вопрос.
Есть форма, на ней контролы… После постбэка, у контролов, которые были обновлены асинхронно, отваливается jquery. Не могу понять, почему????
2 AquilA
лучше б показать код, тогда ясно будет, что не так.
в порядке телепатии: ты полностью обновляешь контрол (а не только его содержимое), а это по сути означает создание нового контрола, без всяких обработчиков.
ага. ну и дожили – мог бы пешком прийти к Дарку и спросить :) всего-то этаж разницы…
Народ….все замечательно,но памагите…там вверху есть код менюшки…кто может сделать так что бы он был не вертикальный,а горизантальный??..плизз помогите кто нить….пишите на мыло…Заранее спасибо)
Спасибо за хороший сайт, и интересные статьи:)
Жалко что некоторые копи-пастеры тырят контент и выдают его за свой :(
в поиске вначале наткнулся на http://sitefaq.ru/blog/posts/jquery-dlya-nachinayushhix.html
а потом уже попал сюда .. Обидно за автора
вот пример Гармошка #1. легко ли его применить для выпадающего меню?
Ну например вот http://www.ibit.com.ua/
Стандартный каталог товаров Shop-script. Хочеться сделать чтоб подпункты открывались не перегружая страницу.
[...]Хорошая статья для старта. jQuery для начинающих [...]
Привет! Подскажи пожалуйста, как в гармошке сделать так, что бы вообще не выводилась ни одна из них.
Я хочу использовать эту фишку здесь http://holdfast.ru/ag/about.html
Т.к. в каждой выкладке несколько тэгов я их заключил между тегом и изменил соотвественно в скрипте. Но отображение какое-то корявое, особенно в IE (сам посмотри). Поэтому хочу, что бы все вкладки были закрыты. Так и удобнее.
Измени строчку кода
// было // $(".accordion span:not(:first)").hide(); // стало $(".accordion span").hide();Спасибо! Так лучше. Интересно, а почему не работает эффект изменения при наведение мыши в IE? Может в курсе, чего там в css прописать что бы везде работало.
Спасибо! Все так, как хотел. Правда не понятно почему мои картинки не переворачиваются, а исчезают? И мне не понятно почему эффект смены фона при наведении мышки в IE не работает.
Огромное спасибо! Это именно то, что нужно!
Кстати, почему бы Вам не добавить ваш перевод на http://docs.jquery.com/Tutorials в раздел “Учебники по-русски” ?
Спасибо, добавил :)
Доброго времени суток .
Только ознакомился с jQuery .И возникла проблема .
Анимация для события hover #1 не отображается ,
текст появляется снизу,ни как на примере :(.
Не подскажите в чём тут может быть проблема?
P.S. проблема такого рода уже была,но ответа нету:(
XJIOP
“Анимация для события hover #1 под ие6 не отображается задний фон =(
Спасибо,разобрался сам .Хороший блог .
[...] многие уже читали статьи из серии jQuery для начинающих, да вот с некоторых пор меня заинтересовал еще один [...]
Здравствуйте, пожалуйсто вы бы немогли прописать код для переадрессации страниц на куках
Я выбераю куда меня перенаправлять например на персональную страницу и при переходе на главную меня будет все время кидать на персональную страницу..
заранее спасибо!
все разобрался =)
Было бы супер, если бы вы перенесли оглавление в начало статьи. Я постоянно нахожу ее гуглом и иду на другие части, проматывать каждый раз неудобно )
Благодарен за статью, очень помогла.
PS в первом примере, возможно, лишняя строка
$(this).toggleClass("active");