Пуристы Web-технологий различают следующие подвиды этой технологии:

* AJAX – Asynchronous JavaScript and XML, асинхронный Javascript и XML. В ответ на запрос с клиента сервер отвечает правильно сфоримированным XML-документом.
* AJAH – Asynchronous JavaScript and HTML, асинхронный Javascript и HTML. В ответ на запрос с клиента сервер отвечает уже сгенерированным HTML-документом или его частью.
* AHAH – Asynchronous HTML and HTTP, асинхронный HTML и HTTP. То же самое, что и AJAH.
* AJAJ – JavaScript and JSON, асинхронный Javascript и JSON. В ответ на запрос с клиента сервер отвечает правильной записью объекта Javascript в формате JSON (http://json.org).

jQuery предлагает реализацию всех трех подвидов технологии AJAX и еще один, AJAJs – все те же и Javascript. Теперь обо всем этом подробнее.

Базовыми функциями для работы с AJAX являются post() и get() (есть еще более низкоуровневая, ajax(), но мы ее не будем рассматривать):

$.post(url[, params[, callback]])
$.get(url[, params[, callback]])

Здесь:

* url – адрес страницы, на которую будет отправлен запрос;
* params – параметры, передаваемые в запросе в виде пар «ключ : значение»;
* callback – функция, которая будет вызвана в случае успешного завершения вызова.

Пример:

$.post(
‘/ajaxtest.php’,
{
type: "test-request",
param1: "param1″,
param2: 2
},
onAjaxSuccess
);
function onAjaxSuccess(data)
{
// Здесь мы получаем данные, отправленные сервером
alert(data);
}

А что же на сервере? Вызов страницы при помощи технологии AJAX ничем не отличается от простого вызова страницы, например, путем открытия ее в браузере. То есть передаваемые параметры будут доступны на этой странице так же, как если бы они были переданы стандартными методами get или post. На сервере у нас может существовать, например, вот такой ajaxtest.php:

<?php
// Если страница вызвана с помощью .post(), переданные значения будут,
// как всегда, доступны в глобальной переменной $_POST
// Если страница вызвана с помощью .get, переданные значения будут,
// как всегда, доступны в глобальной переменной $_GET

echo ‘text’;
?>

После того как ajaxtest.php отработает, в функцию onAjaxSuccess на клиенте будет передан текст «text». Обратите внимание на HTTP_X_REQUESTED_WITH. Этот HTTP-заголовок устанавливается jQuery во время запросов с помощью AJAX. Это помогает узнать, тип поступившего запроса и соответственно обрабатывать данные. Во всем остальном запрос через Аякс ничем не отличается от обычного запроса страницы у сервера.
ПРИМЕЧАНИЕ

В различных библиотеках, особенно использующих шаблон MVC, часто необходимо знать, как была вызвана страница – открыли ее в браузере или запросили через AJAX? При запросе с помощью технологии AJAX устанавливается HTTP-заголовок HTTP_X_REQUESTED_WITH со значением “XmlHTTPRequest”. Таким образом, в РНР, например, можно узнать, вызвана ли страница с помощью AJAX так:

if($_SERVER['HTTP_X_REQUESTED_WITH'] == ‘XMLHttpRequest’)
{
// выполняем соответствующий код
}

Теперь рассмотрим, как работать с четырьмя подвидами AJAX.
AJAX

Если сервер на запрос возвращает заголовок Content-Type: text/xml и правильно сформированный XML-документ, то в функцию onAjaxSuccess будет передан уже готовый к употреблению DOM этого документа, с которым можно будет работать, используя методы jQuery. Пример:
ajaxtest2.php:

<?php
header("Content-Type: text/xml; charset=utf-8″);
?>
<list>
<item id="1″>
Item 1
</item>
<item id="2″>
Item 2
</item>
</list>

Наш JavaScript:

// Функцию post опускаем, написать ее не составляет труда
function onAjaxSuccess(xml)
{
// Получаем коллекцию всех элементов item из пришедшего xml
items = $("item", xml);

// Извлекаем текст из элемента
alert(item2.html());
}

Как видите, работа с полученным с сервера ответов в виде XML ничем не отличается от работы с уже загруженным в браузер документом.
AHAH

Как уже было видно в первом примере с методом post(), если значение заголовка Content-Type – не «text/xml», ответ с сервера передается как есть, в текстовом виде. Поскольку обычно такой ответ сразу показывается на странице без дополнительной обработки, то нет смысла заводить отдельные функции вроде onAjaxSuccess. Для получения и отображения полученного с сервера HTML jQuery предоставляет метод load:

load(url[, params[, callback]]);

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

$("#mydiv").load("/ajaxtest.php");

Мы выполняем запрос к файлу из первого примера про AJAX. После выполнения запроса в элемент с id="mydiv" будет записано слово «text».
AJAJ

Многие разработчики, столкнувшиеся с технологией AJAX, не любят передавать на клиент XML. Объясняется это тем, что XML может быть довольно большим по размеру, и существуют дополнительные трудности при разборе его структуры на клиенте. Благодаря jQuery, разбор XML на клиенте не представляет никакой сложности. А если разработчики активно используют AHAH, то и размеры передаваемого документа перестают быть решающим аргументом.

И все же многие предпочтут использовать JSON. JSON – это способ записи данных, который позволяет прогнать эту запись через функцию eval() и получить полноценный Javascript-объект. Для работы с данными в таком формате jQuery предлагает метод $.getJSON:

getJSON(url, params, callback)

После выполнения запроса ответ с сервера прогоняется через функцию eval(), а полученный объект передается в функцию callback:
ajaxtest3.php

<?php
header(‘Content-Type: text/javascript; charset=utf-8′);
?>
{
params: <?php echo $_REQUEST['params']; ?>,
response: ‘Наш ответ Чемберлену’
}

$.getJSON(
‘/ajaxtest3.php’,
{params: "text"},
onAjaxSuccess
);
function onAjaxSuccess(obj)
{
alert(obj.params);
alert(obj.response);
}

AJAJs

Помимо трех вышеперечисленных способов получения данных с сервера jQuery предлагает еще один. С его помощью можно загрузить и выполнить любой сценарий Javascript с сервера. Для этого используется метод getScript:

getScript(url[, callback])

Пример:
script.js

$("a").css("color", "#0F0″);

Наш Javascript:

$.getScript(‘/script.js’);

После выполнения этого метода будет загружен и выполнен сценарий script.js, который окрасит все ссылки на странице в зеленый цвет.

* show([speed[, callback]]) – показать элемент;
* hide([speed[, callback]]) – скрыть элемент;
* fadeIn(speed[, callback]) – показать элемент путем изменения его прозрачности;
* fadeOut(speed[, callback]) – скрыть элемент путем изменения его прозрачности;
* slideDown(speed, callback) – показать элемент, спустив его сверху;
* slideUp(speed, callback) – показать элемент, подняв его снизу;

где

speed – скорость в миллисекундах или одно из "slow" (600 миллисекунд) или "fast" (200 миллисекунд);

callback – функция, которая будет вызвана после выполнения анимации.

Рассмотрим, например, реализацию функции show:

show: function(speed,callback){
// находим в переданной нам коллекции скрытые элементы (см. врезку)
var hidden = this.filter(":hidden");
// если нам передана скорость, то вызываем метод animate
if(speed)
{
hidden.animate(
{
height: "show",
width: "show",
opacity: "show"
},
speed,
callback
)
}
else
{
// иначе просто проходим по коллекции элементов и показываем их,
// меняя стиль display с none на block
hidden.each(
function()
{
this.style.display = this.oldblock ? this.oldblock : "";
if ( jQuery.css(this,"display") == "none" )
this.style.display = "block";
}
);
}
return this;
}

Скрытая мощь функции animate позволяет создавать поистине удивительные эффекты.

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

for(i = 0; i < 10; i++)
{
$("#my-div").animate({height: "show"}, 300);
$("#my-div").animate({height: "hide"}, 300);
}

В результате мы получим не беспорядочное моргание, пока двадцать эффектов борются за право показать/скрыть элемент «my-div», а плавный показ, потом сокрытие, потом снова показ – и так 20 раз. Обратите внимание, что очередь эффектов составляется поэлементно. То есть эффекты, примененные к разным элементам одновременно, будут выполняться одновременно.

* params – свойства, которые участвуют в анимации в виде пар {ключ: значение}. Например: {height: "show"} или {opacity: 50, width: 100, height: 200}.
* speed – скорость в миллисекундах.
* easing – замедлениие анимации (замедляется ли к концу, "easein", или, наоборот, ускоряется, "easeout". Дополнительные типы доступны в модулях расширения).
* callback – функция, которая будет вызвана после завершения анимации.

Пример.

Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим скрыть этот текст, заменить новым, и показать обновленный текст.

$("#mydiv")
.animate({height: "hide"}, 300)
.text("Новый текст")
.animate({height: "show"}, 300);

Сначала потребуется только подключить библиотеку jQuery и файл query.autocomplete.js в разделе HEAD нужной страницы.
<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>

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

Что касается HTML-кода, то естественно нужно описать поле для ввода текста:
<input id="example" type="text" />

А вот использовать jquery.autocomplete.js можно двумя разными способами.

Способ первый:
Если объем данных не очень большой, и данные не будут изменяться, то их можно поместить непосредственно на странице, как и сделано в примере в текстовом поле слева.
<script type="text/javascript">
$(document).ready(function(){
$("#example").autocompleteArray([
"Магадан",
"Магас",
"Магнитогорск",
"Майкоп",
........
"Муром",
"Мценск",
"Мыски",
"Мытищи",
"Мышкин"
],
{
delay:10,
minChars:1,
matchSubset:1,
autoFill:true,
maxItemsToShow:10
}
);
});
</script>

Способ второй:
Если данные большого объема, и/или часто изменяются, то необходимо предусмотреть обработку этих данных на сервере (для примера выбран PHP). jquery.autocomplete.js предусматривает отправку GET-запроса с параметром q, значением которого являются введенные символы. Именно так в примере работает текстовое поле справа.
<script type="text/javascript">
$(document).ready(function(){
$("#example2″).autocomplete("autocomplete.php", {
delay:10,
minChars:2,
matchSubset:1,
autoFill:true,
matchContains:1,
cacheLength:10,
selectFirst:true,
formatItem:liFormat,
maxItemsToShow:10,
onItemSelect:selectItem
});
});
</script>

В этих примерах, помимо данных (в первом случае) и URL обработчика (во втором случае) мы передаем некоторые опции. Список опций приведен ниже:

autoFill – когда Вы начинаете вводить текст, в поле ввода будет подставлено (и выделено) первое подходящее значение из списка. Если Вы продолжаете вводить текст, в поле ввода и далее будет подставляться подходящее значение, но уже с учетом введенного Вами текста. (По умолчанию: false).

inputClass – этот класс будет добавлен к элементу ввода. (По умолчанию: «ac_input»).

resultsClass – класс для UL, который будет содержать элементы результата (элементы LI). (По умолчанию: «ac_results»).

loadingClass – класс для элемента ввода, в то время, когда происходит обработка данных на сервере. (По умолчанию: «ac_loading»).

lineSeparator – символ, который разделяет строки в данных, возвращаемых сервером. (По умолчанию: «\n»).

cellSeparator – символ, который разделяет «ячейки» в строках данных, возвращаемых сервером. (По умолчанию: «|»).

minChars – минимальное число символов, которое пользователь должен напечатать перед тем, как будет активизирван запрос. (По умолчанию: 1).

delay – задержка в миллисекундах. Если в течение этого времени пользователь не нажимал клавиши, активизируется запрос. Если используется локальный запрос (к данным, находящимся непосредственно в файле), задержку можно сильно уменьшить. Например до 40ms. (По умолчанию: 400).

cacheLength – число ответов от сервера, сохраняемых в кэше. Если установлено в 1 – кэширование данных отключено. Никогда не устанавливайте меньше единицы. (По умолчанию: 1).

matchSubset – использовать ли кэш для уточнения запросов. Использование этой опции может сильно снизить нагрузку на сервер и увеличить производительность. Не забудьте при этом еще и установить для cacheLength значение побольше. Например 10. (По умолчанию: 1).

matchCase – использовать ли сравнение чувствительное к регистру символов (только если Вы используете кэширование). (По умолчанию: 0).

maxItemsToShow – ограничивает число результатов, которые будут показаны в выпадающем списке. Если набор данных содержит сотни элементов, может быть неудобно показывать весь список пользователю. Рекомендованное значение 10. (По умолчанию: -1).

extraParams – дополнительные параметры, которые могут быть переданы на сервер. Если Вы напишете {page:4}, то строка запроса к обработчику на сервере будет сформирована следующим образом: my_handler.php?q=foo&page=4 (По умолчанию: {}).

width – устанавливает ширину выпадающего списка. По умолчанию ширина выпадающего списка определена шириной элемента ввода. Однако, если ширина элемента ввода небольшая, а строки выпадающего списка содержат большое количество символов – эта опция вполне может пригодиться. (По умолчанию: 0).

selectFirst – если установить в true, то по нажатию клавиши Tab или Enter будет выбрано то значение, которое в данный момент установлено в элементе ввода. Если же имеется выбранный вручную («подсвеченный») результат из выпадающего списка, то будет выбран именно он. (По умолчанию: false).

selectOnly – если установить в true и в выпадающем списке только одно значение, оно будет выбрано по нажатию клавиши Tab или Enter, даже если этот пункт не был выбран пользователем с помощью клавиатуры или указателя мыши. Заметьте, что эта опция отменяет действие опции selectFirst. (По умолчанию: false).

formatItem – JavaScript функция, которая поможет обеспечить дополнительную разметку элементов выпадающего списка. Функция будет вызываться для каждого элемента LI. Возвращаемые от сервера данные могут быть отображены в элементах LI выпадающего списка (см. второй пример). Принимает три параметра: строка результата, позиция строки в списке результатов, общее число элементов в списке результатов. (По умолчанию: none).

onItemSelect – JavaScript функция, которая будет вызвана, когда элемент списка выбран. Принимает единственный параметр – выбранный элемент LI. Выбранный элемент будет иметь дополнительный атрибут «extra», значением которого будет являться массив всех ячеек строки, которая была получена в качестве ответа от сервера. (По умолчанию: none).

Последние две опции весьма важны, если Вы хотите сделать действительно удобный и полезный элемент интерфейса, поэтому приведу примеры.
function liFormat (row, i, num) {
var result = row[0] + "<em>" +
row[1] + " тыс.чел.</em>";
return result;
}

В опции formatItem мы определили имя вызываемой функции – liFormat, а сама функция просто формирует строку, которая будет вставлена в соответствующий элемент LI. Строка содержит название поселка и элемент em, в который выводится количество проживающих там, в тысячах человек. Элемент em имеет класс qnt, с помощью которого, используя CSS, мы сдвигаем этот элемент вправо, немного уменьшаем размер шрифта и делаем сам шрифт зеленого цвета.

Следующий пример для опции onItemSelect:
function selectItem(li) {
if( li == null ) var sValue = "Ничего не выбрано!";
if( !!li.extra ) var sValue = li.extra[2];
else var sValue = li.selectValue;
alert("Выбрана запись с ID: " + sValue);
}

Здесь видно как можно работать со значениями атрибута «extra» выбранного элемента LI. В примере мы выводим в alert значение идентификатора для записи из нашей тестовой базы.

Нам осталось только разобрать те действия, которые будут выполняться на стороне сервера. Как Вы наверное помните, мы выбрали для этого PHP. Вспомним также, что на сервер передается GET-запрос с параметром q, содержащим уже введенные пользователем символы. Сам код Вы сможете посмотреть, скачав файл примера.

Весь код мы будем выполнять только в случае существования XMLHttpRequest, только если передан GET-запрос с параметром q. Для примера используется текстовый файл, в котором содержится база данных. Вот фрагмент этого файла:
1:Пашковский:Краснодарский край:43,0
2:Горячеводский:Ставропольский край:34,4
3:Калинино:Краснодарский край:34,1
4:Приволжский:Саратовская область:32,0
. . . . . . . . . . . . . . . . . . .
268:Залари:Иркутская область:10,0
269:Октябрьский:Пермский край:10,0
270:Ишеевка:Ульяновская область:10,0
271:Жешарт:Республика Коми:10,0
272:Прохоровка:Белгородская область:10,0

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

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

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

Код пузыря и объекта, при наведении курсора на который будет появляться подсказка.

<div>
<div id="download">Наведи на меня курсор</div>
<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop">
<tbody><tr>
<td id="topleft"></td>
<td></td>
<td id="topright"></td>
</tr>

<tr>
<td id="bottomleft"></td>
<td><img alt="popup tail" src="files/bubble-tail2.png" height="29″ width="30″ /></td>
<td id="bottomright"></td>
</tr>
</tbody></table>
</div>

CSS

Теперь прописываем стили всем элементам, при этом делаем так, чтобы при отключенных скриптах ничего не плыло:

.bubbleInfo {
position: relative;
top: 150px;
left: 100px;
width: 500px;
}
.trigger {
position: absolute;
}

jQuery

Теперь сам код, который реализовывает эту прикольную анимацию.

return false;
});
});
});

