Статус бар с jQuery

Фото автора =) 13.04.2009 от ROM Комментариев нет »

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

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

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

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

pic1

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

pic2

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

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

Начнем с CSS
Для выполнения большей части работы необходимо использовать 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;
}

Главным для строки состояния является фиксированное положение, при котором она всегда находится внизу страницы и остается там постоянно независимо от состояния полосы прокрутки браузера. Я предпочитаю размещать строку состояния на расстоянии 5px (5 пикселей) над нижней частью окна и затем применять прозрачность, чтобы сквозь строку состояния просвечивалась расположенная под ним страница. Полагаю, необходимо убедиться, что строка состояния находится над остальным содержимым страницы, а не определять ее абсолютное положение по нижнему краю.
В дополнение к классу statusbar применяется выделение, таким образом, выделенное сообщение сочетает оба стиля. Выделение просто изменяет цвет и рамку сообщения в строке состояния на определенный заданный промежуток времени.
Вы, конечно, можете отредактировать CSS по своему желанию и таким образом изменить отображение строки состояния: квадратная или прямоугольная; горизонтальная или вертикальная — справа или слева. В этом суть.

Простой вариант кода JavaScript на jQuery
Первоначально при создании строки состояния я использовал стандартную функцию – дешево и сердито. Она создает элемент DOM для строки состояния и применят соответствующие классы. Это самая простая функция, которая выполняет несколько вещей:

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() и CSS. Эту функцию можно применить в любом месте кода:

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

Обратите внимание, что функция также имеет параметр add, который определяет, добавлять ли сообщение к уже существующим в начало списка в тэге div. Это удобно, если вы собираетесь использовать строку состояния для вывода отладочных сообщений и при этом просматривать весь список сообщений. Чтобы это работало, возможно, потребуется увеличить высоту в классе .statusbar до 40px и более, дабы просматривать несколько сообщений с полосой прокрутки для перемещения по списку.

Обратите внимание, что CSS дает возможность управлять расположением и видом строки состояния. В целом, суть этого кода состоит в создании глобальной переменной _statusbar наряду со стилями .statusbar и .statusbarhighlight для корректного отображения строки состояния.

Создание более продвинутого компонента Statusbar

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

По существу, написанная мной версия – это один класс с несколькими методами. Идея состоит в создании и конфигурации экземпляра класса в коде инициализации:

_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);

Последняя является служебной функцией, которая просто инкапсулирует создание переменной класса посредством глобальной переменной _statusbar с помощью конструктора по умолчанию. Это довольно удобно, так как дает возможность вызывать функцию без предварительной инициализации.

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

Исходный код класса StatusBar:

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); }

Класс обеспечивает реализацию, а для свободного доступа к объекту создается дополнительный статический экземпляр _statusbar. В качестве альтернативы можно использовать представленную ниже функцию showStatus(), которая создает стандартный экземпляр строки состояния и запускает его. Таким образом, имея стили для statusbar и statushighlight, получаем отображение строки состояния в соответствии со стилем.

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

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

  • Многострочное окно информации о состоянии
  • Аддитивные статусные сообщения с добавлением новых снизу или сверху всего списка сообщений
  • Показывать кнопку «закрыть»
  • Возможность использования пользовательских классов CSS

Для настройки этих элементов необходимо на странице кода инициализации сделать следующее:

$(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);
    }
} );

Есть возможность передачи свойств для настройки всех свойств строки состояния с помощью стандартного метода jQuery.extend(), куда можно передать объект со свойствами, которыми нужно расширить StatusBar.
Свойство additive позволяет отображать несколько статусных сообщений и добавлять новые сообщения сверху или снизу всего списка (используя свойство prependMultiline). Это дает возможность использовать строку состояния также в качестве средства отладки, так что вы сможете выводить статусные сообщения, а также избежать использования окон предупреждений alert(). А вот как это будет выглядеть:

