Источник: A jQuery Client Status Bar

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

Зачем нужна строка состояния?

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

Иногда при выводе сообщений в строке состояния может быть превышено время ожидания, и тогда там будет отображаться заданное по умолчанию сообщение (как правило, это «Готово»). Новые сообщения выделяются:

Через заданный промежуток времени выделение текста снимается. Это лучше делать с помощью CSS класса statusbar.
Пример строки состояния на странице фотоальбома можно посмотреть здесь:
http://www.west-wind.com/rick/photoalbum/demoMaui2006/default.aspx?Admin=true

После сохранения изменений и удаления изображений происходит обновление строки состояния (так же как и в случае с Ajax-овыми ошибками в методе-обработчике, которые не должны происходить).

Начнем с CSS
Для выполнения большей части работы необходимо использовать CSS стили элементов. Строка состояния – не просто тэг

.statusbar

{
    position: fixed;
    bottom: 5px;
    left: 0px;
    right: 0px;
    height: 16px;
    padding: 5px;

    background: black;
    color: white;
    border: solid 1px lightgray;

    opacity: .70;
    filter: alpha(opacity="70");
    z-index: 200;

    overflow: hidden;
    overflow-y: auto;
}

.statusbarhighlight
{
    font-weight: bold;
    background-color: khaki;
    color: Maroon;
    border: solid 1px silver;
}

