Категории: CSS

Создаем плагин для jQuery

Владимир | | CSS, HTML, JavaScript, Web разработка.

jquery plugin logo

Этот пост – вольный перевод очень полезной статьи Jeffrey Way Learn How to Create a jQuery Plugin.

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

Вы можете скачать исходники этого примера или посмотреть демонстрацию.

У вас может возникнуть мысль: «Что за суета вокруг jQuery? Нужно загрузить кучу плагинов чтобы эта библиотека на что-нибудь годилась». Первое, это не так. Второе, jQuery специально разрабатывалась для широкого применения. Сохраняя ядро библиотеки маленьким – 16кБ (прим. – речь идет о сжатом варианте) – пользователи могут добавить дополнительные плагины по собственному усмотрению. Сегодня, я покажу вам, как создать собственный плагин под названием «Center» с нуля. Приступим!

Наша задача

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

Создаем подсказки в стиле WP-Coda

Владимир | | CSS, HTML, JavaScript, Web дизайн, Web разработка.

wp coda effect

Думаю, все кто интересуется web дизайном видели тему для WordPress WP-Coda.

Меня прежде всего заинтересовал эффект со всплывающим блоком (появляется над первым пунктом в горизонтальном меню).

Эффект очень красивый и мне захотелось сделать всплывающие подсказки в таком же стиле.

Как оказалось – ничего сверх сложного 😉 .

Прежде всего, рассмотрим принцип работы эффекта.

При наведении указателя мышки на какой-то элемент страницы плавно появляется блок с текстом. При этом одновременно применяются два эффекта: перемещение и изменение прозрачности.

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

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

Незаметная загрузка картинок

Владимир | | CSS, HTML, Web дизайн, Web разработка.

image loading

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

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

Самый распространенный пример – индикаторы загрузки. Кстати, существует бесплатный сервис, который создает такие загрузчики.

Алгоритм работы в большинстве случаев следующий:
Читать дальше

Всплывающие подсказки с помощью jQuery

Владимир | | CSS, HTML, JavaScript, Web разработка.

jquery tooltip

Сегодня речь пойдет о JavaScript библиотеке, которая предназначена для создания всплывающих подсказок на web странице. Называется она Tooltip и представляет собой плагин для библиотеки jQuery.

Раньше я писал об аналогичном плагине для библиотеки Prototype.

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

Рассмотрим несколько примеров.
Читать дальше

Блокировка доступа к элементам web страницы

Владимир | | Ajax, CSS, HTML, JavaScript, PHP, Web разработка.

jquery blockui plugin

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

Библиотека называется jQuery BlockUI Plugin и, как следует из названия, представляет собой плагин к jQuery.

Принцип работы следующий. Библиотека создает дополнительный слой (overlay) над всей страницей или каким-то блоком на ней.

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

Если вы видели, как работают библиотеки типа Lightbox, то представляете, о чем идет речь.

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

PHP скрипт. Simple URL Checker — создание представлений

Владимир | | CodeIgniter, CSS, PHP, Web разработка.

Simple Url Checker - views
Приветствую!

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

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

Наше приложение содержит всего две страницы. Главную со сведениями обо всех выполненных проверках, и страницу с подробной информацией по конкретному URL. В принципе, нам достаточно двух представлений. Но заголовок и «хвостовик» страницы повторяются, поэтому мы создадим для них отдельные представления.

Все файлы представлений должны находиться в папке application/views/.

Рассмотрим их подробнее.
Читать дальше

Разработка на JavaScript. Эффекта морфинга с помощью Scriptaculous

Владимир | | CSS, HTML, JavaScript.

Логотип для статьи о морфинге
Думаю, ни для кого не секрет, что за последние несколько лет резко увеличилось число сайтов, использующих различные визуальные эффекты.

Хорошо это или плохо, разговор отдельный, но, наверное, все согласятся, что грамотное использование этих эффектов позволяет создать красивый web сайт с которым легко и приятно работать.

В этой статье мы рассмотрим пример использования очень интересного эффекта из библиотеки ScriptAculousморфинга.

По определению, морфинг – это плавное преобразование одного объекта в другой.

Он очень часто используется в компьютерных играх и кинематографе.

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

Тем не менее, можно изменить цвет и размеры блоков и шрифтов, их границы, фон и т.п.

Как это работает
Читать дальше

Новогодний JavaScript. Украшаем елочку.

Владимир | | CSS, HTML, JavaScript.

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

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

Возможный результат показан на скриншоте.

Демонстрационная страница с елочкой размещена здесь.

Исходные материалы: рисунки с елочкой (firtree.jpg) и шариками (ball1_1.gif, ball1_2.gif, …), библиотека prototype.