Создав несколько экземпляров класса StatusBar можно создать на странице несколько строк состояния. Так, вы можете создать строку состояния для вывода сообщений и строку состояния для отладки и даже назначить им разные стили. Отладочную строку состояния удобнее разместить вертикально с правого или с левого края браузера. Для этого вы, скорее всего, пожелает изменить CSS.
Однако, есть еще несколько компонентов, обеспечивающих вывод отладки и если вам необходим инструмент вывода трассировки для помощи в отладке, вам, вероятно, лучше использовать один из плагинов jQuery. Но если вам нужен простой и быстрый способ вывода сообщений на экран в приложениях или даже в библиотечном коде, вышеописанный подход подойдет отлично, так как он может быть реализован простым дополнением строки кода без последующей настройки, подключая библиотечный код после загрузки скрипта.

На стороне сервера

Несколько человек спрашивали, как использовать компонент jQuery в ASP.NET. Ответ на этот вопрос так же прост как сама строка состояния: просто добавьте необходимый код JavaScript на страницу посредством объекта ClientScript (или с помощью ScriptManager, если вы используете MS AJAX). Представьте, что вам нужно установить исходное сообщение о состоянии, которое будет отображаться при загрузке страницы из кода ASP.NET. Для этого можно использовать такой код:

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);

И вуаля – взаимодействие сервер-страница готово. Скорее всего, вы пожелаете убрать код инициализации со страницы со скриптом во избежание путаницы какое сообщение обрабатывать первым. Следует убедиться, что ShowMessage вызывается по крайней мере один раз для инициализации исходного сообщения и объекта _statusbar. При многократном использовании данной функциональности можно применять объект _statusbar в серверном компоненте и получить несколько свойств, управляющих исходным сообщением, а также настроить другие свойства компонента со стороны сервера. Это исключит необходимость в каких-либо специальных знаниях как, например, необходимость вывода исходного сообщения заранее без явного вызова метода ShowStatus. Возможно, для данного простого компонента это перегиб, но для более сложных компонентов будет, несомненно, полезным.

Строка состояния как плагин jQuery?

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

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

Есть другие идеи?

Что ж, надеюсь, кому-то статья будет полезной. Некоторое время я не редко прибегал к использованию строк состояния во многих своих приложениях, ведь этот компонент значительно упрощает вывод статусных сообщений в приложениях. Надеюсь, вы смогли найти здесь идеи создания различных вспомогательных функций/классов и сможете реализовать их в своем клиентском коде.
Download: wwjQuery.zip


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

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: JQuery, Переводы |

Как попасть на jQuery.ru

Фото автора =) 10.02.2009 от ROM Комментарии (3) »

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

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

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


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

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: JQuery |

Изменение шрифта с эффектом анимации

Фото автора =) 20.01.2009 от ROM 1 Комментарий »

Истоник: 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%

Похожие посты:
  • None Found
Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: JQuery |

jQuery - это очень просто! Часть 5

Фото автора =) 17.12.2008 от ROM Комментариев нет »

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

Прием 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%

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: jQuery - это очень просто |

jQuery - это очень просто! Часть 4

Фото автора =) 11.12.2008 от ROM Комментариев нет »

Теперь, когда мы разобрались с назначением и применением элементов 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%

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: jQuery - это очень просто |

jQuery - это очень просто. Часть 3

Фото автора =) 02.12.2008 от ROM Комментариев нет »

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

Манипуляция с контентом: 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%

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: jQuery - это очень просто |

jQuery - это очень просто! Часть 2

Фото автора =) 28.11.2008 от ROM Комментариев нет »

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

Источник: 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%

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: jQuery - это очень просто, Переводы |

jQuery - это очень просто! Часть 1

Фото автора =) 11.11.2008 от ROM 1 Комментарий »

Источник: 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%

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: jQuery - это очень просто, Переводы |

Продемонстрируйте свои товары с помощью jQuery

Фото автора =) 01.10.2008 от ROM Комментарии (2) »

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

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

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

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

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

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

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

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

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


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

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: JQuery, Переводы |

jQuery Cheat Sheet

Фото автора =) 29.09.2008 от ROM Комментариев нет »

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


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

Похожие посты:
  • None Found
Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: JQuery |

« Раньше


Рубрики:

Управление:




Рейтинг блогов
Рейтинг блогов
Рейтинг блогов
Яндекс цитирования
Каталог блогов Blogdir.ru
количество читателей онлайн и всего


Я - на Карте
Пожертвовать
Каждому своё…
Блог о jQuery, Linux и немного программировании