Fancy Box

Скрипт представляет собой плагин к jQuery.
Возможности:

* Подгоняет размеры изображений под разрешение монитора;
* Пририсовывает тень к всплывающему окошку;
* Поддерживает возможность группирования объектов и их просмотр в виде галереи в одном окне;
* Выведет для вас не только изображения, но и inline-элементы, а также HTML-контен в iframe;
* Конечно же, все это благолепие можно конфигурировать, а также экспериментировать с CSS.

Теперь о размерах, а точнее, весе скрипта (вопрос немаловажный):

* непосредственно jquery.fancybox-1.0.0.js – 12 Кб
* сам jQery (jquery-1.2.3.pack.js) – 29,1 Кб
* дополнительный скриптик jquery.pngFix.pack.js – 2,52 Кб
* CSS – около 4 Кб
* изображения – 17 Кб

Подключение и использование скрипта не представляет никакой сложности:
1. Сначала подключаем скрипты и CSS:

/* обязательно */
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>

/* цепляем CSS */
<link rel="stylesheet" href="css/fancybox.css" type="text/css" media="screen">

2. Берем подопытную картинку:

<a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

примечание: можете использовать атрибут title для отображения подписи к изображению, а также rel – для группировки обектов.
Заключаем картинку в какое-нибудь оформление (p, div, span – без разницы) с определенным ID. Например, так:

