jQuery テキストエディターのスタイル選択用のプラグイン?

StackOverflow https://stackoverflow.com/questions/2344449

質問

私が達成しようとしているのは、jQuery を使用して、一般的なテキスト エディターで見られるテキスト選択機能の動作を模倣することです。ただし、テキストを選択する代わりに、複数の行を選択したいのです。 <div>s.ただし、これまでのところ、私が見つけた jQuery 用の「選択」プラグインは、長方形のなげなわモデルに基づいて動作するものだけです。特に、私は jQueryUI 選択可能なプラグインを使用しています。私が何を言っているのかを理解するには、次の 2 つの画像を考えてください。

デフォルトの jQueryUI の「選択可能な」プラグインの動作

理想的なプラグインの動作 (なげなわなし) http://img709.imageshack.us/img709/5664/selectableidealthumb.png

あなたも行くことができます ここ この正確な例で遊んでみましょう。これを実現するプラグインを知っている人はいますか?そうすれば、欲しいものを得るためにこのプラグインをハックしたりハックしたりする必要がなくなります...

追伸:私のアプリでは、各行に最大 150 個程度の div が含まれ、各 div 内にいくつかの div が含まれます。独自の選択項目を手動でローリングしてみましたが、1 行だけを処理する場合でも遅かったです。私が作成したプラグインよりもはるかにパフォーマンスが高いため、現在このプラグインを使用しています。

役に立ちましたか？

解決

たぶん、あなたはすでにこのための独自のスクリプトを得たが、私は多くのことを最適化し、地雷を改善しました。これは、パフォーマンスのために偉大である、必要なときにだけクラスを追加または削除します。

また、それが有用である可能性があるいくつかのメソッドを得ます：

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()

の それを試しのを、コードを与えますあるの も空くのの。

他のヒント

多分これは何とか最適化することができ、まだ私はChromeでそれをテストしているが、私はそれがあまりにも他のブラウザでは動作すると思います。このためのjQuery UIの必要はありません、それの手が作った;）

$(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});
});

私はオンラインの 例を持っています>。選択時にアイテムが背景色を持っていないことに注意してください。私は、これは、より良い性能を与えるだろうと思います。

<時間>

の UPDATE - 例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});
});

ここでも、多分このコードは、パフォーマンスのために何とか最適化することができます。

私はjQueryのを使用して独自のバージョンになるだろうことは備えています。

まず第一に、イベントをインターフェイス "停止："（おそらくシリアル化 HTTPのような：// jqueryui.com/demos/selectable/#serializeする）

次に、IDの私が帰った時に見て最も低く、最高は残りのオブジェクトを通じて「のために...次の」ループの単純なために十分な私を与えるでしょう。

私はその修正/ハック解決策を知っているが、私の視点から問題を解決するために思われる、それはあなたのために役に立つか、あなたはあまりにもコードが必要なのでしょうか？ただ、最初のalgoritmic考えを提供したかったです。 ：O）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top