Jquery UI嵌套的可选问题

标签 jquery css jquery-ui

我需要在运行时单击按钮时水平和垂直创建/拆分我的 div 元素。我可以创建一个 div 容器,根据单击的按钮在其中拆分 Canvas 。

例如:当我单击 Horizo​​ntalSplit 按钮时,它应该在所选容器内创建两个新的 div。我遇到了嵌套子 div 元素的问题。当我试图选择最里面的子代码时,选择父 div 也会产生问题。我无法弄清楚为什么我的 nonSelectable 类会自动获得“ui-selected”

这是我到目前为止所做的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
                <link rel="stylesheet" href="css/themes/base/jquery.ui.all.css"> 
                <script type="text/javascript" src="scripts/jquery-1.6.js"></script>
                <script type="text/javascript" src="scripts/jquery-ui-1.8.13.custom.min.js" ></script>              
                    <style>

                        #canvasWrapper {
                            border: 1px solid #DDDDDD;
                            height: 500px;
                            vertical-align:top;
                            margin-left: auto;
                            margin-right: auto;
                            width:  90%; 
                        }
                        .Frame {
                            border: 1px solid #DDDDDD;
                            height: 500px;
                            margin-left: auto;
                            margin-right: auto;
                            width:  100%; 
                        }
                        .hFrame {
                            border: 1px solid #DDDDDD;
                            height: 50%;
                            width:  100%; 
                            position:relative;
                        }

                        .nonSelectable {
                            border: 1px solid #DDDDDD;
                            height: 50%;
                            width:  100%; 
                            position:relative;
                        }

                        .vFrame {
                            border: 1px solid #DDDDDD;
                            height: 100%;
                            width: 50%; 
                            position:relative;
                        }

                        .buttonBar {
                            position: relative;
                            margin-left: auto;
                            margin-right: auto;
                            width:90%;
                        }
                        .Frame .ui-selecting,.vFrame .ui-selecting ,.hFrame .ui-selecting  { background: blue; }
                        .Frame .ui-selected,.vFrame .ui-selected ,.hFrame .ui-selected  { background: grey; }
                        .hFrame ui-selectable { background: yellow; }
                        .hFrame ui-selected { background: green; }
                        .hFrame ui-selectable ui-selected { background: pink; }

                    </style>



</head>
<body>
    <div id="canvasWrapper">
        <div id="canvasFrame" class="Frame">
        </div>
    </div>
    <div class="buttonBar">
        <input id="B1" class="button" type="submit" value="Horizontal Split">
        <input id="B2" class="button" type="submit" value="Vertical Split">
    </div>

    <script>
        $(document).ready(function()
        {   
            $("#canvasFrame").addClass("ui-selected");
            $(function() {
                $( ".Frame" ).selectable({
                     // cancel: '.nonSelectable'
                });
                $( ".hFrame" ).selectable({
                    // cancel: '.nonSelectable'

                });
                $( ".vFrame" ).selectable();
                // $( ".nonSelectable" ).selectable("disable");
            });

            addHFrame();

            addVFrame();



        });

    function addHFrame(){
        $("#B1").unbind('click.addit').bind('click.addit',function()
        {

        var numSplits=2;
        var select="";

        $(".ui-selected ").each(function () {   
                for (var i=0; i<numSplits ; i++){
                        $(this).removeClass('ui-selected ui-selectable');
                        $(this).parent().removeClass('ui-selected ui-selectable');
                        var $newElement = '<div></div>';

                        $(this).append($newElement);
                        $(this).children().addClass("hFrame");

                        //$(this).unbind('ui-selected ui-selectable');
                        // $(this).parent().selectable("disable")   ;
                        // $(this).remove("hFrame").addClass("nonSelectable")   ;
                        addHFrame();
                    }
                $(this).hasClass("hFrame") ? $(this).removeClass("hFrame").addClass("nonSelectable") : $(this);                         
            });
        });

    }

    function addVFrame(){

                $("#B2").click(function()
                {

                    $("div.ui-selected").each(function () {
                        // $(this).append('<div class="vFrame"> </div>');       
                        alert("Button Vertical Split Clicked"); 
                    });
                });
    }

    </script>
</body>

</html>

最佳答案

听起来您需要防止事件传播:
http://api.jquery.com/event.stopPropagation/

类似问题:jQuery UI Sortable -- How can I cancel the click event on an item that's dragged/sorted?

单击该元素时,该事件会在 DOM 中冒泡,直到它到达最高级别的 HTML 节点。这称为事件传播。因此,除非事件传播停止,否则该事件会在所有元素的祖先上触发。这可以这样做:

HTML-

<body>
    <div id="container">
        <a href="javascript:void(0);" id="click-element"></a>
    </div>
</body>

脚本-
$('#click-element').click(function(event){

    //prevent container and body from triggering click event
    event.stopPropagation();

    //do stuff

});

关于Jquery UI嵌套的可选问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6207406/

相关文章:

css - mPDF:在表格单元格内旋转条形码

css - 使 flex 元素包装在列方向容器中

jQuery 和 jQuery UI : Building a draggable infinite grid with content (imgs) of varying size

javascript - 如何使用 jQuery 清空输入值?

c# - 在JQGrid ReloadGrid上显示时间戳

jquery - 如何使div向上滚动并固定在顶部

javascript - jQuery遍历方法与选择器方法

jquery - 无论如何让jquery ui进度条垂直显示?

jquery - 使父菜单可点击

javascript - 只要选择了特定的<选项>,从Greasemonkey脚本更改页面