JSToolbox - все о JavaScript » Уроки

Как создать плагин для jQuery

admin — Sat, 03 Oct 2009 13:11:30 +0000

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

В основе библиотеки jQuery лежит класс с аналогичным названием jQuery (у него есть псевдоним $). Подобно тому, как классы в JavaScript можно расширять, используя свойство prototype, точно также мы можем расширить функциональность класса jQuery. Именно таким образом и создаются плагины. Поскольку в jQuery для свойства prototype есть псевдоним fn, то он чаще всего и используется для этой цели.

Наш плагин начинаем следующим образом:

(function($){
    $.fn.backgroundHover = function(options) {
       return this.each(function () {
          // Код плагина
       });
    };
})(jQuery);

Первая и последняя строка этого блока представляют собой вызов анонимной функции, единственным аргументом которого будет объект jQuery. В результате, мы получим еще одну область определения переменных (scope), то есть, все переменные и функции, объявленные внутри этой анонимной функции будут недоступны извне (не распространяются на глобальную область видимости window). Поскольку плагин выполняет действия над некоторым множеством элементов DOM в одном вызове, то мы должны обрабатывать все эти элементы в одном цикле. Это делается при помощи функции each в строке 3.

Все плагины способны принимать некоторое количество параметров, выполним эту функциональность следующим образом:

