Вопрос по javascript, jquery – Как разрешить вертикальное изменение размера DIV только с помощью jQuery - без плагинов?

6

Edit: Я поместил этот фрагмент кода в jsbin:http://jsbin.com/eneru

Я пытаюсь позволить пользователю изменить размер (только по вертикали) элемента DIV с помощью jQuery. Я читал о jQuery UI, я попробовал, и через несколько минут у меня все заработало. Но библиотека добавляет накладные расходы ~ 25 КБ, которых я хотел бы избежать, так как мне нужно только простое вертикальное изменение размера.

Поэтому я попытался сделать это самостоятельно. Вот это HTML, я использую встроенный стиль для ясности:

<div id="frame" style="border: 1px solid green; height: 350px">
    <div style="height: 100%">Lorem ipsum blah blah</div>
    <span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"></span>
</div>

Как видите, под элементом DIV есть небольшая полоска, поэтому пользователь может перетаскивать ее вверх или вниз, чтобы изменить размер DIV. Вот это код Javascript (с использованием jQuery):

$(document).ready(function(){
    var resizing = false;
    var frame = $("#frame");
    var origHeightFrame = frame.height();
    var origPosYGrip = $("#frame-grip").offset().top;
    var gripHeight = $("#frame-grip").height();


    $("#frame-grip").mouseup(function(e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function(e) {
        resizing = true;
    });

    $("#frame-grip").mousemove(function(e) {
        if(resizing) {
            frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        }
    });
});

Это работает, более или менее, но если вы перетаскиваете панель слишком быстро, она перестает следовать за движением мыши, и все ломается.

Я впервые пытаюсь что-то сделатьserious (хм) с JS и jQuery, так что я могу делать что-то глупое. Если это так, пожалуйста, скажите мне :)

Если вы уже работали, не беспокойтесь об этом. Беспокойство, когда люди начинают жаловаться, или если у вас 5000 пользователей в минуту, попадающих на сайт, и это начинает вам что-то стоить. Не делайте ранних оптимизаций! Soviut
Благодарю. Фактически сайт имеет около 100 000 ежедневных просмотров страниц, и он обслуживал почти 100 КБ несжатого Javascript. Я вставил в jQuery UI, и когда он минимизирован и сжат, он меньше, чем раньше :) MM.

Ваш Ответ

4   ответа
7

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

    $(document).ready(function()
{
    var resizing = false;
    var frame = $("#frame").height();

    $(document).mouseup(function(event)
    {
        resizing = false;
        frame = $("#frame").height();
    });

    $("#frame-grip").mousedown(function(event)
    {
        resizing = event.pageY;
    });

    $(document).mousemove(function(event)
    {
        if (resizing)
        {
            $("#frame").height(frame + resizing - event.pageY);
        }
    });
});

живой пример того, как я это использовал, потяните красную кнопку, не хватает изображений, поэтому я заменил простым цветом.http://jsbin.com/ufuqo/23

я адаптировал его к его исходному коду, надеюсь, он станет лучше
Возможно, объясните, как ваш код будет применяться к этому вопросу. Комментирование строк в коде также поможет.
3

ейса, но вот некоторые изменения в вашем коде, чтобы заставить его работать:

$(document).ready(function(){
    var resizing = false;
    var frame = $("#frame");

    $(document).mouseup(function(e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function(e) {
        e.preventDefault();
        resizing = true;
    });

    $(document).mousemove(function(e) {
        if(resizing) {
          var origHeightFrame = frame.height();
          var origPosYGrip = $("#frame-grip").offset().top;
          var gripHeight = $("#frame-grip").height();
          frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        }
    });
});
14

are делать что-то тупое: вы пытаетесь сделать это самостоятельно.

слушай меня, выслушай меня: Javascript в браузерах - это ужасно, ужасно. Существует множество движков во многих версиях с множеством различных операционных систем, каждая из которых имеет множество тонкостей, которые делают Javascript в значительной степени адским для работы. Существует вполне веская причина, по которой такие библиотеки, как jQuery (и их расширения), приобрели популярность: многие великие программисты потратили много часов на то, чтобы абстрагироваться от всех этих ужасных несоответствий, поэтому нам не нужно об этом беспокоиться.

Теперь я не уверен насчет вашей пользовательской базы, может быть, вы обслуживаете старых домохозяек, у которых все еще есть дозвон. Но по большей части в этот день и в возрасте, 25 КБ попадания в начальную загрузку страницы (как это будет кешироваться впоследствии) для уверенности в том, что это будет работать во всех браузерах последовательно, является небольшой ценой. Не существует такой вещи, как "простой" изменение размера, когда дело доходит до Javascript, так что вам лучше использовать пользовательский интерфейс.

Вы правы, это не так уж и много, и я заметил, что трудно добиться кроссбраузерной совместимости. Во всяком случае, это не мой сайт, поэтому я не осознавал, чтоthey are serving TONS of Javascript without minifying or gzipping, Поэтому я сжал все, и теперь, даже с пользовательским интерфейсом jQuery, он меньше, чем раньше! Спасибо. MM.
Согласовано. но есть небольшие библиотеки, которые выполняют ту же работу, что и пользовательский интерфейс JQuery!
Согласовано. Если вы уже платите за привлечение jQuery, то внесение основного и изменяемого размера не требуется.that намного больше нагрузки. Кроме того, если вы знаете, что ваши пользователи будут иметь доступ к Интернету, вы можете использовать API библиотек Google Ajax для добавления пользовательского интерфейса jQuery, доступного по адресуcode.google.com/apis/ajaxlibs - и если ваши пользователи уже зашли на сайт, использующий его, он уже будет кэширован, что фактически приведет к нулевой дополнительной загрузке на этом этапе.
2

вызываемый, когда вы не изменяете размер, просто связывая функцию mousemove, когда вы фактически перетаскиваете:

$(document).ready(function(){
    var resizing = function(e) {
        var frame = $("#frame");
        var origHeightFrame = frame.height();
        var origPosYGrip = $("#frame-grip").offset().top;
        var gripHeight = $("#frame-grip").height();
        frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        return false;
    }

    var stopResizing = function(e) {
        $(document).unbind("mouseover", resizing);
    }

    $("#frame-grip").mouseup(stopResizing);

    $("#frame-grip").mousedown(function(e) {
        e.preventDefault();
        $(document).bind("mouseover", resizing).mouseup(stopResizing);
    });

});

(образец вhttp://jsbin.com/ufuqo)

Он не очень хорошо работает с Chrome 3.0.190.4. Это показывает, что я пытался заново изобрести колесо, кроссбраузерная совместимость - это боль: P MM.

Похожие вопросы