<p id="”test1”"><a href="image_big.jpg"><img src="image_small.jpg" alt="" /></a></p>

3. Инициализируем плагин:

$(document).ready(function() {
$("p#test1 a").fancybox();
});

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

$(document).ready(function() {
$("p#test2 a").fancybox({
‘hideOnContentClick’: true
});
});

Параметр ‘hideOnContentClick’: true  — делает возможным закрытие всплывающего окна не только по нажатию на специальную кнопку, но и по щелчку на свободной области.
Со всеми возможными настройками можете ознакомиться на официальном сайте плагина, где также можно скачать архив и полюбоваться на примеры работы скрипта .

1. Простой редирект (в файле .htaccess или httpd.conf для Apache):
Redirect 301 / http://www.you.com/new.htm
где:
Redirect 301 – это инструкция, говорящая что страница перемещена
/ – означает, что все с верхнего уровня сайта, включая все подкаталоги, будет переадресовано
http://www.you.com/new.htm – новая страница или сайт (не забывайте поставить последний "/", если переадресация идет на сайт).

Чтобы переадресовать только страницу, сохранив PR старой страницы:
Redirect 301 /old/old.htm http://www.you.com/new.htm
где:
/old/old.htm – путь и имя старой страницы

Аналогичный синтаксис для переадресации сайта:
RedirectPermanent / http://www.you.com/
Пример переадресации каталога:
RedirectPermanent /old-directory http://www.domain.com/new-directory/