$.fn.backgroundHover = function(options) {
      options = $.extend({
         background: 'red',
      }, options);

Все параметры хранятся в переменной options. Для инициализации этой переменной мы используем фунцию $.extend(), первым аргументом которой указываем объект, с параметрами по умолчанию, второй аргумент – параметры, указанные пользователем. В нашем случае, имеем всего лишь один параметр – цвет фона (background), по умолчанию он имеет значение red.

Ну и последний шаг – добавляем функциональность плагина внутрь функции each:

var self = $(this);
   self.mouseover(function() {
      self.oldBG = self.css('backgroundColor');
      self.css('backgroundColor',options.background);
   });

   self.mouseout(function() {
      self.css('backgroundColor',self.oldBG);
   });

В первой строке мы создаем переменную self, которая будет ссылаться на текущий элемент DOM. Для всех выбранных элементов будут добавлены два обработчика событий – mouseover и mouseout, которые будут менять цвет фона в соответсвии с параметром options.background.

На этом создание плагина закончено, используется он следующим образом:

$('.someNodes').backgroundHover({background: "#fce"});

Исходный код плагина можно посмотреть здесь: background.jquery.js.

Демо пример Источник

При поддержке:

http://majkop.job.ru/ – работа в Майкопе
http://foreign.domania.ru/ – зарубежная недвижимость
http://obninsk.domania.ru/ – недвижимость в обнинске

Управление табличными данными при помощи jQuery

admin — Thu, 22 Jan 2009 15:33:57 +0000

Update: Внимание! Эта статья устаревшая, а плагин, который здесь используется уже не поддерживается автором и имеет неисправленные ошибки.

В одной из прошлых статей я писал о том, как сделать текст на странице динамически редактируемым. Там был представлен метод редактирования при помощи плагина jEditable. Таким образом можно динамически редактировать любой блок текста на странице. Однако если речь идет о табличных данных, то гораздо удобнее использовать другое решение – плагин tableFormSynch. Этот плагин связывает таблицу с формой, давая возможность динамически редактировать данные в таблице, а также добавлять и удалять записи.

В этой статье я покажу, как сделать простое приложение, реализующее редактирование, добавление и удаление записей таблицы, сохраняя данные при помощи AJAX. Чтобы создать приложение нам будут нужны библиотека jQuery, плагин metadata (требуется для работы плагина tableFormSynch), а также jQuery Form Plugin для сохранения данных формы через AJAX. Но прежде чем мы начнем, предлагаю посмотреть на готовый результат. Смотреть демо пример.

Итак, начинаем с того, что создаем HTML страницу и подключаем к ней необходимые нам скрипты:

Далее добавляем табличные данные, которые мы собираемся редактировать, плюс сюда же добавляем ссылки на редактирование и удаление записи. Здесь есть обязательные условия: для каждой строки таблицы нужно указать ID записи в атрибуте id и метаданные (то есть все данные записи) в атрибуте class. И еще – все строки таблицы должны быть обязательно заключены в тэги :


	Иван
	Иванов
	Программист
	Редактировать | удалить

Следующий шаг – создание формы: она будет располагаться в последней строке таблицы и при загрузке страницы будет не видна. Появляться она будет по надобности, при нажатии на ссылки “добавить запись” или “редактировать”. Форма будет иметь все нужные поля (в нашем случае текстовые поля) и три кнопки – “добавить” и “редактировать”, которые появляются в зависимости от выбранного действия, а также “отмена”, по нажатию на которую форма будет исчезать.

Ну и самая малость – под таблицей размещаем ссылку “добавить запись”:

Добавить запись

Теперь приступим к созданию скрипта нашего приложения. Как полагается для скриптов, написанных под jQuery, заключаем весь наш код в функцию $.ready(), и первое, что мы туда поместим, это вызов функции bindTableToForm(), которая связывает таблицу с формой:

$(document).ready(function() {

	$("#demoTable").bindTableToForm($("#rowEditForm"),"personId");

});

Первым параметром в функцию мы передаем форму, а вторым – название ключевого поля записи, в нашем случае это ID пользователя.

Далее, создаем фукнцию редактирования. Добавляем ко всем ссылкам “редактировать” обработчик, который будет показывать форму редактирования под нужной строкой. Форму заполняем данными при помощи функции populateForm()и здесь же показываем конпку “редактировать” и прячем конпку “добавить”. Таким образом мы переводим форму в режим редактирования. Ну и для красоты подкрашиваем редактируемую строку бледно розовым цветом:

$("a.edit").click(function() {

	$("#addBtn").hide();
	$("#updateBtn").show();

	$(this).populateForm();

	var row = $(this).parent().parent();
	row.find('td').css('background-color','#faa');
	$('#editableRow').insertAfter(row).fadeIn('slow');

	// отмена действия по умолчанию
	return false;
});

При нажатии на кнопку “обновить”, данные формы будут отправляться на сервер через AJAX, и при успешном сохранении, запись в таблице будет обновляться. Выполняем это все в обработчике onclick кнопки:

$("#updateBtn").click(function() {
	$('#rowEditForm').ajaxForm({
		beforeSubmit : function(){
			$('#loading').show();
		},
		success : function(response){
			$('#loading').hide();
			if (response == 1)
				$("#rowEditForm").updateRow();
			else
				alert('Ошибка сохранения данных');

			var rowId = $("input[name='personId']").val();
			var row = $('tr#'+rowId).find('td').css('background-color','#F5F5F5');
			$('#editableRow').fadeOut('slow');
		}
	});
});

Здесь мы используем функцию ajaxForm() для выполнения AJAX запроса с данными формы. При успешном сохранении данных, сервер возвращает значение 1, в любом другом случае, трактуем результат как ошибку. Данные в таблице обновляем фукнцией updateRow().

Далее реализовуем добавление новой записи. Всё делаем также, как и для обновления, только вместо того, чтобы заполнять форму, очищаем её функцией clearForm(). Ну и естественно, вместо кнопки “редактировать” делаем активной кнопку “добавить”:

$("a.add").click(function() {
	$("#addBtn").show();
	$("#updateBtn").hide();

	// очищаем форму
	$("#rowEditForm").clearForm();
	$("input[name='personId']").val(0);

	$('#demoTable tbody').append($('#editableRow'));
	$('#editableRow').fadeIn('slow');

	return false;
});

Обработчик для кнопки “добавить” также мало чем отличается от функции обновления, за исключением того, что сервер возвращает ID новой записи, который затем передается в функцию addRow() для добавления записи:

$("#addBtn").click(function() {
	$('#rowEditForm').ajaxForm({
		beforeSubmit : function(){
			$('#loading').show();
		},
		success : function(response){
			$('#loading').hide();
			if (response == 0)
				alert('Ошибка добавления данных');
			else
				$("#rowEditForm").addRow(response);

			$('#editableRow').fadeOut('slow');
		}
	});
});

Теперь выполним удаление записи – используем для этого функцию deleteRow(). Для отправки запроса на сервер будем использовать функцию $.post(), которая будет отправлять запрос в отдельный файл delete.php. Последний выполняет удаление записи и возвращает 1 если запись удалилась, и 0 если произошла ошибка. В самом начале функции мы получаем ID записи которую необходимо удалить, затем передаем это значение в функцию $.post() в качестве параметра personId, который будет установлен переменной в POST:

$("a.delete").click(function() {

	var id = $(this).parent().parent().attr('id');

	var that = $(this);
	$.post('delete.php',
		{personId : id},
		function(data){
			if (data == 1)
				that.deleteRow();
			else
				alert('Ошибка удаления записи');
		});
	return false;
});

Ну и последняя, самая простая функция – “отмена”. Здесь мы просто прячем форму и закрашиваем все строки формы в стандартный цвет:

$("#cancelBtn").click(function(){
	$("#editableRow").fadeOut("slow");
	$(".tablesCorp td").css('background-color','#F5F5F5');
});

Посмотреть скрипт полностью можно здесь.

После этого нужно еще установить пару обязательных стилей:

#editableRow {display:none}
#addBtn {display:none}

Первая строка прячет форму редактирования, а вторая кнопку “добавить”, которые в начале работы должны быть скрытыми.

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

До встречи!

смотреть демо скачать демо

Спонсор статьи:
Автошколы, автокурсы и автоинструкторы Москвы
Курсы MBA, бизнес школа мба одесса
Инструктор по вождению – обучение вождению автомобиля в Москве

Туториал: Создание окон на Mootools

admin — Tue, 23 Sep 2008 08:13:41 +0000

Различные всплывающие окошки, выполненные на JavaScript (не путать с pop-up окнами, вызываемыми при window.open), становятся все более распространенными. Чаще всего они используются для динамического отображения подсказок, диалогов, да и просто рекламы (что зачастую раздражает ). Сегодня я расскажу то, как можно сделать такие окна при помощи популярной библиотеки Mootools. Конечный результат будет выглядеть следующим образом:

Как видите дизайн окон несколько позаимствован из ExtJS.

Итак, начнем с основы – определимся с HTML разметкой окна. Схематически она показана следующем рисунке:

Основным контейнером для окна будет

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

Теперь, определившись со структурой окна, можно писать код. Поскольку нам нужно создавать не одно окно, а множество, то реализуем это в виде класса:

var dWindow = new Class({
	options: {
		minWidth : 150,
		minHeight : 150,
		width : 200,
		height : 200,
		top : 0,
		left : 0,
		resizable : true,
		statusBar : true,
		content : '',
		id : ''
	},

	// конструктор класса
	initialize: function(options){
		this.setOptions(options);
	}

	Implements : [Options, Events]
});

Это стандартная структура класса в Mootools. Перечисленные опции options определяют свойства окна – размеры, положение, и др. Теперь нам нужно сделать функцию, которя будет создавать окно и добавлять его в нужный нам элемент. Делаем её следующим образом (функция _create()):

var dWindowZIndex = 100;

var dWindow = new Class({
	options: {
		minWidth : 150,
		minHeight : 150,
		width : 200,
		height : 200,
		top : 0,
		left : 0,
		resizable : true,
		statusBar : true,
		content : '',
		id : ''
	},

	handle : null,
	drag : null,
	dragParams : {},

	initialize: function(options){
		this.setOptions(options);
	},

	_create : function(id){
		var target = $(id);
		if (!target)
			return;

		this.handle = new Element('div', {
				'class':'dWindow',
				'id' : this.options.id,
				styles : {
					'width':this.options.width + 2,
					'left':this.options.left,
					'top':this.options.top,
					'z-index':dWindowZIndex
				}
			});
		dWindowZIndex++;
		this.handle.addEvent('mousedown', this.up.bind(this));

		var bar = new Element('div', {'class':'topBar'});
		var closeBtn = new Element('div', {'class':'closeBtn'});
		closeBtn.addEvent('click', this.close.bind(this));
		closeBtn.injectInside(bar);

		var table = new Element('table',{
			'class':'dContainer',
			'cellpadding':0,
			'cellspacing':0,
			'border':0
		});

		var tbody = new Element('tbody');

		// первый ряд (содержимое окна, левая и правая границы)
		var row = new Element('tr');
		var leftBorder = new Element('td', {'rowspan':2,'class':'leftBorder'});
		var rightBorder = new Element('td', {'rowspan':2,'class':'rightBorder'});
		var center = new Element('td');
		var content = new Element('div',{'class':'centralArea', styles : {'width':this.options.width, 'height':this.options.height}});
		content.set('html',this.options.content);
		center.adopt(content);

		row.adopt([leftBorder, center, rightBorder]);

		// второй ряд (строка состояния)
		var row2 = new Element('tr');
		var statusBar = new Element('td',{'class':'statusBar'});
		var brResize = new Element('div', {'class':'resize'});
		brResize.injectInside(statusBar);
		statusBar.injectInside(row2);

		// третий ряд (с нижней кромкой)
		var row3 = new Element('tr');
		var bottomBorder = new Element('td', {'colspan':3,'class':'bottomBorder'});
		bottomBorder.injectInside(row3);

		row.injectInside(tbody);
		row2.injectInside(tbody);
		row3.injectInside(tbody);
		tbody.injectInside(table);

		this.handle.adopt([bar, table]);
		this.handle.injectInside(target);
	},

	Implements : [Options, Events]
});

Функция _create() довольно таки незатейлива (пока) и все что она делает, это создает все элементы окна при помощи класса Element и добавляет их в основной контейнер окна (функции injectInside() и adopt()), создаваемый тут же. Помимо этого кнопке "Закрыть" назначается обработчик close() (будет создан позже), который будет закрывать окно. В конце концов, в последней строке функции, созданное окно добавляется в элемент target, имеющийся на странице, ссылка на который должна передаваться функции в качестве аргумента.

Также обратите внимание на глобальную переменную dWindowZIndex, которая нужна для хранения текущего максимального значения z-index окна. Каждый раз, когда пользователь будет кликать внутри окна, это значение будет увеличиваться на единицу и назначаться текущим значением z-index окна. Обработчик, который будет выполнять эту операцию – функция up() – назначается событию mousedown основного контейнера окна. Все эти действия направлены на то, чтобы дать пользователю возможность выбрать окно, переместив его поверх всех других при щелчке на нем.

Итак, на данном этапе, функция _create() создает окно, которое имеет следующую структуру:

Теперь дополним наш класс недостающими функциями:

_destroy : function(){
	if ($type(this.handle) == 'element'){
		this.handle.destroy();
	}
	this.handle = null;
},

open : function(elem){
	if (!this.handle)
		this._create(elem);
},

close : function(){
	this._destroy();
},

up : function(){
	this.handle.setStyle('z-index', ++dWindowZIndex);
}

Здесь указаны упомянутые выше функции up() и close(), а также функция open(), которая проверят, создано ли окно или нет, ежели нет, то оно создается функцией _create(). Функция _destroy(), противоположная последней, закрывает окно, уничтожая экземпляр класса dWindow.

Следующим этапом нашей разработки будет создание таблиц стилей для окна. Не особо углубляясь в детали реализации CSS верстки, ибо она довольно таки тривиальна, я просто приведу окончательный её результат:

.dWindow {
	background: #aaa;
	position:absolute;
	z-index:10000;
}

.dWindow .topBar{
	height: 20px;
	background: #bad0ee url('white-top-bottom.gif') repeat-x;
	border-left: 1px solid #84a0c4;
	border-right: 1px solid #84a0c4;
}

.dWindow .closeBtn {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	background: url('close.gif') no-repeat;
}

.dWindow td.leftBorder {
	width:2px;
	background:#fff url('border-left.gif') repeat-y;
	cursor:w-resize;
}

.dWindow td.rightBorder {
	width:2px;
	background:#fff url('border-right.gif') repeat-y;
	cursor:e-resize;
}

.dWindow td.bottomBorder {
	height:2px;
	background: #fff url('border-bottom.gif') repeat-x;
	cursor:s-resize;
}

.dWindow .centralArea {
	width: 200px;
	height: 200px;
	background: #fafafa;
	vertical-align: top;
	overflow: auto;
}

.dWindow td.statusBar {
	position: relative;
	height: 16px;
	background: #d5e4f5;
}

.dWindow .resize {
	position: absolute;
	width: 12px;
	height: 12px;
	right:2px;
	bottom:2px;
	background: #d5e4f5 url('resize.gif') no-repeat bottom right;
	cursor: se-resize;
	font-size:1px;
	line-height:0;
}

.dragging {
	cursor: move;
}

Теперь мы приступаем к последнему шагу нашего туториала – добавим возможность перетаскивать окна и изменять их размер. В Mootools есть классы Drag и Drag.Move, которые предназначены для создания перетаскиваемых элементов. Ими мы и воспользуемся.

Класс Drag.Move, помимо прочего, отличается от Drag тем, что он позволяет ограничивать перетаскивание объекта рамками некоторого элемента. Используя это свойство, мы будем использовать Drag.Move для главного контейнера окна для того, чтобы ограничить перетаскивание пределами страницы.

Итак, создаём новый объект Drag.Move, указав для него главный контейнер окна this.handle (делаем это все в функции _create()):

this.drag = new Drag.Move(this.handle, {
    snap: 0,
    handle: bar,
	container: target,
    onSnap: function(el){
        el.addClass('dragging');
    },
    onComplete: function(el){
        el.removeClass('dragging');
    }
});

В качестве параметра handle используем строку заголовка окна (переменная bar), ибо, именно за него окно и будет перетаскиваться. В параметр container передаем указатель на элемент страницы, который будет ограничивать перетаскивание окна (если передать сюда body, то перетаскивание будет ограничиваться размерами страницы). Стандартные для Drag.Move обработчики onSnap и onComplete используем для того, чтобы изменять вид курсора при перетаскивании окна.

Закончив с перетаскиванием окна, поработаем с его границами, перетаскиванием которых можно будет изменять размеры окна. Это будет несколько более сложно сделать, поскольку при каждом движении границы, нужно будет пересчитывать размеры окна. Для этой цели идеально подходят события onSnap (захват мышкой за кромку) и onDrag (шаг при перетаскивании) класса Drag, который мы будем использовать для границ. Реализация изменения размера по вертикали (нижняя граница) показана в следующем фрагменте:

var that = this;
this.bDrag = new Drag(bottomBorder, {
	onSnap : function(elem){
		that.dragParams.h = content.getSize().y;
		that.dragParams.H = that.handle.getSize().y;
		that.dragParams.target = content;
	},

	onDrag : function(elem){
		var delta = this.mouse.now.y - this.mouse.start.y;
		var h = that.dragParams.h + delta;
		var H = that.dragParams.H + delta;
		var targetPos = that.dragParams.target.getPosition();

		if (h < that.options.minHeight || (H + targetPos.y) > (window.getScrollTop() + window.getHeight())) {
			return;
		}
		that.dragParams.target.setStyle('height', h);
		that.handle.setStyle('height', H);
	}
});

Для изменения размера окна по вертикали, нам необходимо изменять высоту окна (

– переменная handle) и размер div-а для содержимого окна (

– переменная content). В обработчике onSnap мы получаем высоту этих двух элементов, а в onDrag определяем, на какое расстояние сместился курсор мыши (delta), и меняем высоту элементов на полученное значение. Условный оператор в onDrag добавлен для ограничения изменения размера в соответствии со значением minHeight (минимальная высота) и с размерами страницы.

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

var that = this;

// левая граница
this.lbDrag = new Drag(leftBorder, {
	onSnap : function(elem){
		that.dragParams.w = content.getSize().x;
		that.dragParams.W = that.handle.getSize().x;
		that.dragParams.pos = content.getPosition();
		that.dragParams.target = content;
	},

	onDrag : function(elem){
		var delta = this.mouse.now.x - this.mouse.start.x;
		var w = that.dragParams.w - delta;
		var W = that.dragParams.W - delta;
		var L = this.mouse.start.x + delta;
		if (w < that.options.minWidth || L < target.getPosition().x) {
			return;
		}
		that.dragParams.target.setStyle('width', w);
		that.handle.setStyle('width', W);
		that.handle.setStyle('left', L);
	}
});

// правая граница
this.rbDrag = new Drag(rightBorder, {
	onSnap : function(elem){
		that.dragParams.w = content.getSize().x;
		that.dragParams.W = that.handle.getSize().x;
		that.dragParams.target = content;
	},

	onDrag : function(elem){
		var delta = this.mouse.now.x - this.mouse.start.x;
		var w = that.dragParams.w + delta;
		var targetPos = that.dragParams.target.getPosition();

		if (w < that.options.minWidth || (W + targetPos.x) > (window.getScrollLeft() + window.getWidth())) {
			return;
		}

		var W = that.dragParams.W + delta;
		that.dragParams.target.setStyle('width', w);
		that.handle.setStyle('width', W)
	}
});

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

var that = this;
this.resizeDrag = new Drag(brResize, {
	preventDefault: true,
	style: false,
	onSnap : function(elem){
		that.dragParams.h = content.getSize().y;
		that.dragParams.H = that.handle.getSize().y;
		that.dragParams.w = content.getSize().x;
		that.dragParams.W = that.handle.getSize().x;
		that.dragParams.target = content;
	},

	onDrag : function(){
		var deltay = this.mouse.now.y - this.mouse.start.y;
		var deltax = this.mouse.now.x - this.mouse.start.x;
		var h = that.dragParams.h + deltay;
		var H = that.dragParams.H + deltay;
		var w = that.dragParams.w + deltax;
		var W = that.dragParams.W + deltax;
		var targetPos = that.dragParams.target.getPosition();

		if (h < that.options.minHeight || (H + targetPos.y) > (window.getScrollTop() + window.getHeight())
			|| w < that.options.minWidth || (W + targetPos.x) > (window.getScrollLeft() + window.getWidth())) {
			return;
		}

		that.dragParams.target.setStyle('height', h);
		that.handle.setStyle('height', H);
		that.dragParams.target.setStyle('width', w);
		that.handle.setStyle('width', W);
	}
});

Вот собственно и все, окно готово. Создание экземпляра окна выглядит так:

// содержимое окна
var sText = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';

window.addEvent('domready', function(){
	// создаем окно
	var w = new dWindow({
		width:250,
		height:180,
		minWidth:170,
		minHeight:100,
		content: sText
	});
	// добавляем его на страницу
	w.open($(document.body));
});

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

смотреть демо скачать

Туториал – приложение FAQ на jQuery

admin — Mon, 12 May 2008 21:55:46 +0000

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

Окончательный результат будет работать следующим образом: смотреть.

Для создания полос прокрутки я буду применять плагин jScrollPane, который в свою очередь требует jquery.dimensions.js, а также jquery.mousewheel.js чтобы можно было прокручивать список при помощи колесика мышки.

Для начала скачайте дистрибутив jScrollPane и распакуйте его в папку с вашим приложением. Затем создайте HTML документ в который подключите библиотеку jQuery и затем три вышеперечисленных скрипта, которые входят в состав дистрибутива jScrollPane:

Далее подключаем необходимые CSS файлы – jScrollPane.css, который содержит стили полос прокрутки, и style.css – файл в котором я буду указывать все остальные стили на странице:

Теперь можно собственно приступать к созданию нашего ЧаВО. Чтобы обеспечить принцип “ненавязчивости” для скрипта (пользователь должен иметь возможность пользоваться ЧаВО даже если JavaScript не включен), заголовки ответов, которые будут находиться в правой части, заключим в ссылки типа ответ переход к которым будем осуществлять ссылками вида Q: вопрос .. ?.

Общая структура выглядит следующим образом:


	Часто задаваемые вопросы (ЧаВо)
	
		
		Общая информация (заголовок раздела)
			
			Q: Какой то вопрос?
			....
			
		....
		
	

	
		
		Общая информация
		Q: Какой то вопрос?

		A: Некоторый ответ.
		....

Див с id=container размещаем посреди страницы, указывая для него width и margin, а левый и правый контейнеры для вопросов и ответов располагаем при помощи float. Div с классом scrollable используется как контейнер с прокруткой, для него ставим overflow:auto. В общем содержимое файла style.css будет следующим:

body {
	font-size: 12px;
	font-family: Georgia, Arial, Verdana, sans-serif;
}

h6 {
	font-size: 12px;
	font-weight: bold;
	margin: 4px 0;
	cursor: pointer;
}

#container {
	width:780px;
	margin: 20px auto;
	background: #fff;
	border: 1px solid #aaa;
}

