Я писал про ScriptJava - библиотеку, аналогичную jQuery.

Собственно, комментарий к тому посту и заставил меня "снова взяться за перо". В частности, рассмотреть эту библиотеку более подробно. Рассматривать я решил с позиции практической применимости.

Итак, что у нас в основном делается на jQuery? Если "без особых наворотов", то простенькие визуальные эффекты - меню, слайдеры, ротаторы и т.д. Также на jQuery реализуются такие вещи, как Ajax. Оговорюсь - все то же самое можно сделать и на "чистом" JavaScript. Только дольше, потому что кода писать больше. Очевидно, что JS frameworks, типа jQuery и ScriptJava берут на себя часть работы, скрывая некоторые вещи JavaScript за определенным уровнем абстракции.

Сразу же оговорюсь: лично я не считаю размер фреймворка решающим фактором, при современных каналах и вычислительных мощностях что 20, что 200 Кб практически незаметны. Это я к тому, что размер ScriptJava по отношению к jQuery для меня не является преимуществом.

Итак, к делу.

Что умеет ScriptJava по сравнению с JQuery? Попробуем свести "типовые" задчи в таблицу и разобраться - работает или нет.

Какие выводы? При помощи задач №2,3 и №4 можно "слепить" простые (но работоспособные) менюшки; на сайте ScriptJava есть пример кода ротатора изображений. То есть "первые задачи" (те, что встречаются "в лоб" - сделать меню, сделать ротатор изображений, подгрузить Ajax'ом результат работы скрипта) ScriptJava решает.

Тогда вопрос - почему разработчики повально не используют ScriptJava? Как мне кажется, причин две. Первая - в том, что проект развивается достаточно медленно (я об этом уже писал; среднее время выхода новой версии - полгода), это же следствие того, что проект, судя по всему, поддерживается одним человеком (комьюнити вокруг него я не заметил). Вторая причина - в том, что ScriptJava "в лоб" не поддерживает плагины, то есть вокруг него нет пула решений, которые бы позволили "взять-и-работать". Например, на jQuery есть масса плагинов, которые могут, например, из списка сделать меню (причем - разные: от "аккордеона" до "классического"), могут реализовать ротатор (несколькими способами с эффектами на выбор), могут "закрепить" элемент при прокрутке и т.д.

Лично я, сознаюсь честно - особенно в силу первой причины (отсутствие поддержки сообщества) плотно "сижу" на jQuery. То есть, везде, где необходимо использую именно эту библиотеку. Но, тем не менее, искренне желаю автору ScriptJava "обрасти" сообществом и пройти "точку эффекта снежного кома", что позволит дать независимым разработчикам уверенность в том, что они, в случае чего, не останутся "один на один" с исходным кодом...

Не помню уже по какому поводу, натолкнулся в сети на интересный проект - ScriptJava. Его страничка: http://scriptjava.net/

Смысл в том, что разработчики предложили еще одну библиотеку для динамической манипуляции содержимым. В текущем релизе есть работа с куками, ajax, работа с атрибутами текста, работа с событиями, манипуляции элементами (удаление, создание), получение элемента и т.д.

Честно сказать - не совсем понимаю, чем руководствовался автор. В мире есть как минимум 2 известных мне (jQuery и extJS) и куча неизвестных мне библиотек, которые делают "Ровно то же самое". Но идея показалась мне интересной: попробовал - получилось. Работает:)

Кстати, заявлена поддержка всех известных браузеров (включая Safari и NN) - спорное, но преимущество. Спорное потому, что Safari худо бедно поддерживается jQuery - а NN по-моему, поддерживать бессмысленно.

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

PS Судя по частоте релизов, проект жив, но ооочень медленно жив:)

Давно уже использую при веб-разработке библиотеку WZ_Tooltip. Она не "простая, а очень простая". Делает одно-единственное: выводит разного рода кастомизированные всплывающие подсказки. Причем "кастомизированные" - это именно кастомизированные. Можно, например, вывести подсказку с заголовком. Или с тенью. И раскрасить их разными цветами... :-) может выводить html - или, если надо, вывести span с указанным id. (Как следствие - может нести в себе изображение). С помощью плагинов можно запросто организовать ballon-style подсказки (по умолчанию подсказки прямоугольные).

Что ценно - библиотека не зависит от JS фреймворков (но с ними уживается), ни от CMS, небольшая по размеру, шустрая, работает со всеми известными мне браузерами (тестировалось в IE 7+, firefix, opera, chrome, kmeleon).

В общем, вот: http://www.walterzorn.de/en/tooltip/tooltip_e.htm

