Jquery UI嵌套可选问题 [英] Jquery UI nested Selectable issue
问题描述
我需要在运行时点击按钮来水平和垂直地创建/拆分我的div元素。我可以创建一个div容器，其中按照按钮分割画布。
I have requirement of creating/splitting my div elements horizontally and vertically on click of button at run time. I am able to create a div container in which splits the canvas according to the button clicked.
例如：当我点击horizontalSplit按钮，它应该创建两个新的div选择容器。我遇到了嵌套子div元素的问题。当我试图选择最内层的子代码是选择父div也是创建问题。我不能弄清楚为什么我的nonSelectable类自动获得ui选择
For example: When I click horizontalSplit button it should create two new div's within the selected container. I am running into issue with nested child div element. When I am trying to select the innermost child code is selecting parent div also which is creating issue. I am not able to figure out why my nonSelectable class is automatically getting "ui-selected"
这是我到目前为止做的：
This is what I have done so far:
<!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/
Sounds like you need to prevent event propagation: http://api.jquery.com/event.stopPropagation/
类似问题： jQuery UI Sortable - 如何取消对拖动/排序的项目的点击事件？
当单击该元素时，事件会使DOM冒泡，直到它达到最高级别的HTML节点。这被称为事件传播。因此，除非事件传播被暂停，否则事件对所有元素的祖先触发。这可以这样做：
When the element is clicked, the event bubbles up the DOM until it hits the highest level HTML node. This is referred to as event propagation. So the event is fired on all of the element's ancestors unless event propagation is halted. This can be done like so:
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嵌套可选问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