Например, зашедших в test переадресуем на www.test.com, остальных на enter.test.com (порядок следования записей важен):

Redirect permanent /test    http://www.test.com/
Redirect permanent /        http://enter.test.com/

Примечание: для моих целей (изменение домена) хватило первого варианта простого 301 редиректа.
2.Использование mod_rewrite (прописывается в файле .htaccess):

Ставшая классической задача слияния имена сайта с www и без него, решается так:

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^yoursite\.com
RewriteRule ^(.*)$ http://www.yoursite.com/$1 [R=permanent,L] .

или альтернативный синтаксис:

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]

Обозначение [R=301,L] означает: перенаправить клиента и отправить ему код статуса 301 (R=301) и сделать это правило последним (L).

Редирект старого домена на новый:

Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://www.newdomain.com/$1 [R=301,L]

Например, если необходимо чтобы вместо rewrite.htm загружался файл rewrite.html, добавьте в .htaccess:

RewriteEngine   on
RewriteBase     /
RewriteRule     ^rewrite\.htm$  rewrite.html [R=permanent]

Для замены всех .htm файлов .html файлами:

RewriteEngine  on
RewriteBase     /
RewriteRule     ^(.*)\.htm$  $1.html [R=permanent]

ErrorDocument 404 /errors/404.html

EditArea
Подсвечивает PHP, CSS, Javascript, Python, HTML, XML, VB, C, C++, Pascal, Basic, Brainf*ck, имеет локализацию для 9 языков. Работает в IE 6 и 7, Firefox 1.5 и 2, Opera 9 и Safari (WinXP). Кроме того, имеет более «богатый» интерфейс.

