jQuery可选择范围选择(滑块行为) [英] Jquery selectable for range selection (slider behaviour)

问题描述

我想用一个值列表和一个选择范围的选项来代替滑块.我关注了jquery可选文章，该文章提供了一个不错的多选选项

I want to replace a slider with a list of values and an option to select the range. I followed the jquery selectable article, which provides a nice multi-select option

http://jqueryui.com/demos/selectable/#display-grid

由于我只想选择范围，因此我使用下面的代码禁用了Ctrl单击.

Since I only want range selection, I disabled the the Ctrl-click using the below code.

  $("#selectable").bind("mousedown", function (e) {
            e.metaKey = false;
            }).selectable();

http://forum.jquery.com/topic/disablebling-ctrl-click-on-jquery-ui-selectable

这将禁用ctrl-select，但是我仍然可以拖动鼠标并选择不在范围内的值.

This disables ctrl-select, but I can still drag the mouse and select values that are not in the range.

我的列表以4x4矩阵的形式布置.问题是我可以拖动鼠标并在同一列中选择值，而这些列不会突出显示同一范围内相邻列中的值.除了单行以外还有其他出路吗?

My list is laid out as a 4x4 matrix. Problem is I can drag my mouse and choose values in the same columns, which do not highlight the values in the adjacent columns under the same range. Is there any way out other than a single row?

推荐答案

编写了一个从namevalue集合创建可选对象的函数.我是Jquery和Javascript的新手，所以有一些微调的空间.

Wrote a function that creates a selectable from a namevalue collection. I am new to Jquery and Javascript so there is room for some fine tuning.

function NameValue(name, value) {
        this.name = name;
        this.value = value;
    }

    function createRangeSelectable(elementName, nameValueCollection, functionReference) {
           var newElementId = "selectable" + elementName;
        var orderedListHTML = "<ol id='" + newElementId + "' class='selectable'>";
        var itemHTML = "";

        for (x in nameValueCollection) {
            var item = nameValueCollection[x];
            itemHTML = itemHTML + "<li class='ui-state-default'>" + item.name + "<input type='hidden' value='" + item.value + "'/></li>";
        }

        orderedListHTML = orderedListHTML + itemHTML + "</ol>"

        $("#" + elementName).html(orderedListHTML);


        $("#" + newElementId).bind("mousedown", function (e) {
            e.metaKey = false;
        }).selectable({

            stop: function () {
                var first = -1;
                var last = -1;

                $(".ui-selected", this).each(function () {

                    var index = $("li", this.parentElement).index(this);
                    if (first == -1)
                        first = index
                    last = index
                });

                var firstListItemValue;
                var lastListItemValue;

                $("li", this).each(function () {


                    var index = $("li", this.parentElement).index(this);
                    if (index == first) {
                        firstListItemValue = $(this).children('input').val();
                    }
                    if (index == last)
                        lastListItemValue = $(this).children('input').val();

                    if (index > first && index < last)
                        if (!$(this).hasClass("ui-selected"))
                            $(this).addClass("ui-selected");
                });

                functionReference(firstListItemValue, lastListItemValue);
            }

        });

//Usage

createRangeSelectable("YourDivId", NameValueArray, function(startValue, endValue){

         });

这篇关于jQuery可选择范围选择(滑块行为)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！