Question

好的，我正在使用Jquery UI Selectable突出显示表格中的某些单元格。我希望能够像使用2px边框一样在突出显示的单元格周围添加边框。这样，每次突出显示某个部分时，您都可以分辨出已突出显示的每个部分之间的分隔。我也希望我可以通过重叠部分来实现这个结果。

我已经做了很多阅读，但还没有真正见过有人试图这样做。所以我想知道是否有人能指出我如何实现这种效果的正确方向。

以下是我的示例的fiddle和下面的一些代码。

var shadeColor = $(".color-pallet > .active").css("background-color");

applySelectable = function() {
    $(".block-tools > .shade-btn").click(function() {
        var $this = $(this);    

        if (!$this.hasClass("active")) {
            $this.siblings().removeClass("active");
            $this.addClass("active");   
        }
    });

    $(".color-pallet > span").click(function() {
        var $this = $(this);

        if (!$this.hasClass("active")) {
            $this.siblings().removeClass("active");
            $this.addClass("active");   

            shadeColor = $(this).css("background-color");
        }
    });

    // keep selected shade color selected after new question
    if (shadeColor !== $(".color-pallet > .active")) {
        $(".color-pallet > span").filter(function(){
            var color = $(this).css("background-color");
            if (color === shadeColor) {
                $(this).click();    
            };
        });
    }

    $(".blocks").bind("mousedown", function(e) {
        e.metaKey = true;
    }).selectable({
        filter: "td",
        selecting: function (event, ui) {
            if ($('.block-shade').hasClass("active")) {
                $(ui.selecting).addClass('marked').css("background-color", shadeColor);
            } else {
                $(ui.selecting).removeClass('marked').css("background-color", "");
            }
            userAns = $('.marked').length+"";
        }
    });
};

applySelectable();

提前感谢您的时间。

编辑：对于奖励积分，有人可以告诉我，当我拖动选择时，为什么容器高度增长并创建滚动条？这已经严重困扰了我一段时间，我选择忽略它，但我想我在这里也许有人可以解释这个吗？

Answer 1

嗯......这是某种解决方案，我已经添加了4个css类，还有一些丑陋的代码......但是它正在运行......

$(".blocks").bind("mousedown", function(e) {
            e.metaKey = true;
        }).selectable({
            filter: "td",
            selecting: function (event, ui) {
                if ($('.block-shade').hasClass("active")) {
                    $(ui.selecting).addClass('marked').css("background-color", shadeColor);
                    $(ui.selecting).addClass('top');
                     $(ui.selecting).addClass('left');
                     $(ui.selecting).addClass('bottom');
                     $(ui.selecting).addClass('right');
                    if($(ui.selecting).prev().hasClass('marked')) {
                       $(ui.selecting).removeClass('left');
                        $(ui.selecting).prev().removeClass('right');
                       }
                      if($(ui.selecting).next().hasClass('marked')) {
                       $(ui.selecting).removeClass('right');
                        $(ui.selecting).next().removeClass('left');
                       }

                    top_elem=$(ui.selecting).parent().prev('tr').find('td');
                     // console.log(top_elem);


                        $(top_elem).each(function(i) {
                             if($(this).hasClass('marked')) {
                            if($(this).offset().left==$(ui.selecting).offset().left) 
                            {
                                $(this).removeClass('bottom');
                        $(ui.selecting).removeClass('top'); 
                            }

                    }   
                        });

                    bottom_elem=$(ui.selecting).parent().next('tr').find('td');


                        $(bottom_elem).each(function(i) {
                            if($(this).hasClass('marked')) {
                            if($(this).offset().left==$(ui.selecting).offset().left) 
                            {
                                $(this).removeClass('top');
                        $(ui.selecting).removeClass('bottom'); 
                            }
                          }
                    });



                } else {
                    $(ui.selecting).removeClass('marked').css("background-color", "");
                     $(ui.selecting).removeClass('top');
                     $(ui.selecting).removeClass('left');
                     $(ui.selecting).removeClass('bottom');
                     $(ui.selecting).removeClass('right');
                }
                userAns = $('.marked').length+"";
            }
        });
    };

    applySelectable();
});

DEMO： http://jsfiddle.net/wh2ehzo3/10/

然而，重叠真的非常棘手，如果你想在重叠的部分保持边界..测试...（只保存两个形状的外边框，我希望你会看到我的意思）

想法：检查兄弟姐妹 - ＆gt;相应地删除类，如果有.marked元素，检查上下行 - ＆gt;做同样的事情......

Jquery UI可选表格单元格轮廓

1 个答案: