jQuery – один из самых популярных JavaScript-фреймворков!



Так что же из себя представляет jQuery? Для ответа на этот вопрос следует обратить внимание на то, как он создавался и для каких целей. До появления фреймворков, написание кода на javascript представляло из себя достаточно сложный процесс, для которого необходимо было разбираться в громоздком синтаксисе, что, безусловно, отпугивало начинающих программистов. Процесс освоения javascript всегда болезненно проходил для веб-разработчиков, и по мере того, как всеобщее чувство недовольства возрастало, некоторые из программистов стали создавать собственные библиотеки, которые впоследствии стали называться javascript-фреймворками.

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

Преимущества jQuery, сделавшие его популярным javascript-фреймворком:
  • Небольшой размер файла (примерно 32 Кбайта для версии 1.8.1)
  • Очень простой синтаксис
  • Возможность выполнить объединение последовательно вызываемых методов в цепочки
  • Поддержка дополнительных подключаемых модулей, расширяющих базовые возможности
  • Огромное Интернет сообщество разработчиков
  • Наличие понятно написанной документации (api.jquery.com)
  • Полезные расширения (напримерjQuery UI), предоставляющие дополнительную функциональность Фреймворку


Для того, чтобы подключить jQuery библиотеку, необходимо скачать ее с официального сайта (jquery.com) и в HTML документе подключить ее как обычный javascript файл:

<script type=”text/javascript” src=”js/jquery-1.8.1.min.js”></script>

Однако, существует возможность не скачивать библиотеку с сайта, а подключить последнюю ее версию, хранящуюся на удаленном сайте Google Code:

<script type=”text/javascript” src=”<span lang="EN-US">//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js</span>”>
</script>

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

Плавающий блок с помощью jQuery

Подключаем jQuery

Если у вас не подключено ещё:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>


В
<head>
прописываем
<script type="text/javascript">
	$(function() {
		var offset = $("#fixed").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
			}
			else {$("#fixed").stop().animate({marginTop: 0});};});
	});
</script>


Нужный вам блок заключаете в контейнер.
<div id="fixed">Текст фиксированного блока.</div>

Все для мобильной разработки часть 2

За первой частью Все для мобильной разработки следует вторая.

Jo HTML5 Mobile App Framework для разработки мобильных приложений на HTML5.

Open Source HTML5 Mobile App Framework

Читать дальше →

Мобильная версия Хабра Habar на jQuery Mobile

Этот топик, ответ на сегодняшнюю статью от пользователя webman.
Скажу так, до сегодняшнего момента, даже не задумывался о разработке под мобильные платформы.
Увидел статью, и тут же захотелось попробовать. И вот, что у меня получилось за минут 15:


Ну и при нажатии на вкладку:


Это конечно же просто визуализация. Но выглядит это прикольно.

P.S. использовал jQuery Mobile.

Все для мобильной разработки часть 1

Первая часть серии статей об инструментах и скриптах для мобильный разработки.

Rhodes фрэймворк с открытым исходным кодом для разработки приложений. Rhodes используется для быстрого создания приложений для всех основных операционных системах смартфонов, как:
  • iPhone
  • Windows Mobile
  • BlackBerry (RIM)
  • Symbian
  • Andriod

Читать дальше →

Stikr - плагин для создания всплывающих сообщений на jQuery

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

Перёйдем непосредственно к плагину.

Сначала рассмотрим параметры, которые может принимать плагин:
Читать дальше →

Chosen: сделай выпадающие списки более дружественными

Плагин Chosen создан для оформления красивых и удобных выпадающих списков с помощью jQuery и Prototype. Для установки плагина достаточно просто скачать файлы и прописать одну строчку:

$(".chzn-select").chosen()


(версия для jQuery)

По умолчанию в Chosen вместо длинного текстового списка предлагается поле, по нажатию на которое появляется список. Поддерживается автодополнение ввода, выбор нескольких пунктов меню, элемент optgroup и др. Выглядит вполне нативно. В общем, лучше один раз увидеть.

Поскольку Chosen заменяет стандартный элемент HTML, то не нужно беспокоиться, как он работает с браузерами без поддержки JavaScript. Также не нужно ничего менять в бэкенде: формы сабмиттятся как обычно, изменения только в пользовательском интерфейсе.

Табы при помощи jQuery — все просто

Сверстать табы. Расположение и цвета показаны на картинке:
jquery3
Нужно, чтобы секциям (li) в блоке «.tabNavigation» присваивался класс при клике, который будет изменять цвет фона. Содержимое «.tabs-cont» будет плавно изменять свою прозрачность от hide до 1.0. Плюс, все оформление изменяется в css, html и javascript код на это не должен влиять.

Решение.
Читать дальше →

JQuery. Плавное увеличение объекта при наведении

Посмотрим, как с помощью jquery при наведении плавно увеличивать объект. Пусть, например, это будет картинка.

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

Собственно, приступим сразу к коду, с которого становится понятно, как происходит анимация. Код:
Читать дальше →