MoreCSS — Сделаем css полноценным!

    morecss-logo.png

    MoreCSS — небольшая библиотека JavaScript, весом всего 14кб, для решения повседневных задач, таких как создать всплывающие окна, сделать вкладки меню, таблицы и списки с оформлением «зебра»-стиль… и т.д. С помощью этой библиотеки Вы сможете это делать средствами обычного css.


    Пример:
    a:active {
    target:popup;
    target-width:640px;
    target-height:640px;
    }
    

    Этот код позволит открыть все ссылки в всплывающем окне размером 640 × 640 px.(Смотреть)

    Еще пример:
    a, abbr {
    tooltip: title;
    tooltip-class: tooltip;
    }
    

    Этот пример добавляет всплывающую подсказку при наведении курсора.(Смотреть)

    Установка:
    <link rel="MoreCSS" href="path/to/the/MoreCSS/stylesheet.css" />
    <script type="text/javascript" src="MoreCSS.js"></script>  

    Расширение «moreCSS» должно запускаться только после css файла(точно также как показано выше).

    После этого вы можете использовать все возможности «moreCSS» в своем css файле.
    Полный список функций «moreCSS»
    Скачать «moreCSS»


    Источник: Авторский блог — «Чернев.Ру»

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 29

      +3
      Забавная библиотечка, поиграться можно, но в серьезных проектах врядли буду использовать, в любом случае спасибо за ссылку =)
      • UFO just landed and posted this here
          +6
          Который не работает не в одном браузере?
          0
          можно воспользоваться этим свойством, используя jQuery.
            0
            Однако жирно держать jQuery из-за одних лишь этих свойств. А библиотечка как раз идеальное решение для подобных случаев.
          +1
          Спасибо, интересно попробовать будет.
            0
            Полезно
              0
              Не очень хорошо, что приватные свойства свалены в общий нэймспейс со стандартными. Было бы лучше, если бы они назывались -more-target, -more-tooltip и т.п.
                0
                Удобная штука ))

                жаль только, что не валидна.. (
                  0
                  Меня волнует, насколько эта библиотека совместима с разными браузерами и разными Framework-ами: как показала практика, многие "расширения" глючат при совместном их использовании вместе с jQuery и д.р.
                    0
                    Можно попробовать, вдруг понравится... А то иногда так лень все писать ручками, или искать код :)
                      0
                      очень скудно описано. на самом деле, как оказалось там намного больше ФИШЕК!!!
                      спасибо большое за эту информацию! обязательно понадобится для меня!
                      мне только интересно на сколько это дело "забивает" браузер, т.е. сколько на себя внимания берет этот JavaScript код, чтоб страницы на сайте не тормозили....

                      (ну, щас применю и посомотрю...) =)
                        0
                        у меня не получилось сделать так, чтоб по нажатию на страничке какой-то раздел с id менялся.... ((( гнусно....
                        а вообще.... посмотрел я вот, и думаю.... "Не буду ка я этой фигней ради таргета заниматься....!" Потому что оно еще к тегах в стилях приплетает всякую фигню....
                        Короче, я считаю, когда сделают так, что будет конфетка — тогда и буду пользоваться... а пока ниче толком полезного...

                        развеялись мои самые лучшие ожидания.... (
                        0
                        Мда.. Все оказалось не так радужно... Попытался интегрировать в существующий проект валидацию - вылезло много проблем. Сделал валидацию на alphabetical, теперь когда загружаются данные в value текстового поля (плохие данные, с цифрами) я их изменяю на валидные, нажимаю submit - у меня alert, что данные не текстовые. Никак не хочет отправлять. В некоторых местах вообще не заработало, не знаю из-за чего. Я все в спешке делал, может быть что-нибудь упустил, но сходу несколько проблем возникло, а это не есть хорошо...

                        Еще у них проблемы с документацией на сайте.. Это меня тоже сильно не обрадовало.

                        Для валидации описаны поля:
                        validate:
                        validate-notice-text:
                        validate-notice-class:
                        validate-notice-execute:

                        А в примере:
                        input.emailField {
                        validate: email;
                        validate-alert-text: 'This is not a valid email address.';
                        }

                        Но никакого validate-alert-text нет! А я скопировал быстро из примера - не работает :( Потом только заметил что не верный код дали.

                        Может быть когда в спокойной обстановке попробую, мое мнение поменяется, но пока не очень понравилось. ИМХО.
                          0
                          дело в том, что не только в это упирается задача.... (путь даже если это не работает, как вы утверждаете, но другое, остаточное, очень даже usefull)

                          О! кстати, кто не видел, оч. полезная штука, они в разделе Downloads разместили — gzip для javascript'овских скриптов.... тож понадобится ;)
                            0
                            Я и не говорю, что все в это упирается, просто решил начать с этого и немного обломался)) Конечно посмотрим что там еще, поюзаем :) Надеюсь с остальным все ок будет :)
                            0
                            Отправил feedback им, посмотрим, надеюсь поправят :)
                            0
                            Для тех, кому не интересен код javascrit'а - тем я бы посоветовал скачать оптимизированный скрипт с их же сайта.
                            По адресу:
                            http://yellowgreen.de/files/sources/MoreCSS.js

                            Разница за счет новых строк и табуляций: 32,9 Кб -> 13,5 Кб
                            (А еще если сюда и оптимизацию gzip приплюсовать.... ух.... ваще пушинка =) )
                              0
                              Отличная штука, давно страдаю без чего-то такого. Причем как приятно и лаконично сделано.
                                +1
                                сорри, если вопрос уже был (не читал все комменты).

                                Я не нашел ничего про кроссбраузерность. Везде ли эта библиотека работает? Насколько она кроссбраузерна.

                                И вот насчёт первого примера с pop-up. В нём в любом браузере оно не будет блокироваться?
                                  0
                                  я сейчас попробовал в 3-х браузерах (мультитабовых).
                                  в опере и ФФ pop-up открылся, как и задумывался в отдельном окне, а вот в IE7 открылся как новый таб, соответственно, размеры окна по*ерились ((
                                  интересно, побороть это можно?
                                    0
                                    жалко. Вообще библиотечка полезная, потому что как раз такие вещи как поп-апы, подсказки и т.д. мне больше всего лень писать вручную =) всё таки это функции которые должны быть в таком, простом виде
                                    0
                                    В Сафари 3.1 вобще ничего не произошло после нажатия на ссылку «Click this to open a popup».
                                      0
                                      пусть выпустят обновление кроссбраузерное) тогда все юзать будут

                                      (у меня просто сейчас у самого нет возможно проверить, поэтому спросил в комментах)
                                    0
                                    Идея хорошая, но столкнулся с проектом, где реализованное в рамках данной библиотеки меню напрочь не работает в IE.

                                    Мне кажется, что лучше jQuery пока ничего не придумали в плане облегчения жизни front-end программиста.

                                    Only users with full accounts can post comments. Log in, please.