CodeMirror
Подсвечивает, к сожалению, только HTML, JavaScript и XML. Работает в Firefox 1.5+, IE6+, Safari 3+, Opera 9.5+.

Helene
Распознает только PHP. Работает в Firefox 1.5 и 2, Opera 9 и Safari (WinXP).

Ну, эта программа, по моему мнению, занимает почётный пьедестал первенства на рынке подобных продуктов, так как обладает наиболее функциональным интерфейсом, "портативностью", ассоциативностью, и при всё при этом – относительной скоростью. Но сказать это, означает не сказать ровным счётом ничего, так как этими поверхностными похвалами нельзя раскрыть все её достоинства, среди которых: наиболее проработанный среди всех вышеперечисленных систем API-интерфейс, простота и понятность, дововольно быстрое время обработки (учитывая уровень и качество производимых системой действий), ну а так же качество обработки внешних данных. К примеру, вы можете просто скопировать текст из документа Word, и при правильной настройке, система транслирует его в очень и очень похожем формате, при относительной чистоте кода, который соответствует стандартам, что выдвигает главный законодатель мод в WWW – W3C. Но, безусловно, не бывает мёду без дёгтя, и в этом случае есть свои минусы. Среди них неработоспособность на браузерах Opera заканчивая 8.4, на которых система вообще не будет работать. Ну и, конечно, учитывая все её возможности и мультиброузерность, на выходе мы получаем довольно объёмный исходный код, а именно 1,9 МБайт, но я считаю, что размер окупает себя сполна.

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