#title {
	padding: 6px 0;
	text-align: center;
	font-size: 20px;
}

#left_pane,
#right_pane {
	border: 1px solid #aaa;
}

.scrollable {
	width: 370px;
	height: 350px;
	overflow: auto;
}

.scrollable ul {
	position: relative;
}

#left_pane {
	float: left;
	margin: 10px 0 10px 10px;
}
#right_pane {
	float: right;
	margin: 10px 10px 10px 0;
}

.question a {font-style:italic}

На этом этапе приложение выглядит следующим образом: смотреть.

Теперь наведем немного красоты – создадим меню аккордеон:

$(document).ready(function(){
	$('#left_pane h6').each(function(i){
		if(i!=0){
			$(this).next().hide();
			$(this).attr('class','closed');
		}
		$(this).click(function(){
			if ($(this).hasClass('opened'))
				return;

			// закрываем все подменю
			$('#left_pane h6.opened').each(function(){
				$(this).attr('class','closed');
				$(this).next().slideUp();
			});

			// открываем меню, на котором щелкнул пользователь
			$(this).attr('class','opened');
			$(this).next().slideDown('slow');
		});
	});
});

В самом начале мы закрываем все подменю при помощи функции slideUp(), оставляя открытым только первое (используем аргумент i в функции each для получения индекса). Подменю будет открываться/закрываться при нажатии на заголовке (тег h6) при помощи функций slideUp() и slideDown(), при этом открытому меню будет присваиваться класс opened, а закрытому – closed.

