<rmcreative>

RSS

Все заметки с тегом «jQuery»

  1. Супрепростые шаблоны на jQuery без дополнительных библиотек

    2 ноября 2016

    Шаблоны — это удобно. Особенно когда альтернатива — формировать HTML конкатенацией. Если в проекте есть jQuery, а отдельный шаблонизатор использовать не хочется, реализовать простые шаблоны очень просто.

    Для начала задаём сам шаблон прямо в HTML страницы:

    <script type="html/tpl" id="my-template">
    <div class="item">
        <h1>{title}</h1>
        <p class="description">{description}</p>
    </div>
    </script>

    Далее реализовываем сам метод получения строки с заменёнными плейсхолдерами:

    function renderTemplate(name, data) {
        var template = document.getElementById(name).innerHTML;
     
        for (var property in data) {
            if (data.hasOwnProperty(property)) {
                var search = new RegExp('{' + property + '}', 'g');
                template = template.replace(search, data[property]);
            }
        }
        return template;
    }

    Использовать можно так:

    var html = renderTemplate('my-template', {
        title: "My cool thing",
        description: "It is really cool, isn't it?"
    });

    Стоит отметить, что экранирование спецсимволов не делается, так что будьте осторожны.

    8 комментариев
  2. jQuery, подменяем весь контент iframe

    22 мая 2013

    Итак, задачка: есть iframe, нужно подменить весь его контент, например, полученным через асинхронный запрос HTML. Делается, как оказалось, довольно просто:

    $('iframe').contents().find('html').html(data);

    Если в фрейме до этого ничего не было, стоит указать в его src значение about:blank, иначе никакого элемента html внутри не найдётся.

    4 комментария
  3. jQuery 2.0

    19 апреля 2013

    Релизнулась версия 2.0 самой популярной JavaScript-библиотеки.

    В релизе выкинули поддержку Internet Explorer 6, 7 и 8. За счёт этого выиграли в размере на 12% и прибавили в скорости. Можно выиграть в размере ещё больше, если сделать свой билд, убив ненужные из 12-и встроенных по умолчанию модулей.

    Тем, кому нужны старые IE остаются на ветке 1.x, которая их поддерживает и которую не забросили (скоро выйдет 1.10) и планируют поддерживать ещё несколько лет. API 2.0 хоть и совместим с не-deprecated 1.9, но изменений всё-таки много.

    7 комментариев
  4. jQuery 1.8

    10 августа 2012

    Вышла новая версия JavaScript-библиотеки jQuery.

    Совместима с jQuery UI (1.8.22) и jQuery Mobile (1.1.1).

    Главное изменение — переписан движок селекторов Sizzle, что дало определённый прирост производительности. Также:

    • Закрыто 160+ багов.
    • Меньше размер, чем у предыдущего релиза.
    • Переписано многое, касающееся анимации. Старое всё будет работать. Есть и дополнения (пример).
    • Добавили возможность собирать только нужные части (большинства это не коснётся потому как собирается спецутилитами).
    • Теперь автоматически расставляются CSS-прификсы:
    $('#test').css("user-select", "none");
    // В Chrome/Safari получим "-webkit-user-select"
    // В Firefox — "-moz-user-select"
    // IE10 — "-ms-user-select".
    2 комментария
  5. The Modal

    13 июля 2012

    Оформил «правильные модальные окна» в плагин jQuery и выложил на github.

    API получился, на мой вкус, неплохим. Можно делать, например, вот такие штуки:

    $.modal().open({
        onOpen: function(el, options){
            $.get('http://example.com/', function(data){
                el.html(data);
            });
        }
    });

    На данный момент найдены две нехорошести — одна со скроллом кнопками в FF, вторая — со скроллом на iPad. Со временем, конечно же, они будут исправлены.

    Пользуемся и форкаем

    27 комментариев
  6. Шпаргалка easing-функций

    30 марта 2012

    Отличная наглядная шпаргалка по easing-функциям. Это те, что определяют изменение скорости анимации и используются в jQuery, SASS и CSS transition.

    Рассматриваем

    2 комментария
  7. jQuery contextMenu

    19 декабря 2011

    Контекстное меню в виде плагина для jQuery с довольно гибким API.

    • Триггерится как угодно.
    • Можно управлять пунктами на ходу.
    • Можно встраивать элементы форм в меню… да и вообще что угодно из HTML.
    • Куча callback-ов практически на все действия.
    • Поддержка вложенных меню.
    • Поддержка клавиатуры.
    • Все стили задаются через CSS.

    Пользуемся

    9 комментариев
  8. jQuery mobile 1.0

    20 ноября 2011

    Релизнулся jQuery для мобильных устройств. Основан на jQuery, поэтому синтаксис остался примерно прежним. Основной плюс — кроссплатформенность: можно реализовать приложение в десктопном браузере и затем смело выкатывать на iOS, Android, Windows Phone, Blackberry, Palm и ещё кучу всяких экзотических девайсов.

    В комплекте, помимо фреймворка, идёт неплохой набор из страниц, диалогов, тулбаров, кнопок, списков и всяческих элементов форм. Выглядит и работает достойно, поддерживает скины-темы.

    После минификации и Gzip весит 24 Кб + 7 Кб CSS, что похвально, учитывая постоянно растущий размер самого jQuery.

    Поговаривают, что на Android жутко глючит анимация, но дело это наживное… поправят.

    Рассматриваем

    2 комментария
  9. Chosen, функциональные и красивые селекты

    28 июля 2011

    Элементы select доставляют достаточно много проблем: начиная с того, что пользоваться ими не очень удобно при большом количестве вариантов и заканчивая тем, что применить к ним стили в старых версиях IE — совершенно неблагодарное занятие.

    Плагин Chosen превращает select-ы в довольно приятные штуки. При этом не нужна ни дополнительная разметка, ни какие-либо значительные телодвижения.

    Пользуемся

    7 комментариев
  10. jQuery Fundamentals

    29 мая 2011

    Хороший последовательный материал на английском для тех, кто хочет изучить jQuery. Описаны основы JavaScript, основы jQuery, ядро, работа с событиями, анимация, AJAX, плагины, оптимизация производительности, организация кода в больших проектах и создание своих событий.

    Читаем

    1 комментарий