Чтобы загрузить себе версию системы, вам необходимо зайти на сайт http://tinymce.org и скачать себя последнюю версию, после чего читать дальше моё повествование.

Итак, допустим, у вас есть некоторый документ form.html, в котором содержится некоторая форма, с полем TextArea. Но как его сделать WYSIWYG-типа?

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

Давайте рассмотрим простейший случай применения программы, на примере документа с формой и элементом TextArea:

Листинг 1.1

<html>
<head>
<title>Первый пример</title>
<meta http-equiv=’Content-Type’
Content=’text/html;charset=utf-8′/>
<script type=’text/javascript’
src=’tinymce/jscripts/tiny_mce/tiny_mce.js’></script>
<script type=’text/javascript’>
<!–
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
–>
</script>
</head>
<body>
<h3>Некоторый элемент TextArea</h3>
<textarea id=’ds1′ cols=’65′ rows=’13′></textarea>
</body>
</html>

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

Но давайте поговорим сначала о параметрах, которые мы в данном случае передаём в метод инициализации класса – init().

Мы передаём в качестве параметра некоторый хеш, в котором значение элемента mode соответствует ‘textareas’, а элемента theme – ’simple’. Элемент `mode` означает метод "замены" стандартных текстовых полей (textarea), на WYSIWYG. Он может принимать значения ‘textareas’ , ‘exact’ и ’specify_textareas’.

