Блог Александра Башкирова

ИТ и бизнес, компьютеры и ПО, фото, программирование и просто мысли…
Этот сайт в основном посвящен тому, что мне интересно вне работы. Ведется в порядке хобби.
Все изложенное на сайте - мое частное оценочное мнение и не может быть истолковано иначе.
Со всеми вытекающими из этого последствиями.

JavaScript

И еще раз про ScriptJava и jQuery

Просмотров: 1704Комментарии: 0
Alib.spb.ru

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

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

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

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

Итак, к делу.

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

ЗадачаjQueryScriptJava
1 Ajaxдада
2 Динамическое изменение атрибутов (класса, тега, id)дада
3Получение JS элементадада
4Поддержка событий (обработчики событий элемента)дада
5Плагиныданет

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

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

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

ScriptJava - аналог jQuery?

Просмотров: 3465Комментарии: 2
Alib.spb.ru

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

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

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

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

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

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

Всплывающие подсказки на DHTML и JavaScript

Просмотров: 2045Комментарии: 0

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

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

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

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

Фотогалерея на JS

Просмотров: 3517Комментарии: 0
Alib.spb.ru

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

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

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

CSS меню – подборка материалов

Просмотров: 16806Комментарии: 4
Alib.spb.ru

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

Образовалась задачка. Построить с минимальными затратами 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/

ExtJS – JavaScript библиотека

Просмотров: 2698Комментарии: 2
Alib.spb.ruWordpress

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

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

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

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

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

AJAX без AJAX или кое-что об IFRAME

Просмотров: 4499Комментарии: 0
Alib.spb.ru

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

Для начала. Все началось с того, что, заинтересовавшись 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