附加选项的选择,使用jQuery,调整它的大小?
-
25-09-2019 - |
题
在这个小,但完整的例子,我试图重新建立一个双列表框的UI组件。我只是希望能够从一个框移动项目的方式。 (会很好,如果我可以添加排序,但在同一时间,我认为一个障碍!)
我得到一个问题,这个代码在IE7(FF,铬,歌剧似乎都做工精细)。每当我将项目从一个列表到另一个选择框调整大小(收缩)每个迭代。我真的不知道我在哪里在这里走错了,任何人都可以摆脱一些见解?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dual List Testing</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
//hover states on the static widgets
$('.dual-box > .button-panel > .button').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
// Hack the buttons of the dual-list to the centre (couldn't figure out a css solution)
$(function(){
$('#dualBox1 .button-panel').css("padding-top",($('.button-panel').height()-(34*4))/2); // v-centre
$('#dualBox1 .button').css("margin-left", ($('.button-panel').width()-34)/2); // h-centre
});
$(function(){
$('#dualBox1 .add').click(function () {
$('#dualBox1 .list-box:first select option:selected').appendTo('#dualBox1 .list-box:last select');
});
$('#dualBox1 .remove').click(function () {
$('#dualBox1 .list-box:last select option:selected').appendTo('#dualBox1 .list-box:first select');
});
$('#dualBox1 .addall').click(function () {
$('#dualBox1 .list-box:first select option').appendTo('#dualBox1 .list-box:last select');
});
$('#dualBox1 .removeall').click(function () {
$('#dualBox1 .list-box:last select option').appendTo('#dualBox1 .list-box:first select');
});
});
</script>
<style type="text/css">
.dual-box
{
width: 500px;
height: 200px;
}
.dual-box > .list-box
{
width: 45%;
height: 100%;
background-color:#f00;
float: left;
}
.dual-box > .list-box > select
{
height: 100%;
width: 100%;
}
.dual-box > .button-panel
{
width: 10%;
height: 100%;
float: left;
}
.dual-box > .button-panel > .button
{
width:auto;
margin-bottom: 2px;
margin-left: auto;
margin-right: auto;
padding: 8px 0;
cursor: pointer;
float: left;
}
.dual-box > .button-panel > .button > span.ui-icon
{
float: left;
margin: 0 8px;
}
</style>
</head>
<body>
<div id="dualBox1" class="dual-box">
<div class="list-box">
<select multiple="multiple">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>
</div>
<div class="button-panel">
<div class="button add ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-e"></span>
</div>
<div class="button addall ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthickstop-1-e"></span>
</div>
<div class="button removeall ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthickstop-1-w"></span>
</div>
<div class="button remove ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-w"></span>
</div>
</div>
<div class="list-box">
<select multiple="multiple">
<option value="5">Test 5</option>
</select>
</div>
</div>
</body>
</html>
谢谢,
更新:我一直想看看这个从各个角度。我想,如果我的JS是罪魁祸首,而是通过Firefox的看着这似乎排除这种可能性。难道我遇到了一个浏览器错误在这里?
更新2:好吧,我已经跟踪这是IE浏览器不喜欢的百分比大小要选择元素上设置(虽然它拿起这个值了罚款origionally,你操纵后它打破元素以某种方式)。执行下面的2行的jQuery似乎解决该问题:
$('.dual-box > .list-box > select').height($('.dual-box').height());
$('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);
我有点希望这不会成为一个黑客的顶级黑客攻击,但不幸的是它似乎的。有没有人有解决这个问题的一个干净的方式?
解决方案
我已经决定要回答我的问题,至少直到有人提供了一个“更好”的解决方案。该解决方案是我的第二更新,其中,I“黑客”元件的位置与由JavaScript重新定位。
<强>更新2:强>好,我已经追踪这 将IE不顺心的百分比大小来 选择元件上设置(尽管 它拿起这个值了罚款 origionally,之后你分手 操纵不知何故元素)。 执行以下2行的 jQuery的似乎是解决这个问题:
$('.dual-box > .list-box > select').height($('.dual-box').height()); $('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);
我有点希望这不 成为一个黑客的顶级黑客攻击,但 不幸的是它似乎的。不 任何人有解决的清洁方式 这个问题?
其他提示
在IE中的选择框是通过默认的最宽项目的宽度,并且它的下拉列表总是相同的宽度选择框。在大多数其他浏览器下拉列表可以比选择框宽,所以它们不是作为急于改变选择框的大小。
如果指定了宽度为选择框,IE应遵循。你就必须指定的宽度大于最宽的项目宽,否则会在下拉列表中被裁剪。