可以'无法使JQuery UI Selectable工作
Can't get JQuery UI Selectable to work at all
我在让JQuery UI可选择用于我的网站时遇到了一些问题。我对编码还很陌生,我不确定自己做错了什么。我已经搜索了相关的问题,但没有找到任何能让我弄清楚的问题。
我正试图创建一个本质上是荣耀的标签制作器,并希望能够使用鼠标"套索"选择网格中的单元格。但由于某种原因,我根本无法选择工作。
这是js:
$('document').ready(function() {
for (i=0; i<117;i++) {
$('#plateActual').append('<div class="cell"/>');
}
$('#plateActual').selectable();
});
这是HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navbar">
</div>
<div id="controlPanel">
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
</div>
<div id="plateEditor">
<div id="plateActual">
</div>
</div>
<div id="bottom">
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</body>
这是CSS:
body {
margin: 0px auto;
padding: 0;
}
p {
color: yellow;
}
#wrapper {
border: 1px dotted black;
width: 980px;
margin: 0px auto;
padding: 0;
}
#navbar {
width: 980px;
background: black;
height: 50px;
position: fixed;
margin: 0;
padding: 0;
top: -10px;
}
#controlPanel {
width: 250px;
background-color: red;
float:left;
top: 100px;
margin-bottom: 0;
}
#plateEditor {
position: relative;
overflow: auto;
width: 730px;
float:right;
top: 100px;
margin-bottom: 0;
margin-top: 150px;
}
#plateActual {
border: 1px solid;
width: 403px;
height: 279px;
margin: 0px auto;
pading: 0;
}
#bottom {
width: 980px;
height: 30px;
background:green;
clear: both;
bottom: 0;
margin: 0px auto;
padding: 0;
}
.cell {
float: left;
width: 29px;
height: 29px;
border: 1px dotted;
}
如果我的代码杂乱无章,我深表歉意。我仍在想如何最好地保持它的组织性,并以一种可接受的方式写作。非常感谢你的帮助。
更新:我已经做出了安藤建议的改变,但我仍然无法选择工作。我尝试过将#plateActual更改为ol或ul,并添加li.cell,但也不起作用。
我想知道原因是否是我的css在某种程度上干扰了它,但我不知道如何在不破坏格式的情况下修复它。
append返回的元素将是执行添加的元素——在您的例子中是plateActual
——所以您将把cell
类添加到错误的元素中。
当您附加单元格时——您使用$('<div/>')
——这将转化为"从dom中获取类型为'<div/>'
的元素,并将它们移动到我的'plateActual'元素中"——您应该在不添加$的情况下添加,因为您正在创建一个尚不存在的元素。
这样的东西应该行得通(http://jsfiddle.net/k3YJY/):
for (var i=0; i<5;i++) {
$('#plateActual').append('<div class="cell"/>');
}
相关文章:
- jQuery UI自动完成突然停止工作
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 停止jQuery UI滑块移动超过给定值
- Jquery UI自动完成无法工作
- jquery ui滑块上的滑块值
- jQuery UI可排序-多连接列表拖动
- 使用Jquery ui时滑块无法工作
- JQuery UI可拖动潜水与滚动棒到鼠标
- jQuery UI自动完成-修改问题
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- 阻止选项卡缓存jquery ui
- 将jQuery UI Timepicker Addon与React一起使用
- 如何在页面重新加载时显示jquery ui对话框
- jquery ui自动完成导致标头错误
- jquery UI draggable:UI.children不是一个函数
- 在JQuery UI Accordion Sortable中使用touchpunch无法正确使用touch
- Jquery UI对话框不会消失
- jQuery UI对话框错误,按钮导致HierarchyRequestError
- jQuery UI使用json文件自动完成
- 如何从内部销毁jQuery UI小部件's原型