(там же куча примеров использования, поэтому тут не привожу ни примеров, ни форматов вызова).

Случайно нашел фотогалерею на JavaScript. По возможностям напоминает Lightbox на jQuery, разве что настраивается более интересно. развивается независимо от фрейморков, есть готовые модули для множества систем типа wordpress, drupal и т.д.

Кстати, галере не GPL. Галерея свободна для некоммерческого частного применения, или за деньги - ($29 или $179) для коммерческих сайтов.

Ссылка: http://highslide.com/

Внимание! Данная информация частично устарела, часть ссылок возможно не рабочая.

Образовалась задачка. Построить с минимальными затратами CSS меню. Вот что нарыл...

1. Оказывается,в природе есть фреймворк для создания CSS меню. Живет по адресу http://www.lwis.net/free-css-drop-down-menu/, обладает хорошей настраивоемостью... базируется на jQuery. Подробный разбор, как "оно" работает и пример применения - тут (http://vremenno.net/html-css/css-drop-down-menu/).
2. Можно воспользоваться генератором CSS меню. Простой, бесплатный. Из минусов - имеет 8 тем, если хочется "чего-то еще", то нужно ручками перелопачивать код. Ссылка: http://purecssmenu.com/
3. Можно написать "с нуля" руками. Статья (на английском), описывающая процесс и рабочий пример тут: http://www.webdesign.org/html-and-css/tutorials/css-pop-up-menu-2-horizontal-menus.12089.html
4. Еще один генератор меню. Вот: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/generator.htm
5. Старенькая заметка об обходе проблемы :hover в IE (проблема в том, что IE не хочет видеть :hover ни для чего, кроме ссылки) - тут: http://www.umade.ru/log/2004/07/css-hover-any-element/
6. Короткий пример красивого меню на Jquery: http://www.master-web.info/dropdownmenu-css-gquery/
7. Статья, в которой описывается как сделать CSS меню на "голом CSS". Хороша для понимания принципов работы такого рода меню. http://cssor.ru/css/polezno-interesnoe/cssmenu
8. Еще один бесплатный генератор меню. http://www.izzymenu.com/
9. Хорошая (подробная) статья про то, как сделать CSS меню. http://beholder-eye.info/2006/03/30/dropdown-menu-css
10. Неплохая статья о создании css/php/js меню: http://www.roscripts.com/Building_a_dynamic_drop_down_menu-216.html
11. CSS Play - хороший сайт, где есть CSS шаблоны на все случаи жизни... Есть и пример меню: http://www.cssplay.co.uk/menus/dd_valid.html
12. По адресу http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started живет плагин для jQuery, с помощью которого (вроде) можно быстро сделать меню. ("Вроде" - потому что сам не пробовал).
13. Простецкое jQuery меню: http://css-tricks.com/simple-jquery-dropdowns/
14. Подробная статья о jQuery меню в wordpress: http://www.seoadsensethemes.com/wordpress-multi-level-drop-down-menu-using-jquery/

При разработке WEb приложений выбор "правильной" JS билиотеки - залог если не 100%, то, как минимум, 50% успеха. При этом понятие "правильности" включает в себя множество различных аспектов, таких, как:

• кроссбраузерность
• стабильность
• легкость встраивания
• легкость использования
• лицензия, которая не ограничивает применение библиотеки

Всем этим условиям удовлетворяет библиотека extJS (http://www.extjs.com/ - англоязычный официальный сайт, http://extjs.ru/ - блог о extJS по-русски). Библиотека легко встраивается, хорошо оптимизирована, и имеет некоторые возможности, которые я не встречал в аналогичных продуктах, в частности - ввозможность рисования таблиц (grid). Сознаюсь честно: на тестирование в "боевых условиях" времени не было, но пару тестовых (вполне работоспособных) примеров за полчаса я нвавял. Довольно достойно, по-моему.

Так что - рекомендуется к опробовангию и применению :)

PS. Книга "Learning ExtJS" (на английском языке) - просто и доходчиво про ExtJS. [загрузить (всего загрузок:)]

Внимание! Данная статья скорее всего устарела и описываемое ниже имеет больше академичсекий интерес.

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

В статье, кроме всего прочего, речь шла о возможности отказа от классов JavaScript (в частности xHTTPRequest) в пользу использования IFRAME для реализации динамической погрузки содержимого без перезагрузки страницы. Разумеется, не обошлось и без JavaScript:) Я немного «довел под себя» предлагаемое решение, оставив неизменной идею.

Но обо всем по-порядку.

Постановка задачи:

Необходимо сформировать на сервере при помощи php код html, который разместить в отдельном элементе (например, в <div>) страницы.

