codeEvaluator – jQuery плагин для удобного выполнения примеров JavaScript/HTML кода
codeEvaluator – это плагин для JavaScript библиотеки jQuery, который позволяет показывать примеры JavaScript/HTML кода в удобном виде.
Удобный вид – это инновационный “браузер кода” под названием codeEvaluatorBrowser.
Также codeEvaluator позволяет выполнять примеры JavaScript кода в фоновом режиме.
Девиз codeEvaluator – Никаких оверлеев, стилей и перерывов на обед 
А это значит то, что вам нужно подключить всего лишь один файл codeEvaluator.js на страницу и наслаждаться новым функционалом! При этом совершенно не нужно подключать какие-то дополнительные CSS, JS, PHP файлы
И всё! При этом codeEvaluator сразу будет автоматически работать для JavaScript кода обвёрнутого в тег с классом ce-js или ce-js-bg(для фонового выполнения кода). Также codeEvaluator будет работать автоматически для HTML кода, обвёрнутого в тег с классом ce-html или ce-html-clear.
Сегодня я произвожу релиз плагина codeEvaluator!
Релизная версия плагина: 0.0.2
А теперь немного истории о создании codeEvaluator:
В прошлом времени при посещении сайта http://javascript.ru/ мне очень нравились предоставленные там примеры кода с возможностью их запуска. Также мне нравились iframe примеры html кода на сайте http://www.linkexchanger.su/. За что нравились? За динамичность! Не приходилось вообще куда то уходить со страницы для просмотра результата 
Вскоре на своём блоге я сделал подобное – прикрутил к листингам JS кода кнопку “Запустить!”. Стало очень удобно!
Но нехватало такого же варианта для HTML кода 
Это было первой предпосылкой. Вскоре в одном из комментариев один человек выразил свою радость по поводу кнопки “Запустить!” и что это очень удобно. И тут я посмотрел на реальную ситуацию на JS блогах. Обычные листинги JS кода не имеют ссылок на пример или простейшей кнопки “Запустить!” и тут если захотелось посмотреть результат кода, приходится извращаться с ним
Так захотелось найти лёгкое решение, которое добавляет функционал по выполнению примеров кода! И сегодня я начал этот функционал писать
Так родился плагин для библиотеки jQuery под названием codeEvaluator! Плагин добавляет к листингам JS/HTML кода функциональные кнопки, с которых можно управлять кодом листинга. На данный момент это кнопки “Запустить код!” и “codeEvaluator“.
Зачему нужна кнопка “codeEvaluator“? Эта кнопка нужна для лучшего распространения плагина по блогам и облегчения жизни блоггерам В версии 0.0.3 планируется сделать возможность выбора отображения этой кнопки.
Итак, как мы уже говорили, codeEvaluator работает сразу автоматически для тегов с любым из четырых классов ce-js, ce-js-bg, ce-html, ce-html-clear. Но изменить эти классы не составляет большого труда!
Настройки в codeEvaluator назначаются внутри того же script тега, через который вы подключили codeEvaluator, путём написания ассоциативного массива.
Непонятно? Вот пример:
({
createPlaces: false,
className: {
jsBg: 'my-js-code'
}
})
</script>
Этим примером мы убрали автоматическое обрамление HTML кода в шаблон HTML 4.01 документа и также назначили для фонового выполнения кода новый класс my-js-code. Теперь codeEvaluator вместо тегов с классом ce-js-bg будет искать теги с классом my-js-code. Очень просто, да? При этом мы соблюдаем основной девиз, не добавляя каких-то сторонних JS файлов для настроек
1. Первый самый простейший вариант – выполнение JS кода в фоновом режиме! Нам всего лишь надо обернуть блок с кодом тегом с классом ce-js-bg. Вот к примеру так:
<div class="code">
alert( 'Код исполняется в фоновом режиме!' );
</div>
</div>
И сразу же приведу рабочий пример этого кода ниже
Попробовали?)
Понравилось?)
codeEvaluator к нашему блоку добавил 2 функциональные кнопки. Нажав на кнопку “Запустить код!” вы реально запускаете JS код в фоновом режиме! Внутри кода ключевое слово this является ссылкой на window, как по правилам оно должно и быть!
2. Второй пример уже более интересный
Теперь для JS кода мы будем использовать наш “браузер кода”.
codeEvaluatorBrowser – это полная эмуляция документа посредством использования тега iframe. А это значит, что мы можем использовать любой код! Например тот же document.write, который при использовании варианта с фоновым режиме сотрёт документ.
Итак, давайте же укротим document.write с помощью codeEvaluatorBrowser!
<div class="code">
var agent = navigator.appName;
document.write( 'Ваш браузер:<b> ' + agent + '</b>' );
</div>
</div>
И далее самый интересный рабочий пример
Жмите кнопку “Запустить код!”
document.write( 'Ваш браузер:<b> ' + agent + '</b>' );
Как вам дизайн “браузера кода”? Как кнопки?
Стили “браузера кода” являются встроенными.
Они хранятся по адресу jQuery.codeEvaluatorBrowser.options.style
Интересно на них посмотреть?) Пожалуйста!
jQuery.codeEvaluatorBrowser.options.style
.replace( /<.*?>/g, '' )
.replace( /({|;(?!}))/g, "$1\n\t" )
.replace( /}/g, "\n}\n" )
);
Встроенные стили легко меняются, если есть необходимость.
Меняются они, как и все другие опции, при подключении codeEvaluator:
({
style: '#mystyle1{} #mystyle2{display:inline;}'
})
</script>
Либо если вы хотите подключить свой стилевой файл для “браузера кода”, вам нужно просто назначить стилям в опциях пустую строку:
<script type="text/javascript" src="codeEvaluator-0.0.2.js">
({
style: ''
})
</script>
Функциональные кнопки “браузера кода”:
- Назад. Закрывает “браузер кода” и возвращает обратно на страницу.
- Пример. Показывает результат выполнения кода в iframe
- Исходный код документа. Показывает исходный код iframe
- Исходный код примера. Показывает первоначальный код листинга
Кстати! Чтобы создавать свои собственные стили, вам нужно знать HTML модель “браузера кода”:
<div id="ce-br-style">/*Блок для стилей*/</div>
<div id="ce-br-top">
<ul id="ce-br-control">
<li id="ce-br-control-close">Назад</li>
<li id="ce-br-control-example" class="current">Пример</li>
<li id="ce-br-control-source-document">Исходный код документа</li>
<li id="ce-br-control-source-example">Исходный код примера</li>
</ul>
<a target="_blank" href="http://vl.vg/21.01.2010/code-evaluator/" id="ce-br-copyright">Powered by CodeEvaluator<br><span id="ce-br-copyright-version">0.0.2</span></a>
</div>
<div id="ce-br-tabs">
<div id="ce-br-tabs-iframe"><iframe></iframe></div>
<textarea class="ce-br-textarea" id="ce-br-tabs-source-document"></textarea>
<textarea class="ce-br-textarea" id="ce-br-tabs-source-example"></textarea>
</div>
</div>
3. Теперь приступим с эмулированию примеров HTML кода
Чтобы запустить наш небольшой кусочек HTML кода через “браузер кода”, нужно его заключить всего лишь в тег с классом ce-html. Вот рабочий пример:
<p style="color:red;">• Красный цвет не всегда красный</p>
Здесь наш маленький кусочек HTML кода заключается в валидный каркас HTML 4.01 документа, создавая валидный документ.
4. Но если вам это совсем не нужно и вы хотите видеть в iframe только свой код, то просто вместо класса ce-html назначьте класс ce-html-clear. Пример:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Пример XHTML документа</title>
</head>
<body>
Это пример XHTML документа <br /><b>;)</b>
</body>
</html>
Итак, вот мы и рассмотрели 4 простых примера использования codeEvaluator
Опции codeEvaluator:
| Название | Значение по умолчанию | Возможные значения | Описание |
| createPlaces | true | true || false | Обрамлять ли простой HTML код в шаблон документа |
| htmlDocument | "<!DOCTYPE ….><html>….</html>" | String | Шаблон документа |
| className | { js: ‘ce-js’, jsBg: ‘ce-js-bg’, html: ‘ce-html’, htmlClear: ‘ce-html-clear’ } |
Object | Объект имён классов для определения блоков кода |
| style | "<style…>…/*Selectors*/…</style>" | String | Строка стилей для “браузера кода” |
Немного об API
В codeEvaluator существует основная функция вызова “браузера кода”, которая распологается по адресу jQuery.codeEvaluatorBrowser:
Как видно из примера, обязательным параметром, передаваемым в функцию, является строка HTML кода. Также можно передать в функцию свои опции Object options(иначе используются опции по умолчанию).
Также в codeEvaluator создаёт два новых метода jQuery объектов:
- jQuery( selector ).JScodeEvaluator( [ Boolean bool ] ); – присоединяет к блоку JS кода функциональные кнопки. Если необязательный параметр bool равен true, то при клике на кнопку “Запустить код!” JS код будет выполняться в фоновом режиме. Иначе JS-код будет выполняться в “браузере кода”.
- jQuery( selector ).HTMLcodeEvaluator( [ Boolean bool ] ); – аналогично JScodeEvaluator, только вызывается для HTML кода. Если необязательный параметр bool равен true, то при клике на кнопку “Запустить код!” HTML код не будет обварачиваться в шаблон валидного документа.
А теперь немного основных особенностей codeEvaluator :
- Плагин работает под версией 1.4 библиотеки jQuery и использует новые методы index и detach. Использование detach позволяет намного ускорить работу и “браузер кода” создаётся один раз.
- Если на вашем экране нет “браузера кода”, это означает, что его нет на данный момент физически в документе(в DOM-дереве документа)
- Подключать нужно один js файл – никаких лишних файлов стилей, никаких лишних script`тов с настройками.
- Простое управление настройками.
- Удобная управляющая панель в codeEvaluatorBrowser.
- Встроенные стили для codeEvaluatorBrowser.
- Обычная версия весит 12.4 КБ, минимизированная – 6.87 КБ.
- И ещё много разных приятных мелочей
Что планируется ввести в codeEvaluator в последующих версиях:
- Возможность полного управления кнопками управляющей панели листинга кода.
- Встроенные стили для управляющей панели листинга кода.
- Возможность полного управления кнопками управляющей панели “браузера кода”.
- Несколько стилей для “браузера кода”.
- Новые функциональные кнопки для управляющей панели листинга кода и “браузера кода”, такие как “Выделить всё” и “Править”.
- Внутренняя оптимизация кода и конкатерации строк.
- Один единственный метод для jQuery объектов – codeEvaluator вместо двух существующих.
- Возвращение в исходную позицию окна после выхода из “браузера кода”.
- Возможность подключения основных JS библиотек с Google Code в iframe посредством написания их названия и версии в комментарии к листингу кода.
- Адаптирование под jQuery 1.3.2. Но под jQuery 1.4 плагин будет работать также быстро.
Open Source проект codeEvaluator распространяется по MIT и GPL лицензиями
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/copyleft/gpl.html
Скачать архив с примером
Страница проекта на Google Code
Страница проекта на jQuery.Plugins
Спасибо! С уважением, Regent!
Либо скачать новый нормальный браузер
Комментарии(2)
Вы писали в пример кому-нибудь когда нибудь HTML код? Ну а этот плагин позволяет запустить такой код прямо на сайте. По нажимайте на "Запустить код!" и всё поймёте.