function showStatus(message,timeout,add)
{
    if (typeof _statusbar == "undefined")
    {
       // ** Create a new statusbar instance as a global object
        _statusbar =
            $("


")
                    .appendTo(document.body)
                    .show();
    }

    if (add)
       // *** add before the first item
        _statusbar.prepend( "
" + message + "

")[0].focus();
    else
        _statusbar.text(message)
     _statusbar.show();
     if (timeout)
    {
        _statusbar.addClass("statusbarhighlight");
        setTimeout( function() { _statusbar.removeClass("statusbarhighlight"); },timeout);
    }
}

showStatus("Photo Collection has been updated",5000);

_statusbar = new StatusBar("#divStatus",

                           {showCloseButton: true, 

                            additive: true,

                            afterTimeoutText: "Click on caption to edit text..."});

_statusbar.show("Images have been reloaded",5000);
showStatus("Photo Collection has been updated",5000);

function StatusBar(sel,options)
{
    var _I = this;
    var _sb = null;

    // options
    this.elementId = "_showstatus";
    this.prependMultiline = true;
    this.showCloseButton = false;
    this.afterTimeoutText = null;
    this.cssClass = "statusbar";
    this.highlightClass = "statusbarhighlight";
    this.errorClass = "statuserror";
    this.closeButtonClass = "statusbarclose";
    this.additive = false;
     $.extend(this,options);
     if (sel)
      _sb = $(sel);

    // create statusbar object manually
    if (!_sb)
    {
        _sb = $("
" +
                "
" +
                (_I.showCloseButton ? " X 


" : "") )
                .appendTo(document.body)
                .show();
    }
    if (_I.showCloseButton)
        $("." + _I.cssClass).click(function(e) { $(_sb).hide(); });
    this.show = function(message,timeout,isError)
    {
        if (_I.additive)
        {
            var html = "
" + message + "

";
            if (_I.prependMultiline)
                _sb.prepend(html);
            else
                _sb.append(html);
        }
        else
        {
             if (!_I.showCloseButton)
                _sb.text(message);
            else
            {
               var t = _sb.find("div.statusbarclose");
               _sb.text(message).prepend(t);
            }
        }
        _sb.show();
        if (timeout)
        {
            if (isError)
                _sb.addClass(_I.errorClass);
            else
                _sb.addClass(_I.highlightClass);
            setTimeout(
                function() {
                    _sb.removeClass(_I.highlightClass);
                    if (_I.afterTimeoutText)
                       _I.show(_I.afterTimeoutText);
                },
                timeout);
        }
    }
    this.release = function()
    {
        if(_statusbar)
            $(_statusbar).remove();
    }
}

// use this as a global instance to customize constructor

// or do nothing and get a default status bar
var _statusbar = null;
function showStatus(message,timeout,additive,isError)
{
    if (!_statusbar)
        _statusbar = new StatusBar();
    _statusbar.show(message,timeout,additive,isError);
}

showStatus("Updated photo settings.",5000);

$(document).ready( function() {
    if (serverVars.adminMode)
    {
        MakeListEditable();   

        var status = "Click on caption to edit text. Drag image to sort list..."
        _statusbar = new StatusBar(null,{showCloseButton: true,
                                        additive:true,
                                        afterTimeoutText: status });
        _statusbar.show(status);
    }
} );

protected void ShowStatus(string message, int timeout)
{
    var script =
@"
jQuery(document).ready( function() {{
var status = '{0}';
_statusbar = new StatusBar(null,{{showCloseButton: true,
                            additive:true,
                            afterTimeoutText: status}} );
_statusbar.show(status,{1});
}});";      

    this.ClientScript.RegisterStartupScript(this.GetType(),
                      "showStatus",
                      string.Format(script, message, timeout), true);
}

this.ShowStatus("Click to start",0);

Популярность: 43%

Я писал в Ноябре, что домен jquery.ru теперь принадлежит мне. Потихоньку я занимался созданием сайта на этом домене.

То, что сейчас можно увидеть, является временной страницей, на которой отображается лента блогов и минимальная информация. На текущий момент в ленте всего лишь 2 блога. Если Вы на своём блоге пишите о jQuery и хотите участвовать в формировании единого сайта о jQuery на руском языке, то можете написать мне на e-mail: dc-rom@mail.ru, или в jabber: dc-rom@jabber.ru, или оставить комментарий к этому посту.

Для информации: На данный момент jquery.ru дает в среднем 6-9% посетителей блогов, которые участвуют в “ленте”.

Популярность: 70%

Истоник: jQuery Tip: Font Resizing With Animation Effects

Возьмем за основу вот этот код:

$(function(){
		$('input').click(function(){
			var ourText = $('p');
			var currFontSize = ourText.css('fontSize');
			var finalNum = parseFloat(currFontSize, 10);
			var stringEnding = currFontSize.slice(-2);
			if(this.id == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.css('fontSize', finalNum + stringEnding);
		});
	});

и добавим к нему возможность увеличивать текст с эффектом анимации.

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

И вот что получилось:

$(function(){
		$('input').click(function(){
			var ourText = $('p');
			var currFontSize = ourText.css('fontSize');
			var finalNum = parseFloat(currFontSize, 10);
			var stringEnding = currFontSize.slice(-2);
			if(this.id == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.animate({fontSize: finalNum + stringEnding},600);
		});
	});

Посмотрите демо, как это работает.

Популярность: 78%

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

Прием Show / Hide, медленнее и медленнее, а затем быстрее и быстрее

Прием Show / Hide (отобразить / скрыть слой) — довольно распространен. Однако, до использования JQuery мне всегда приходилось быть несколько многословным (и в большинстве случаев я был вынужден искать нужный код через поисковик, как, например, в этом случае, когда жертвой моего грабежа стал: http://www.geocities.com/technofundo/tech/js/showhide.html):

<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) //1 - видимый, 0 - спрятанный
{
  if (document.layers)
  {
    document.layers[szDivID].visibility = iState ? "show" : "hide";
  }
  else if  document.getElementById)
  {
    var obj = document.getElementById(szDivID);
    obj.style.visibility = iState ? "visible" : "hidden";
   }
   else  if (document.all)
   {
    document.all[szDivID].style.visibility = iState ? "show" : "hidden";
   }
}
-->
<script>

Но теперь с помощью JQuery я могу просто написать (да, вы отгадали) show(), чтобы отобразить и hide(), чтобы скрыть элемент или подходящий набор элементов:

$(‘div’).show();
$(‘div’).hide();
Конечно, также можно воспользоваться функцией toggle(), которая определяет, а затем меняет состояние данного элемента на противоположное. Это сейчас отображается? Да-> Тогда скрыть; Нет -> показать.

Все просто.

$('#clickme').click(function()
{
 $('div').toggle;
});

Огромное преимущество команд show/hide/toggle состоит в том, что они дают возможность добавить анимацию (регулировку скорости), дабы в полной мере воссоздать волшебство появления, исчезновения и повторного возникновения.

Другими словами, элемент управления скоростью встречается не часто, однако для JQuery это норма. Отныне мы сможем с легкостью управлять скоростью таких анимационных эффектов, как slide, fade, animate и др. Существует три заданные по умолчанию скорости: низкая, средняя и высокая. Кроме того, безусловно, есть возможность задать нужную скорость вручную в миллисекундах.

Следующая строка кода медленно отображает и скрывает слой.
$(‘div#toggle’).toggle(‘slow’”>);

Развернуть и свернуть, изменить прозрачность

Реализация эффекта разворачивания и сворачивания слоя всегда была задачей непростой. Однако, больше это не так. Теперь можно просто использовать эти «говорящие» интуитивно понятные методы: slideUp(speed, callback) и slideDown(speed, callback). И, конечно, не стоит забывать о команде toggle. Совместно с эффектом сворачивания и разворачивания команда toggle будет slideToggle(speed, callback).
Для изменения прозрачности используются следующие команды: fadeIn(speed, callback), fadeOut(speed, callback).
Пример:

$('#clickme').click(function() {
 $('div#slideme').slideToggle("slow")
});

$('#fademe').hover(
 function(){$('img#star').fadeIn("slow");},
 function(){$('img#star').fadeOut("slow");}
);

Популярность: 93%

Теперь, когда мы разобрались с назначением и применением элементов JQuery, настало время для изучения некоторых действий (обработка событий). Посредством действий, реакций и взаимодействий мы учимся, общаемся и играем, а Интернет становится неотъемлемой частью нашей жизни.

Однако, задача создания единой совершенной модели взаимодействия, одинаково пригодной для различных браузеров конкурирующих компаний-разработчиков, довольно затруднительна. Кроме того, не стоит забывать о существовании различных моделей событий DOM. Признайте, ведь вам не раз приходилось сталкиваться с проблемой взаимодействия типа «Да/Нет » между вами и пользователем?

Да, все работает.
Нет, не работает. Ничего не происходит.
Каким браузером вы пользуетесь?
…

JQuery предоставляет унифицированную платформу для кросбраузерной модели обработки событий. Кроме того, JQuery позволяет связывать или отключать события от нескольких слушателей событий. Каждое событие (blur, change, click, focus, keydown …) имеет свои свойства, такие как keyCode, pageX, pageY, screenX, screenY, shiftKey, target.

Добавление и удаление обработчика событий: bind() и unbind()

bind(eventType, data, listener)

Таким образом, вместо добавления события нажатия кнопки мыши к изображению, как показано ниже:

<img id="img1" src="arrowup.jpg" onclick ="showMe()"/>

используя JQuery мы добавляем обработчик(и) событий с помощью команды bind().

$(function(){
 $('img#clickme').bind('click', function(evt){
  alert('Опа! Вы кликнули на меня!');
 };
};

С помощью селекторов JQuery и команды bind() несложно обработать событие выбранного набора элементов.

Теперь немного изменим вышеприведенный код:

$(function(){
 $('img').bind('click', function(evt){
  alert('Мой id='+this.id);
 };
};

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

Команда bind() может использоваться для добавления анонимных обработчиков к одному событию. А теперь снова рассмотрим наш пример и внесем в него некоторые изменения:

$('img').bind('click', function(event) {
 alert('Мой id='+this.id);
}).bind('click', function(event) {
 alert('Мой источник '+this.src);
}).bind('click', function(event) {
 alert('Мой положение '+event.pageX+' '+event.pageY );
});
});

Но ведь у каждой медали есть две стороны. Сначала мы добавляем, а затем удаляем обработчик событий одним из следующих способов:

unbind(eventType, listener)
unbind(event)

Прямое использование названий событий и запуск обработчиков событий: eventName() и trigger()

Для большинства часто используемых событий существует множество удобных, продвинутых обработчиков. Для таких часто встречающихся событий как click, focus, select, submit, blur можно опустить команду bind() и напрямую, непосредственно использовать обработчики.

Синтаксис выглядит следующим образом: eventName(listener), например, click ( function () { } ) ;
или же просто eventName(), как, например, click ();

Пример:

$('img').click(function(event) { alert('My id = ' + this.id);});
$('img#clickMe').click() // имитация нажатия на изображение с id = clickMe

trigger(eventType)

Порой возникает необходимость не просто обработать, а сгенерировать событие. Например, иногда нужно инициировать событие отправки формы. Как это сделать? Просто используйте функцию trigger.

//…
trigger(‘submit’);

Сгенерировать такое событие можно внутри обработчика другого события.

$('img#clickme').click(function(event){
 $('img#submit').trigger('submit');
})

$('img#submit').submit(function(){
 alert('Всё ок!');
});

Последовательная обработка событий: toggle(handler1, handler2, handler3, …)

Главное преимущество, которое предоставляет JQuery — удобство. Если существуют какие-то рутинные действия, то обязательно найдется функция, которая поможет их упростить. Так, например, обстоит дело с последовательной обработкой событий. Как видно из синтаксиса метода toggle(), вы можете переключаться между множеством обработчиков событий.

С помощью этого переключения удобно настраивать стили заданного набора элементов. Сначала задаем синий цвет; затем меняем не зеленый; потом на красный… пока снова не вернемся к синему. И так вновь и вновь.

$('img#chmeleon').toggle(
 function(event){
  alert('Меняем на красный');
  $(event.target).css('background-color: red');
 },
 function(event){
  alert('Меняем на зеленый');
  $(event.target).css('background-color: green');
 }
}
);

Наведение курсора: hover(mouseoverhandler, mouseouthanlder)

Метод hover() - еще один пример удобной для использования команды. Всем нам нравится наблюдать как ссылки и картинки меняют свои стили и отображение при наведении курсора. Ранее с этой целью использовались команды mouseover() и mouseout(). Теперь же, используя JQuery, можно просто вызвать команду hover().

$('img#star').hover(
 function() {
  $(this).attr(src, 'star.jpg');
 },
 function() {
  $(this).attr(src, 'star.gif');
  }
);

Популярность: 94%

В современном веб программировании страницы состоят из иерархии элементов. Манипуляция ушла далеко от стилизации и позиционирования. Сейчас можно добавлять/удалять содержание, добавлять и удалять дочерние элементы, добавлять элементы к новому родителю, клонировать… Возможно всё. Вопрос в том: как?

Манипуляция с контентом: html() и text()
Очень хорошо, что все команды jQuery позволяют задавать и брать параметры. Чтобы получить свойство, достаточно вызвать команду без параметров. Чтобы задать, надо вызвать с параметром.

html() вернет свойство innerHTML элемента;
html(content) задаст свойство.

text() вернет весь текстовый контент;
text(content) поменяет текстовый контент элемента.

Например, посмотрите на этот код:

<table id="table1">
<tbody>
  <tr>
  <td> test1 </td>
   <td> item1 </td>
  </tr>
 </tbody>

$(‘table#table1’).html(); вернет всё внутри таблицы (id=table1), включая теги
$(‘table#table1’).text(); вернет только контент одной большой неразделенной строкой: test1item1

Значения элементов формы: val()
Чтобы взять или задать значение элемента, используйте команду val(): val() - чтобы взять, и val(content) - чтобы задать.

Вот пара подсказок по val:
a) Помните, как мы перебирали радиокнопки, чтобы выбрать нужную нам?

for (var i=0; i

Теперь с jQuery (с селекторами и val() ) мы можем сделать

var selected = $('input[name=selectMe]:checked').val();

b) Запомните, что команды jQuery всегда мультизадачны и можно задавать цепочки команд.
Тоже самое и с командой val(). Можно задать значения для каждого элемента в выборке за один раз.

$('input').val(['red','blue','orange']);

Этот код проверит все чекбоксы или радиокнопки, чьи значения совпадают с любым из значений в массиве (red, blue, orange).

Добавление и вставка

JQuery умеет добавлять и вставлять данные в разные места:

append(something): добавляет “something” в конец выбранного;
appendTo(target): добавляет всё выбранное в конец target;
prepend(something): добавляет “something” в начало выбранного;
prependTo(target): добавляет всё выбранное в начало target;
before(something): добавляет “something” перед каждым элементом выбранного;
insertBefore(target): вставка всего выбранного перед target;
after(something) : вставка “something” после каждого выбранного элемента;
insertAfter(target) : вставка всего выбранного после target;

Обертка и удаление

Нам иногда может понадобиться обернуть наши элементы в другие элементы. Для этого мы можем воспользоваться командой wrap().

 $('p.note').wrap("
This is our notes section

");

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

$('div.note').remove();

Клонирование

Мы клонируем с clone(), затем перемещаем клон куда-нибудь, связывая командами appendTo, insertBefore, before, after и т.д.

$('img#cloneme').clone().appendTo('div#gallary');

Постовой:
Контейнерные перевозки по морю в Китай.
Выгодная аренда конференц зала на Новый год и организация корпоративных праздников.
Юридическая компания Бикар будет полезна для регистрации фирм.
Для собственной безопасносности рекомендую пройти дополнительные занятия с Автоинструктором.

Популярность: 98%

Спонсор поста: Оплатить итальянское наращивание волос в салоне.

Источник: JQuery, the very very basics - Lesson 2

Этот пост является продолжением серии “jQuery - это очень просто”. Первую часть можете прочитать по этому адресу: jQuery - это очень просто. Часть 1.

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

size() and each(iterator)

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

Например, чтобы получить все id элементов <p>, которые мы выбрали, надо использовать цикл for…loop и команду size():

for(var i=0;i< $('p').size(); i++)  alert('мой id'+$('p')[i].id);

Чтобы убрать лишнее, мы можем использовать команду each(). Доступ к элементу можно получить, используя кейворд “this”. Перепишем код вот так:

$("p").each( function() {
 alert('мой id'+this.id);
})

Берем и задаем значения атрибутов

addClass задает всем элементам, имеющих один CSS класс или несколько CSS классов.
removeClass наоборот убирает у элементов один или более CSS классов по заданному парамерту:

$('p.notes').addClass('notes', 'highlight');
$('p.notes').removeClass('highlight');

Мы можем не только задавать и снимать, но также и переключать. Команда toggleClass позволяет нам добавлять заданный CSS класс, если его нет, и удалять, если он есть.

$('p.notes').toggleClass('highlight');

css(имя, значение)

Что делать, если мы хотим изменить CSS стиль элемента без использования любых имен класса? Команда CSS позволяет сделать так:

$('p.note').css('background-color', 'yellow');

Здесь мы задаем параграфу с классом note желтый цвет фона.

Есть еще элементы width() и height(), которые позволяют нам напрямую изменять размеры элемента. Например:

$('p.note').width(500).height(100);

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

Популярность: 85%

Источник: JQuery, the very very basics - Lesson 1

jQuery - это звезда среди остальных библиотек. Её достоинства - это: легкость, кросс-браузерность и простота. Задача, которая потребовала бы 10 строк кода на javascript, решается одной строкой на jQuery. Например, Вы хотите раскрасить табличку с id=”mytable”, чтобы каждый ряд имел свой цвет.

$function() {
 $("table#mytable tr:nth-child(even)".addclass("even");
$("div.test").add("p.quote").html("мааааленький тест").fadeout();
});

Волшебный знак $ и цепочки операторов

В jQuery наиболее важный символ - это символ $. Функция $() возвращает объекты, следующие в цепочке операторов. Например:

$("div.test").add("p.quote").html("a little test").fadeOut();

Эта цепочка делает следующее:
1) Выбирает див с классом test
2) Вставляет параграф с именем класса quote
3) Добавляет текст в параграф
4) Оперирует дивом, используя fadeOut

Селекторы

CSS селекторы
Мы формируем оформление страниц с помощью CSS. CSS работает с элементами в DOM в следующем порядке: body, table, p, input или с помощью ID элемента (пока ID уникальный) или именами классов.

jQuery использует такие же методы, чтобы найти один элемент или группу. Например:
$(“p.note”) вернет все элементы, у которых имя класса = note $(“p#note”) вернет элемент

чей id = note
$(“p”) вернет все p элементы

Дочерние селекторы
Чтобы выбрать дочерний селектор, нам надо использовать “>”. Например, $(“p > a”) вернет все ссылки в p элементе.

Чтобы выбрать элемент или элементы с заданным атрибутом, надо использовать []. Например, input[type=text] вернет все элементы ввода, которые имеют тип text.

Чтобы выбрать контейнер с другими элементами, мы должны использовать has. Например, $(“p:has(a)”) вернет

<p>

.

Позиционные селекторы
jQuery позволяет Вам выбрать элементы в зависимости от их порядка.
$(“p:first”) вернет первый элемент.
Существующие позиции:
first, last, first-child, only-child, nth-child(n), nth-child(even), nth-child(odd)

Собственные селекторы
Эти селекторы позволяют делать всё, что нам нужно.
animated, button, checkbox, checked, disabled, enabled, header, hidden, image, input, not(filter), parent, password, radio, reset, selected, submit, text, visible

Популярность: 100%

Спонсор поста: Просмотр и срочный выкуп квартир и помещений на первом этаже.

Когда Вы размещаете 2 или 3 продукта на странице сайта, всегда задумываетесь: как поинтереснее представить эти продукты? Этот скрипт немного поможет Вам. Используя jQuery, вы можете анимировать два или три продукта, делая при этом их вид интереснее.

Что это делает

Когда Вы кликаете на продукт, картинка увеличивается и появляется описание. Когда Вы кликаете на другой продукт, предыдущий открытый продукт уменьшается и новый увеличивается. Посмотрите пример, чтобы понять меня лучше: Пример работы скрипта

Как это работает

Сначала Вы должны использовать мою структуру HTML. Не забудьте добавить высоту и ширину ко всем тегам изображений. Иначе возможны проблемы в IE.

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

Скачать исходный код

Оригинал: Feature your products with Jquery

Популярность: 90%

Для начинающих и не только:

Популярность: 86%