Решение (в несколько действий):

Действие 1:

В основной странице (т.е. там, где мы предполагаем делать динамические AJAX вставки) определяем элемент-контейнер. Для наглядности поместим в него кнопку, которая будет инициировать заполнение элемента:

<div id=’myelm’>

<input type=”button” value=”Load”>

</div>

Действие 2:

В основном файле страницы определяем невидимый iframe, который будет выступать контейнером:

<iframe onLoad="javascript:ol();" src="" name="sframe" id="sframe" width="0" height="0" scrolling="no" frameborder="0" style="display: none"></iframe>

Я (на всякий случай) определяю этот iframe в самом конце страницы. Про обработчик onLoad и для чего он нужен будет подробнее описано чуть ниже.

Действие 3:

Определяем обработчик нажатия на кнопку и обработчик загрузки невидимого фрейма

<script language="javascript">

function btn_go()

{

window.frames.sframe.location.href = 'include.html';

}

function ol()

{

if (window.frames.sframe.document.body.innerHTML!='')

{window.document.getElementById('myelm').innerHTML=window.frames.sframe.document.body.innerHTML;}

}

</script>

Естественно, что файл include.html – это исключительно демонстрация. Никто не мешает нам написать, например, следующее:

window.frames.sframe.location.href = ‘srv_return.php?s=1&d=2&f=3&res=221?=664ub&etc=11’;

то есть, вызвать php скрипт, результаты работы которого будут отображены в контейнере div

Подробнее стоит остановиться на функции ol(). Ее появление обусловлено тем, что IE (я тестировал на версии 6) не умеет дожидаться загрузки документа. То есть, если бы я определил функцию btn_go() так:

function btn_go()

{

window.frames.sframe.location.href = 'include.html';

window.document.getElementById('myelm').innerHTML=window.frames.sframe.document.body.innerHTML;

}

то при использовании IE контейнер бы просто обнулялся (сценарий уже выполнен, а документ еще не успел загрузиться – можете проверить)

Действие 4:

Подправляем код кнопки в контейнере, связывая обработчик, который разработан на предыдущем шаге, с кнопкой, которая определена в действии 1; одновременно для наглядности «раскрасим» div:

<div id=’myelm’ style=”border: 1px solid blue; background-color: gray;”>

<input type=”button” value=”Load” onClick=”javascript:btn_go();”>

</div>

Действие 5:

Opera (у меня версии 9) «не понимает» конструкции about:blank (пустая страница) и заполняет невидимый фрейм чем-то по своему усмотрению. В итоге, следует предусмотреть «обнуление» фрейма при создании основного документа:

<body onLoad="javascript:window.frames.sframe.document.body.innerHTML='';">

Собственно говоря, все.

Для наглядности приведу демо-примеры полностью

1. Файл client_example.html

<html>

<head>

<title>Example</title>

<script language="javascript">

function btn_go()

{

window.frames.sframe.location.href = 'include.html';

}

function ol()

{

if (window.frames.sframe.document.body.innerHTML!='')

{window.document.getElementById('myelm').innerHTML=window.frames.sframe.document.body.innerHTML;}

}

</script>

</head>

<body onLoad="javascript:window.frames.sframe.document.body.innerHTML='';">

<div id='myelm' style="border: 1px solid blue; background-color: gray;">

<input type="button" value="Load" onClick="javascript:btn_go();">

</div>

<iframe onLoad="javascript:ol();" src="" name="sframe" id="sframe" width="0" height="0" scrolling="no" frameborder="0" style="display: none"></iframe>

</body>

</html>

2. Файл include.html

<span style="">Hello!<br>

This is AJAX script.</span>

(обратите внимание, что в этом файле содержится (а потенциально – генерируется) только тот текст, который должен быть встроен в контейнер, без тегов типа <html> и т.д.)

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

PS. Возникает вопрос - а почему бы, вместо того, чтобы изображать все описанное выше, не использовать просто IFRAME? Вроде проще и надежнее. Это, безусловно, так. Но! Если мы разрабатываем сложную динамическую страницу с элементами div, которые могут перекрыть требуемый нам элемент, то в случае с IFRAME и IE IRFAME будет "просвечивать" сквозь div - т.к. с точки зрения IE, IFRAME (как оконный элемент управления) имеет бесконечно большой z-index... Кстати, в Opera (версии 9) был обнаружен схожий глюк.

Приведенное же выше решение указанного недостатка не имеет.

Ссылки по теме:

Статья Красносельского К.К. AJAX http://webdesign.site3k.net/consulting/ajax.html