воскресенье, 9 мая 2010 г.

Используем data:uri

Берем последний JQuery + JQuery UI с официального сайта, причем отказываемся от загрузки эффектов UI и соглашаемся с выбором темы оформления по умолчанию ui-lightness. Далее пакуем все это в deb-пакет mbgserver-jquery, сразу же заменяя ссылки на картинки в css-файле на их base64 представление согласно формату data:uri. Написанный на скорую руку скрипт делает то, что нам нужно, хотя его не стоит рекомендовать как образец программирования на тикле:
#!/usr/bin/tclsh8.5

proc K {arg args} {set arg}
proc >> {name data} {set f [open $name w]; puts -nonewline $f $data; close $f}
proc << name {K [read [set f [open $name]]] [close $f]}

set css [exec sh -c "cat *css"]
foreach file [exec ls images/] {
    set file images/$file
#    puts $file
    set image [string map {\r {} \n {}} [exec base64 $file]]
    set mime [exec file --brief --mime-type $file]
    set css [regsub -all -- $file $css "'data:$mime;base64,$image'"]
}
#puts $css
set dir [exec pwd]
set dir [exec basename $dir]
>> ../${dir}.css $css
Замечу, что в css недопустимо многострочное представление base64-строк. Указанный скрипт также наличествует в собранном пакете mbgserver-jquery.

Теперь делаем симлинки скриптов и стилей JQuery в рабочие директории, добавляем свои, пакуем их все вместе, получая файлы autoload.js и autoload.css и можно пользоваться.

Проверим на виджете Dialog. О нем много понаписано, например, jQuery UI – виджет Dialog Отлично, открывается окно диалога с фоновой картинкой заголовка и кнопкой закрытия в правом верхнем углу. Подробности смотрим в файрбаге или гугл девелопер тулс, в зависимости от нашего браузера.

Вот экзерсис в тему: Кроссбраузерный data URI в CSS-файлах. Имхо это зло, делать подобные вещи в продакшене сейчас, когда ИЕ6 сама микрософт жаждет похоронить, но ежели сильно приспичит, то как один из вариантов может пригодиться.

Комментариев нет:


(C) Alexey Pechnikov aka MBG, mobigroup.ru