Плагин для выбора стиля текстового редактора jQuery? - PullRequest
Новая
       20

Плагин для выбора стиля текстового редактора jQuery?

3 голосов
/ 26 февраля 2010

То, чего я пытаюсь добиться, - это использовать jQuery для имитации поведения функций выделения текста, которые вы видите в типичном текстовом редакторе, за исключением того, что вместо выделения текста я хочу выбрать несколько строк <div> s , Однако пока единственные плагины «выбора», которые я нашел для jQuery, работают на основе прямоугольной модели лассо. В частности, я использую выбираемый плагин jQueryUI. Чтобы понять, о чем я говорю, рассмотрите следующие 2 изображения:

Плагин jQueryUI "выбираемый" по умолчанию

Идеальное поведение плагина (без лассо) http://img709.imageshack.us/img709/5664/selectableidealthumb.png

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

P / S: В моем приложении каждая строка будет содержать до 150 или около того div, и каждый div будет иметь несколько div внутри. Я пытался прокрутить вручную свой собственный выбор, но это было медленно, даже когда он работал только с одной строкой. В настоящее время я использую этот плагин, потому что он гораздо более производительный, чем то, что я написал.

Ответы [ 3 ]

2 голосов
/ 27 февраля 2010

Может быть, это можно как-то оптимизировать, и все же я протестировал его только в Chrome, но я думаю, что он будет работать и в других браузерах. Для этого не нужен пользовательский интерфейс jQuery, он сделан вручную;) 

$(function() {
    var selectableLi = $('#selectable li');
    selectableLi.mousedown(function(){
        var startIndex, endIndex, mouseUpOnLi = false;

        // When dragging starts, remove classes active and hover
        selectableLi.removeClass('active hover');

        // Give the element where dragging starts a class
        $(this).addClass('active');

        // Save the start index
        startIndex = $(this).index();

        // Bind mouse up event 
        selectableLi.bind('mouseup', function(){

            // Mouse up is on a li-element
            mouseUpOnLi = true;
            $(this).addClass('active');

            // Remove the events for mouseup, mouseover and mouseout
            selectableLi.unbind('mouseup mouseover mouseout');

            // Store the end index
            endIndex = $(this).index();

            // Swap values if endIndex < startindex
            if(endIndex < startIndex){
                var tmp = startIndex;
                startIndex = endIndex;
                endIndex = tmp;                 
            }

            // Give the selected elements a colour
            for(i=startIndex; i<=endIndex; i++){
                $(selectableLi[i]).addClass('active');
            }

        }).bind('mouseover', function(){
            // Give elements a hover class when hovering
            $(this).addClass('hover');
        }).bind('mouseout', function(){
            // Remove the hover class when mouse moves out the li
            $(this).removeClass('hover');
        });

        $(document).bind('mouseup', function(e){
            // When mouse up is outside a li-element
            if(!mouseUpOnLi){
                selectableLi.removeClass('active');
            }
            $(this).unbind('mouseup');
        });
    }).attr("unselectable","on").css("MozUserSelect","none").bind("selectstart",function(){return false});
});

У меня есть пример онлайн . Обратите внимание, что элементы не имеют цвет фона при выборе; Я думаю, что это даст лучшую производительность.

ОБНОВЛЕНИЕ - Пример 2

Я обновил его, чтобы выбор был виден при выборе: 

var selectableLi;

function colourSelected(a, b, Class){
    selectableLi.removeClass(Class);
    // Swap values if a > b
    if(a > b){
        var tmp = a;
        a = b;
        b = tmp;                    
    }

    // Give the selected elements a colour
    for(i=a; i<=b; i++){
        $(selectableLi[i]).addClass(Class);
    }       
}

$(function() {
    selectableLi = $('#selectable li');
    selectableLi.mousedown(function(){
        var startIndex, endIndex, mouseUpOnLi = false;

        // When dragging starts, remove classes active and hover
        selectableLi.removeClass('active hover');

        // Give the element where dragging starts a class
        $(this).addClass('active');

        // Save the start index
        startIndex = $(this).index();

        // Bind mouse up event 
        selectableLi.bind('mouseup', function(){

            // Mouse up is on a li-element
            mouseUpOnLi = true;
            $(this).addClass('active');

            // Remove the events for mouseup, mouseover and mouseout
            selectableLi.unbind('mouseup mouseover mouseout');

            colourSelected(startIndex, $(this).index(), 'active');

        }).bind('mouseover mouseout', function(){
            // Give elements a hover class when hovering
            colourSelected(startIndex, $(this).index(), 'hover');
        });

        $(document).bind('mouseup', function(e){
            // When mouse up is outside a li-element
            if(!mouseUpOnLi){
                selectableLi.removeClass('active hover');
            }
            $(this).unbind('mouseup');
            selectableLi.unbind('mouseover mouseout');
        });
    }).attr("unselectable","on").css("MozUserSelect","none").bind("selectstart",function(){return false});
});

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

0 голосов
/ 01 июня 2010

Я бы сделал свою собственную версию, используя функции jQuery.

Прежде всего, интерфейс события для «stop:» (возможно, как serialize http://jqueryui.com/demos/selectable/#serialize)

Затем посмотрите, какие идентификаторы я получил, самые низкие и самые высокие дали бы мне достаточно простого цикла «для ... следующего» прохождения оставшихся объектов.

Я знаю, что это решение исправить / взломать, но, похоже, это решает проблему с моей точки зрения, полезно ли это для вас или вам нужен код тоже? Просто хотел сначала представить алгоритмическую мысль. : О)

0 голосов
/ 27 февраля 2010

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

Также есть несколько методов, которые могут быть полезны: 

var sR = $('#selectable').selectableRange({
    /* Alternatively, you could overwrite default options
    classname: 'active',
    log: false,
    logElement: $('#log'),
    nodename: 'LI'*/
});

// Initialize the selectable so it works
sR.init();

// You can always change options like this:
$('#logOnOff').click(function(){
    // Toggle log
    sR.options.log = (sR.options.log) ? false : true;
});

// Also you can use this methods:
// sR.deselect()
// sR.destroy()
// sR.getSelectedItems()

Попробуйте , код также доступен .

...