Q-Zma's Burrow » Javascript http://q-zma.com дневник педантичного отморозка Wed, 04 Jan 2012 13:07:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Полезные модули Drupal для client side разработчика http://q-zma.com/2009-05-26-poleznyie-moduli-drupal-dlya-client-side-razrabotchika/ http://q-zma.com/2009-05-26-poleznyie-moduli-drupal-dlya-client-side-razrabotchika/#comments Tue, 26 May 2009 08:44:11 +0000 Q-Zma http://q-zma.com/?p=591 Так как я являюсь большим поклонником jQuery и Drupal, хочу рассказать о нескольких модулях, которые могут значительно облегчить создание высококачественных веб-приложений с использованием этой связки.

jQuery Update

Как вы наверняка знаете — jQuery в Drupal является основной javascript-библиотекой, однако, в связи с тем, что Drupal содержит довольно много зависящих от jQuery фишек, обновлять библиотеку в ядре с каждым минорным релизом Drupal у сообщества не принято. Но, так как почти каждый релиз jQuery совершает маленькую революцию, некоторые из членов сообщества озаботились актуальностью версии библиотеки, и в помощь революционерам был создан модуль jQuery Update. Для того, чтобы использовать самые последние возможности jQuery — установите и активируйте этот модуль. Для 5-ой версии Drupal потребуются некоторые дополнительные телодвижения типа замены кое-каких файлов в ядре, в 6-ой же версии всё начинает функционировать сразу после активации модуля.

jQuery UI

Этот модуль является обёрткой для интеграции jQuery UI — библиотеки компонентов для разработки пользовательских инетрфейсов. Сам по себе модуль не содержит дистрибутива jQuery UI, поэтому после его установки вам потребуется установить девелоперский дистрибутив jQuery UI, подробные инструкции смотрите в README.txt. После установки и активации у вас появится возможность разрабатывать модули, которые используют какие-либо компоненты jQuery UI, подробности, опять же, смотрите в README.txt.

jQuery plugins

jQuery — довольно популярная библиотека, благодаря большому сообществу существуют тысячи плагинов реализующих ту или иную функциональность, зачем изобретать велосипед, если что-то уже было реализовано до вас? Конечно, если вы не начинающий web-разработчик, как известно, каждый начинающий должен изобрести какое-то количество велосипедов :). Данный модуль предназначен для централизованного хранения и использования плагинов jQuery, подробности как всегда смотрите в README.txt.

]]> http://q-zma.com/2009-05-26-poleznyie-moduli-drupal-dlya-client-side-razrabotchika/feed/ 0 Min-width и max-width для Internet Explorer http://q-zma.com/2007-10-18-min-width-i-max-width-dlja-internet-explorer-6/ http://q-zma.com/2007-10-18-min-width-i-max-width-dlja-internet-explorer-6/#comments Wed, 17 Oct 2007 22:28:06 +0000 Q-Zma http://q-zma.com/2007.10.18-min-width-i-max-width-dlja-internet-explorer-6/ Некоторые персонажи в комментариях к записи на схожую тему в одном блоге сетовали на то, что не могут найти в гуглояндексе «универсальное решение для реализации динамической ширины блока с минимальным и максимальным значением». Что ж, попробуем его туда добавить :). Сие есть не что иное как: min-width и max-width для Internet Explorer версий <= 6 (поскольку тварь последней модификации уже понимает эти свойства).

С тем, что dynamic properties (фирменная фича MS, используется для динамических расчётов значений CSS свойств элемента) зло, не могу согласиться. С их помощью можно научить ослика ходить более прямо, путём пририсовывания ему костыликов, причём замаскированных таким образом, что их наличие никак не сказывается на качестве рендерения страницы в других браузерах, а так же на драгоценной, так всеми желаемой, валидности. Именно эту фичу MS мы и будем использовать вкупе с ещё одной фирменной фичей, что звучно сonditional сomments зовётся.