Идея очень простая. Посетитель щелкает мышкой по картинке с елочкой и в месте клика появляется шарик. Я нарисовал пять шариков разных цветов. Какой из них появиться определяет генератор случайных чисел. Естественно, это поведение вы можете изменить.

Посмотрите на разметку страницы.

<div id="content" onclick="addBall(event)"></div>

<p><img src="ball1_1.gif" style="display:none" alt="шарик"></img>
<img src="ball1_2.gif" style="display:none" alt="шарик"></img>
<img src="ball1_3.gif" style="display:none" alt="шарик"></img>
<img src="ball1_4.gif" style="display:none" alt="шарик"></img>
<img src="ball1_5.gif" style="display:none" alt="шарик"></img></p>

И таблицу стилей.

#content {
	margin: auto;
	border: solid 1px #ff0000;
	width: 277px;
	height: 316px;
	background-image: url('firtree.jpg');
}

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

Кстати, обратите внимание на изображения шариков, которые вставлены после блока content. Эти шарики не отображаются браузером, т.к. для них установлено правило display:none. Невидимые картинки нам, конечно, не нужны, но этот прием позволяет устранить задержки при развешивании шариков.

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

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

Теперь перейдем к добавлению шариков. В обработчике события onclick блока content мы вызываем функцию addBall(event) и передаем ей объект с параметрами события.

Посмотрите на ее исходный код:

var i = 0;
function addBall(e) {
	var n = Math.ceil(Math.random()*5);
	new Insertion.Bottom("content", "<img src=\"ball1_" + n + ".gif\" id=\"ball_" + i + "\" alt=\"шарик\"></img>");
	var mouseCoord = getMouseCoord(e);
	var ballLeft = mouseCoord[0] - 10;
	var ballTop = mouseCoord[1] - 10;
	Element.setStyle("ball_" + i, {top: ballTop + "px", left: ballLeft + "px"});
	i = i + 1;
}

Прежде всего, мы объявили глобальную переменную i. С ее помощью будем создавать уникальные идентификаторы (id) для каждого добавленного шарика. Они нам необходимы для того, чтобы задать размещение для каждого шарика отдельно.

Выбор шарика мы выполняем с помощью генератора случайных чисел (Math.random()). Т.к. он возвращает числа в диапазоне от 0 до 1, а у нас 5 шариков, умножаем результат на 5 и округляем до ближайшего большего целого числа (Math.ceil()).

Вставка шарика осуществляется с помощью функции Bottom объекта Insertion из библиотеки prototype. Использовать ее несложно. В первом параметре указываем id блока, в который нужно добавить html разметку, а во втором – указываем саму разметку (здесь мы вставили тег img с нужным шариком).

Теперь рассчитываем координаты левого верхнего угла картинки с шариком. Для этого определяем координаты курсора:

function getMouseCoord(e) {
	var IE = document.all?true:false;
	if (IE) { // определяем положение курсора в IE
	tempX = event.clientX + document.body.scrollLeft;
	tempY = event.clientY + document.body.scrollTop;
	}
	else {  // определяем положение курсора в NS
	tempX = e.pageX;
	tempY = e.pageY;
	}
	return [tempX, tempY];
}

Здесь ничего сложного, единственная заморочка заключается в том, что в IE координаты определяются не так как в Netscape, Mozilla.

От координат курсора отнимаем 10px (это половина длины и ширины изображения с шариком) и получаем координаты левого верхнего угла.

Для установки этих координат используем метод setStyle (строка 8). В его первом параметре указываем id элемента, а во втором – CSS правила.

В таблице стилей задаем для всех изображений абсолютное позиционирование.

img {
	position: absolute;
}

Вот и все. Можно наряжать елочку 🙂
Чтобы убрать шарики обновите страницу.

С Новым Годом!

P.S. Вы можете скачать архив с исходными файлами примера или посмотреть рабочую версию страницы.

Интересно почитать

Вместительные прицепы помогут вам сэкономить на количестве поездок.
С автомобилем audi вам не придется заботится о своем имидже.
Продажа подержанных автомобилей — удобный способ избавится от хлама.

CSS верстка. Отрицательные отступы и IE6.

Владимир | | CSS, HTML.

IE6 и отступыНедавно столкнулся с небольшой проблемой. Во время верстки сайта etutorials.simplecoding.org нужно было разместить два элемента так, чтобы они частично перекрывались. В обоих элементах в качестве фона используются картинки, поэтому разместить их нужно точно, иначе линии не совпадут.

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

Задача в общем-то простая и должна легко решаться с помощью CSS. Но разработчики IE6 так не считали.
Читать дальше

CSS верстка. Создание страницы с тремя разноцветными колонками.

Владимир | | CSS, HTML.

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

Естественно, не очень удобно, что боковые колонки всегда одного и того же цвета. Исправляем этот недостаток.
Читать дальше