Ни одна форма в HTML не вызывает столько затруднений у обычного пользователя, как <select multiple> — если есть необходимость выбрать из выпадающего списка боле одного значения. Что нажать — Ctrl или Shift, и где потом посмотреть выбранное? А как удалить, если выбрал не то?
Плагин jquery-asmselect очень упрощает процедуру выбора нескольких вариантов в списке, визуализируя выбор и облегчая управление:
На скриншоте вверху пойман момент удаления выбранного элемента. Также есть возможность настраивать внешний вид по своему вкусу — как обычным выпадающим списком, так и в виде скроллируемого контейнера с чекбоксами, или например в виде двух контейнеров – приемного и передающего.
Иногда при взаимодействии с пользователем в рамках диалога появляется необходимость сказать ему пару слов - например, сделать предупреждение или уведомить о результате его действия. С этой работой успешно справляется функция java-script alert, но функционал этого серого окошка ограничен и не во всяком дизайне оно смотрится уместно. Есть много различных реализаций всплывающих окон в различных фреймворках, встречаем еще одну - jGrowl.
jGrowl - это плагин к jQuery, с помощью которого можно выводить ненавязчивые красивые сообшения на страницах веб-сайта. Внешний вид сообщений напоминает интерфейс OS X Growl Framework, авторы не стали заморачиваться с поиском подходящего имени для проекта. Скрипт очень удобный, с множеством настроек, внешний вид 100% настраиваемый, функционал богатый - в закрома!
Признаться, сразу и не догадался, что объявление «ПТИЧИЙ ХРЕН В БЕЛОМ НОСОРОГЕ» гласит о выступлении группы «Птичий хрен» в клубе «Белый носорог» ... ©bor.
Предыдущий абзац был должен обмануть бдительность противника, а сообщить я хотел, что наконец закончил переносить с Joomla на свою CMS очередного джумлострадальца - сайт киевской галереи современного искусства Ahouse.com.ua. Правда я сам был разочарован тем фактом, что современное искусство представлено в основном украинской живописью, однако встречаются замечательные вещи, например, «Торро» работы Николая Бутковского:
Что-то в последнее время все больше возвышенные заказы идут - галерея, хоумпага для певца, продюсерское агенство ... по закону подлости как только привыкну, опять валом попрет корпоратив и готы 0_о.
После того, как вылизана последняя строчка функционального кода проекта, начинается дизайн. Точнее, начинаются танцы с бубном - ибо этот самый дизайн он многолик и непредсказуемо изменчив, если рассматривать его через разные браузеры. Достижение кросс-браузерности - очень трудоемкая и тяжелая в плане крепости психики работа, этой теме посвящены сотни статей, написаны сотни хаков для стилевых таблиц, но из этой троицы - семейства Mozilla, Opera и Internet Explorer хоть один, да доставит несколько неприятных часов при отладке сверстанного и утвержденного макета дизйна. «И в Safari чтобы проверили ...» добавляет свои пять копеек арт-директор. Ага, щаз, только сначала застрелюсь.
Тем не менее есть способ сэкономить огромное количество впустую потраченного времени, чур не плеваться: писать код правильно! Далее - краткий итог статьи How to get Cross Browser Compatibility Every Time - 10 правил кроссбраузерной верстки:
Несколько раз натыкался на проблему с внедрением кода flash роликов с Youtube.com и других видеохостингов в CMS использующих TinyMCE. В старых версиях это невозможно даже через диалог вставки html-кода (вставленное просто исчезает после подтверждения), в новых версиях - 3 и выше есть опция вставки flash-содержимого, но приходится делать много лишних движений руками - вырезать кусок адреса, отдельно руками вписывать параметры ролика, морока. Я задумался - а изначально почему исчезает html-код?
Оказывается, TinyMCE удаляет «недружественные» теги самостоятельно и без предупреждения. Это понятно, все-таки это редактор для текста и какой-никакой разметки, а не визуальный Frontpage, поэтому все теги, не относящиеся к тексту, ссылкам и объектам внутри текста (таблицам, картинкам) безжалостно удаляются. Но это же не прописано в «ядре» скрипта, есть возможность конфигурирования?
Я покопался в образцах настроек TinyMCE и обнаружил интересную строку в скрипте инициализации, на которую раньше не обращал внимания:
tinyMCE.init({ // General options mode : "textareas", theme : "advanced", plugins : "preview,media", // Theme options theme_advanced_buttons1 : "bold,italic,underline...", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, extended_valid_elements : "a[href|target|...],img[src|alt|...]" });
А вот последняя строка нас и интересует в данной ситуации - она дает скрипту список кошерных тегов, которые ни в коем случае нельзя удалять. Я модифицировал эту строку под свои нужды, добавив кусочек, перечисляющий теги используемые в flash-роликах: object[width|height|param|embed],param[name|value],embed[src|type|width|height],
Экспериментировать было некогда, время поджимало, поэтому я так намудрил со вложенностью, наверняка можно упростить, у кого есть идеи - welcome в комментарии!