Следующий шаг – создание полос прокрутки. Для этого добавляем вызов функции jScrollPane():

$('.scrollable').jScrollPane({animateTo:true, showArrows:true, scrollbarWidth:11});

Здесь параметр animateTo указывает на то что нужно использовать анимацию при последующих вызовах scrollTo(), showArrows – для отображения стрелок вверху и внизу полосы прокрутки, scrollbarWidth устанавливает ширину полосы прокрутки.

И последнее, плавное прокручивание к нужному месту обеспечиваем при помощи следующей функции:

$('#left_pane li a').click(function(event){
	var target = $('#right_pane a[name='+$(this).attr('href').replace('#','')+']');
	var cont = $('#right_pane .scrollable');
	var p = target.parent();
	var h = parseInt(p[0].offsetTop);
	cont[0].scrollTo(h);

	event.preventDefault();
	});

Указатель на тег с ответом мы получаем из атрибута href ссылки, затем определяем координату этого элемента по вертикали при помощи offsetTop() и затем плавное прокручивание функцией scrollTo().

Окончательный код выглядит следующим образом:

$(document).ready(function(){
	$('#left_pane h6').each(function(i){
		if(i!=0){
			$(this).next().hide();
			$(this).attr('class','closed');
		}
		$(this).click(function(){
			if ($(this).hasClass('opened'))
				return;

			$('#left_pane h6.opened').each(function(){
				$(this).attr('class','closed');
				$(this).next().slideUp();
			});

			$(this).attr('class','opened');
			$(this).next().slideDown('slow');

			$('#left_pane .scrollable').jScrollPane({animateTo:true, showArrows:true, scrollbarWidth:11});

		});
	});

	$('.scrollable').jScrollPane({animateTo:true, showArrows:true, scrollbarWidth:11});

	$('#left_pane li a').click(function(event){
		var target = $('#right_pane a[name='+$(this).attr('href').replace('#','')+']');
		var cont = $('#right_pane .scrollable');
		var p = target.parent();
		var h = parseInt(p[0].offsetTop);
		cont[0].scrollTo(h);

		event.preventDefault();
	});
});

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

И последнее – подкорректируем дизайн полосы прокрутки, редактируя файл jScrollPane.css. На следующей картинке указано, какие стили в нем нужно редактировать:

Всё, приложение готово.

P.S.: текст FAQ в демо примере взят на одном из сайтов, которые я недавно разрабатывал, ибо “Lorem Ipsum” уже несколько поднадоел.

смотреть демо загрузить пример