В случае ‘textareas’ мы даём команду редактору преобразовать все элементы TextArea в редактируемые элементы. В остальных случаях мы манипулируем определенным полями для редактирования, идентификаторы которых необходимо перечислить в качестве значения элемента elems, через запятую.

В свою очередь элемент ‘theme’ означает ничто иное, как текущий тип оформления редактора и может принимать значения: ’simple’ и ‘advanced’.

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

Теперь давайте рассмотрим работу с редактором во время включённого режима темы ‘advanced’.

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

Что ж, допустим, вы начали проект некоторого электронного журнала или Интернет-издания, в котором принципиальной является возможность создание статей со стороны администрации. При этом следует учитывать, что интерфейс программы должен быть как можно более схожим с привычным для нас интерфейсом наиболее используемого Word’а, а так же иметь достаточное количество функций для воплощения всех идей редактора относительно форматирования текста статьи, и никогда не должно возникать таких вопросов как: "А куда нужно нажать?", "А почему оно не показывает:.", "А куда делся весь текст":

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

1. Автоматическое форматирование вставляемого текста
2. Добавим функции форматирования
3. Изменим расположение панелей управления
4. Зададим язык редактора
5. Добавим проверку орфографии

Что ж, давайте обсудим точнее, что мы хотим увидеть в редакторе:

1. Панель форматирования находится сверху
2. Панель состояния отсутствует
3. Язык редактора – русский
4. Функции форматирования: полужирный, курсив, подчёркивание, шрифт, размер, стиль текста, цвет, заливка.
5. Функции структурного форматирования: таблица, выравнивание, табуляция, список
6. Дополнительные функции: вставка изображения, вставка, предпросмотр, вставка гиперссылки, функции "отката" и "возврата", ну и, наверное, введём печать.

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

Для воплощения функции авторформата вставляемого извне текста необходимо указать параметр хеш-списка – ‘paste_auto_cleanup_on_paste’, который принимает в качестве значения булев (true || false), и в зависимости от этого форматирует или нет внешний текст, переданный из буфера обмена.

При использовании данного параметра следует так же использовать и следующие параметры:

paste_convert_headers_to_strong : (true | false),
paste_strip_class_attributes : "all",
paste_remove_spans : (true | false),
paste_remove_styles : (true | false)

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

