Теперь о том, как подключить и использовать скрипт.

Во-первых нужно скачать и подключить необходимые скрипты:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="source/Lighter.js"></script>
<script type="text/javascript" src="source/Flame.js"></script>
<script type="text/javascript" src="source/Flame.git.js"></script>
<script type="text/javascript" src="source/Fuel.js"></script>
<script type="text/javascript" src="source/Fuel.js.js"></script>
<script type="text/javascript" src="source/Fuel.ruby.js"></script>

Сначала подключается файл библиотеки Mootools, затем исходники Lighter.js. Заметьте, что файлы с префиксом Flame, содержат темы для подсветки синтаксиса. То есть, если вы хотите иметь подсветку в стиле github.com, то подключите файл Flame.git.js. Файлы с префиксом Fuel распознают исходный код языков. Это значит, что если вам нужно подсвечивать исходники на языках Ruby и JavaScript, то нужно подключить файлы Fuel.ruby.js и Fuel.js.js.

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

<pre class="ruby:git">
// далее подсвечиваемый код
</pre>

Помимо этого, есть и другой способ указать скрипту тему и язык программирования – это указать в опциях вызова скрипта параметры Flame и Fuel.

Заключительный шаг – вызов функции light, в которую можно передать различные параметры работы скрипта:

$$('pre').light({
    altLines: 'hover',
    mode: 'ol'
});

Здесь, в качестве параметров я передаю значение hover для парметра altLines для подсветки строк при наведении на них указателя мышки, ol для параметра mode для того, чтобы показывать номера строк. Все остальные опции можно узнать здесь.

Смотреть демо

В YUI сделать такие окна максимально просто, только потому, что там используются стандартный диалог этой библиотеки – SimpleDialog. С jQuery дело обстоит несколько сложнее, потому что в стандартной поставке таких диалогов нет. В данном плагине такое окно создается самостоятельно, плюс для нормального отображения требуется подключить CSS:

<!-- файлы библиотеки jQuery -->
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
<!-- файлы плагина -->
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Файл jquery.ui.draggable.js подключать не обязательно. Он нужен для того, чтобы окошки можно было перетаскивать, хотя я честно говоря не понимаю, кому может понадобиться перетаскивать модальные окна

После подключения плагина нам будут доступны три функции jAlert, jConfirm и jPrompt:

jAlert(message, [title, callback]);
jConfirm(message, [title, callback]);
jPrompt(message, [value, title, callback]);

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

<a href="/some/link/here/" onclick="return confirm('текст')"></a>

Здесь, в случае если confirm вернет значение false, то будет отменено действие ссылки по умолчанию, т.е. броузер не перейдет по ссылке. Если же использовать наши окна, то все будет несколько сложнее:

$(function(){
	$('a').click(function(e){
		e.preventDefault();
		var href = $(this).attr('href');
		jConfirm(
				'Подтвердите',
				'Заголовок',
				function(b){
					if (b){
						window.location = href;
					}
				}
			);
	});
});

Дело в том, что jConfirm(), также, как и другие функции плагина передает результат выполнения в callback, который нужно указать третьим параметром. Поэтому в примере я использовал preventDefault(), чтобы отменить значение по умолчанию, а потом в callback-е указываю, что нужно сделать, если пользователь ответил утвердительно.

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

Рассмотрим следующий пример:

var num1 = new Request({ url: '/wiki/simple.php', data: {num: 1, sleep: 1}, method: 'get',
    onComplete: function(response){ console.log(response) } });
var num2 = new Request({ url: '/wiki/simple.php', data: {num: 2, sleep: 1}, method: 'get',
    onComplete: function(response){ console.log(response) } });
var num3 = new Request({ url: '/wiki/simple.php', data: {num: 3, sleep: 1}, method: 'get',
    onComplete: function(response){ console.log(response) } });
var myQueue = new Request.Queue();
// можно добавлять запросы по одному
myQueue.addRequest('num1', num1);
// ... или сразу несколько
myQueue.addRequests({ num2: num2, num3: num3 });
num1.send();
num2.send();
num3.send();

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

Стоит отметить, что Request.Queue может отправлять не только по одному запросу за раз, а и по нескольку, если указать для него опцию concurrent (по умолчанию равняется 1). Кроме этой опции, есть также stopOnFailure и autoAdvance (обе по умолчанию равны true). Первая приостанавливает отправку запросов при возникновении ошибки, при этом возобновить отправку запросов можно при помощи функции resume(). Если установить эту опцию в false, то запросы будут отправляться даже если один из них завершился с ошибкой. Вторая опция – autoAdvance автоматически отправляет следующий запрос. Если установить опцию в false, то отправить следующий запрос в очереди можно будет используя функцию runNext().