Итааааак, работающий пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
        html
        {
            margin:0;
            padding:0;
        }
        body
        {
            background:olive;
            margin:0px;
            padding:10px;
            text-align:center;
        }
        #root
        {
            text-align:left;
            background:yellow;
            margin:0 auto;
            padding:1px 0;
            min-width:770px;
            max-width:990px;
        }
        </style>
        <!--[if IE]>
        <style type="text/css">
        * html #root
        {
            width:expression(
                (document.compatMode && document.compatMode == 'CSS1Compat')
                ?
                (
                    document.documentElement.clientWidth < 770
                    ?
                    "770px"
                    :
                    (
                        document.documentElement.clientWidth > 990
                        ?
                        "990px"
                        :
                        "auto"
                    )
                )
                :
                (
                    document.body.clientWidth < 770
                    ?
                    "770px"
                    :
                    (
                        document.body.clientWidth > 990
                        ?
                        "990px"
                        :
                        "auto"
                    )
                )
            );
        }
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="root">
            <p>
                Vivamus nonummy. Fusce risus. Duis luctus. Mauris tempor.
                Nullam consequat dolor at urna. Donec porttitor lectus ac lacus.
                Pellentesque turpis tortor, bibendum non, dictum id, mollis non,
                nulla. Aenean vehicula dapibus erat. Proin felis lorem, faucibus
                vitae, accumsan sit amet, posuere ut, leo. Nulla enim felis, mattis
                id, laoreet sed, tempus non, neque. Vivamus eu nisl. Ut posuere
                porttitor ante. Cras scelerisque ipsum eget metus. Proin ultricies
                nonummy ipsum. Maecenas dignissim sem at sem. Pellentesque faucibus,
                augue dignissim interdum vulputate, elit massa suscipit orci, vel
                feugiat massa dolor vitae sapien. Aenean porttitor nunc ac
                tellus.
            </p>
        </div>
    </body>
</html>

А теперь я попытаюсь объяснить как эта магия работает :). У всех современных браузеров есть несколько режимов отображения страницы, так называемые «standarts compliant mode» (режим совместимости со стандартами) и «quirks mode» (режим обратной совместимости), и наш непарнокопытный друг не является исключением, начиная с версии 6. Подробнее и по-русски о режимах отображения я расскажу в следующих статьях, кому неймётся, тот может изучить довольно подробный материал, собранный, судя по всему, финскими коллегами по цеху, на английском языке. Вкратце: IE версий 5-5.5 всё время работает в режиме обратной совместимости, IE 6-7 только при условии отсутствия DTD, некорректного DTD, наличия XML декларации или простого комментария перед DTD. В разных режимах отображения роль основного элемента, который представляет собой канву для отрисовки всего контента, играют разные элементы. В случае режима обратной совместимости этим элементом является body, а в режиме совместимости со стандартами — элемент html. Для определения в каком именно режиме отображается текущая страница наши друзья индусы придумали интересное свойство document.compatMode, данное свойство появилось в IE6, и оно может принимать следующие значения: "CSS1Compat" и "BackCompat"; из этого следует, что мы можем легко разбить наш expression на две ветки: первая — для IE6-7 в режиме соместимости со стандартами, вторая — для IE всех версий в режиме обратной совместимости. В первой ветке мы используем свойство document.documentElement, которое, начиная с версии IE6 в режиме совместимости со стандартами содержит ссылку на корневой элемент документа, а во втором случае — давно известный нам объект document.body. Подобный тюнинг этого выражения позволяет избежать зависания IE разных версий в разных режимах отображения страницы.

В последующийх статьях я попробую рассказать о режимах отображения страницы в разных браузерах и conditional comments. Спасибо, что дочитали до конца ;).

]]> http://q-zma.com/2007-10-18-min-width-i-max-width-dlja-internet-explorer-6/feed/ 11