Существует два вида панелей, а именно: панель инструментов (toolbar) и панель состояния (statusbar).

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

Каждая из этих панелей может иметь своё положение (снизу или сверху), то есть у нас есть возможность довольно гибко менять их положения в редакторе. Для этого можно воспользоваться параметрами:

theme_advanced_toolbar_location : (top | bottom | none),
theme_advanced_statusbar_location : top | bottom | none)

При этом в зависимости от значения параметра и будет установлено конечное положение панели, или если параметр стоит в значении ‘none’, то панель вообще не будет отображена.

И ещё, панель инструментов имеет такой параметр как выравнивание, в соответствии значения которого, и будет центрированы элементы панели. За центрирование элементов отвечает параметр theme_advanced_toolbar_location, и может принимать стандартные значения: center, left, right (по-умолчанию установлен параметр center).

Итак, с панелями разобрались, но ведь на них следует добавить что-то?

Ведь по-умолчанию он будут просто пустовать, с минимальным набором значений, на ведь не нужен такой редактор?

Для размещения, элементы, или же другими словами – кнопки, должны разбиваться на несколько категорий, в каждой из которых могут находиться элементы (не)разделённые знаком разделителя. Для абстракции групп в программе используется понятие кнопок, и для задания группы в качестве значения параметра theme_advanced_button(n+1), где n-текущий номер группы, задается набор элементов, которые к ней должны относится.

Хотя про набор вы можете, особо не беспокоится, так как по-умолчанию в панели инструментов вы и так сможете найти стандартный набор необходимых функций выравнивания, форматирования и прочего, но это доступно лишь в режиме темы ‘advanced’.

Для задания языка редактора нужно всего лишь добавить параметр ‘language’ со значением ‘ru’.

Что ж, давайте посмотрим, что вышло у меня:

Листинг 1.2.

<html>
<head>
<title>TNT43 Visual Editor</title>
<script type=’text/javascript’ src=’tinymce/jscripts/tiny_mce/tiny_mce.js’></script>
<script type=’text/javascript’>
tinyMCE.init({
mode : "textareas",
theme : "advanced",
language: "ru",
plugins : "table,save,advhr,advimage,advlink,insertdatetime,
preview,zoom, searchreplace,print,contextmenu,paste,directionality ",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,
forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator",
theme_advanced_buttons3_add : "advhr,separator,print,separator,ltr,rtl,separator ",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
plugi2n_insertdate_dateFormat : "%Y-%m-%d",
plugi2n_insertdate_timeFormat : "%H:%M:%S",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
paste_auto_cleanup_on_paste : true,
paste_convert_headers_to_strong : false,
paste_strip_class_attributes : "all",
paste_remove_spans : false,
paste_remove_styles : false
});
</script>
</head>
<body>
<textarea id=’data’ rows=’15′ cols=’60′></textarea>
</body>
</html>

Вот – это и весь код. Он выглядит довольно громоздко, но в целом довольно прост для понимания.

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

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

Так же в рамках примера в листинге 1.2, мы использовали плагин inserdate, для котрого позже задали параметр dateFormat и timeFormat, которые вводят формат используемого времени и даты, соответственно. Они задаются в соответствии со спецификацией функции временных меток.

Так же стоит упомянуть другие интересные функции, использованные в примере:

* paste_remove – при режиме true, редактор фильтрует все поступившие из буфера обмела данные, и удаляет контеинеры spaи.
* paste_convert_headers_to_strong – при режиме true, редактор изменяет все заголовки (h1,h2,h3,h4,h5,h6) в буффере обмена на элементы <strong>
* paste_auto_cleanup_on_paste – фильтр для данных из буфера обмена (применимо к данным из MS Word)

Вот, по-моему, для общего обзора системы хватит. Однако мы ещё не рассмотрели довольно большое количество методов API-интерфейса, без которых часто очень сложно представить себе работу с редактором. Но обещаю, что мы рассмотрим их в следующих выпусках МК.