Как вы уже видели из предыдущего примера, запросы можно добавлять при помощи функций addRequest() и addRequests(). Удалять запросы из очереди можно при помощи функции removeRequest():

var foo = new Request();
myRequestQueue.addRequest('fooRequest', foo);
myRequestQueue.removeRequest(foo);
// или
myRequestQueue.removeRequest('fooRequest');

Если вам нужно полностью очистить очередь запросов, то это можно сделать одной функцией – clear():

myRequestQueue.clear();

Также, объектам Request.Queue можно назначать следующие события:

• onRequestStart
• onRequestEnd
• onRequestSuccess
• onRequestComplete
• onRequestCancel
• onRequestException
• onRequestFailure

Узнать подробнее о всех функциях и событиях можно в документации. Скачать скрипт можно здесь – просто отметьте в списке доступных для скачивания плагинов Request.Queue и жмите Download.

Теперь о том, как его установить и настроить.

1) Сначала скачайте ibrowser и распакуйте дистрибутив в папку tiny_mce/plugins/ibrowser.

2) Затем, в файле конфигурации ibrowser/config.inc.php нужно указать на те директории, в которых будут храниться загружаемые файлы изображений:

$cfg['ilibs'] = array (
	array (
		'value' => 'images/',
		'text' => 'Общие',
	),
	array (
		'value' => 'gallery/',
		'text' => 'Галерея',
	),
);

Для этих папок, а также для директорий ibrowser/scripts/phpThumb/cache и ibrowser/temp нужно установить права доступа 777, чтобы скрипт имел возможность записывать туда свои данные.

3) Далее нужно добавить скрипт tinyMCE и скрипт инициализации в веб страницу:

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tiny_mce_init.js"></script>

В файле tiny_mce_init.js я расположил код, который инициализирует редактор. Выглядит он следующим образом:

tinyMCE.init({
	mode : "exact",
	elements : "elm1,elm2,elm3,elm4,elm5",
	theme : "advanced",
	skin : "o2k7",
	language : "en",
	plugins : "safari,pagebreak,style,table,advimage,advlink,emotions,iespell,media,searchreplace,print,contextmenu,paste,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,inlinepopups,ibrowser",

	theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor|,charmap,emotions,iespell,media,|,sub,sup",
	theme_advanced_buttons2 : "styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons3 : "cut,copy,paste,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,code",
	theme_advanced_buttons4 : "tablecontrols,|,hr,removeformat,visualaid,|,fullscreen,image,ibrowser",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,
	height:340
});

Здесь указываются различные параметры настройки tinyMCE: внешний вид (скин), язык интерфейса, кнопки панели инструментов и прочее. В строке plugins перечислены плагины, которые необходимо использовать. Здесь я помимо прочих указал и ibrowser. Далее идет перечисление панелей инструментов и кнопок, которые будут там располагаться. Все это указывается в параметрах theme_advanced_buttons*, где цифра в конце указывает на номер ряда в панели инструментов. Кнопку, вызывающую диалоговое окно ibrowser я добавил в последний, четвертый ряд (theme_advanced_buttons4). В итоге, окно tinyMCE будет иметь следующий вид:

Если все выполнено правильно, то при нажатии на эту кнопку, откроется pop-up окно следующего содержания:

Поскольку мне нужна была русифицированная версия плагина, то пришлось самому заняться локализацией. Переведенный мной файл можно скачать здесь. Для русификации плагина, нужно скопировать файл локализации в папку /ibrowser/langs/, а затем в файле конфигурации config.inc.php установить переменную $cfg['lang'] в значение ru. Исключением является окно приветствия, которое появляется сразу при открытии окна. Текст этого окна набран в файле ibrowser.php, так что либо переведите его сами, либо просто удалите, как это сделал я .

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

Пример

Для создания поля, воспользуемся простой ссылкой, а прогресс отправки файла будем показывать в элементе span=progress:

<a id="upload1" style="background: green; font-size: 24px; color: white;" href="#">Выберите файл</a>
<span id="progress1"></span>

Далее инициализируем поле (определяем его по id):

$('#upload1').upload({
	name: 'file',
	method: 'post',
	enctype: 'multipart/form-data',
	action: 'upload.php',
	onSubmit: function() {
		$('#progress1').text('Отправка файла...');
	},
	onComplete: function(data) {
		$('#progress1').text('Файл успешно отправлен');
	}
});

Ну и сохраняем его на стороне сервера (пример для PHP):

<?php
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['file']['name']);

if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
    echo "File is valid, and was successfully uploaded.\n";
} else {
    echo "Possible file upload attack!\n";
}
?>

Более подробно о плагине можно узнать на странице проекта Google Code.