البرنامج المساعد لاختيار نمط محرر النصوص jQuery؟

Question

ما أحاول تحقيقه هو استخدام jQuery لتقليد سلوك وظائف اختيار النص التي تراها في محرر نصية نموذجية ، باستثناء بدلاً من تحديد النص ، أريد تحديد صفوف متعددة من <div>س. ومع ذلك ، حتى الآن ، تعمل المكونات الإضافية "الاختيار" الوحيدة التي وجدتها لـ JQuery استنادًا إلى نموذج Lasso مستطيل. على وجه الخصوص ، أنا أستخدم المكون الإضافي JQueryui الذي يمكن اختياره. لمعرفة ما أتحدث عنه ، فكر في الصور الثانية التالية:

السلوك الإضافي JQueryui الافتراضي "يمكن تحديده"

سلوك إضافي مثالي (بلا لاسو) http://img709

يمكنك أيضا الذهاب هنا للعب مع هذا المثال الدقيق. هل يعرف أي شخص مكونًا إضافيًا يحقق هذا؟ هذا من شأنه أن ينقذني من المتابعة إلى الاختراق أو اختراق هذا البرنامج المساعد للحصول على ما أريد ...

P/S: في تطبيقي ، سيحتوي كل صف على ما يصل إلى 150 أو نحو ذلك ، وسيحتوي كل DIV على عدد قليل من DIVs داخله. لقد جربت يدويًا لاستلامي ، لكن كان بطيئًا حتى عند التعامل مع خط واحد فقط. أنا أستخدم هذا المكون الإضافي حاليًا لأنه أكثر أداءً مما كتبته.

Answer 1

عليك القيام بأشياء DNS التي تخطيتها في الخطوة 3!إنها الخطوة التي تقوم فيها بمجال التطبيق سجل بحث في DNS، وبالتالي ترجمة اسم الكمبيوتر الخاص بك مع عنوان URL

Answer 2

ربما يمكن تحسين هذا بطريقة أو بأخرى ، ومع ذلك فقد اختبرته بالكروم فقط ، لكنني أعتقد أنه سيعمل في متصفحات أخرى أيضًا. ليست هناك حاجة إلى واجهة مستخدم 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});
});

مرة أخرى ، ربما يمكن تحسين هذا الرمز بطريقة أو بأخرى للأداء.

Answer 3

أود أن أصنع نسختي الخاصة باستخدام ميزات jQuery.

بادئ ذي بدء ، واجهة الحدث لـ "STOP:" (ربما مثل التسلسل http://jqueryui.com/demos/selectable/#serialize)

ثم ألقِ نظرة على المعرف الذي عدت إليه ، وأدنى وأعلى سيعطيني ما يكفي من أجل حلقة بسيطة "لـ ... التالي" من خلال الكائنات المتبقية.

أعلم أنه حل إصلاح/اختراق ، لكن يبدو أن هذا يحل المشكلة من وجهة نظري ، هل هو مفيد لك أم أنك بحاجة إلى الرمز أيضًا؟ أردت فقط توفير الفكر الخوارزمي أولاً. : س)