Anexando opções a uma seleção, usando jQuery, redimensiona?
https://stackoverflow.com/questions/2191547
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Neste exemplo pequeno, mas completo, estou tentando recriar um componente de interface do usuário da caixa de listagem dupla. Eu simplesmente desejo poder mover itens de uma caixa para outra. (Seria bom se eu pudesse adicionar classificação, mas um obstáculo de cada vez eu acho!)
Estou tendo um problema com este código no IE7 (ff, Chrome, Opera parece funcionar bem). Sempre que movo os itens de uma lista para outra, a caixa selecionada redimensiona (encolhe) cada iteração. Não tenho muita certeza de onde estou dando errado aqui, alguém pode perder algumas dicas?
<!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>
Obrigado,
Atualizar: Eu tenho tentado olhar para isso de todos os ângulos. Eu me perguntei se meu JS era o culpado, mas olhar para isso através do Firefox parece descartar isso. Eu encontrei um bug do navegador aqui?
Atualização 2: Ok, eu rastreei isso como o IE não está gostando de tamanhos de porcentagem a serem definidos no elemento selecionado (embora ele atenda esse valor de origem, ele quebra depois de manipular o elemento de alguma forma). A execução das duas linhas a seguir de jQuery parece resolver o problema:
$('.dual-box > .list-box > select').height($('.dual-box').height());
$('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);
Eu esperava que isso não me tornasse um hack em cima de um hack, mas infelizmente parece. Alguém tem uma maneira limpa de resolver esse problema?
Solução
Decidi responder à minha própria pergunta, pelo menos até que alguém forneça uma solução "melhor". A solução é minha segunda atualização, onde eu "hackear" a posição dos elementos com reposicionamento por JavaScript.
Atualização 2: Ok, eu rastreei isso como o IE não está gostando de tamanhos de porcentagem a serem definidos no elemento selecionado (embora ele atenda esse valor de origem, ele quebra depois de manipular o elemento de alguma forma). A execução das duas linhas a seguir de jQuery parece resolver o problema:
$('.dual-box > .list-box > select').height($('.dual-box').height()); $('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);Eu esperava que isso não me tornasse um hack em cima de um hack, mas infelizmente parece. Alguém tem uma maneira limpa de resolver esse problema?
Outras dicas
No IE, a caixa de seleção é, por padrão, a largura do item mais largo e sua lista suspensa é sempre a mesma largura que a caixa de seleção. Na maioria dos outros navegadores, a lista suspensa pode ser mais larga que a caixa de seleção, para que não estejam tão ansiosos para alterar o tamanho da caixa de seleção.
Se você especificar uma largura para a caixa de seleção, ou seja, deve seguir isso. Você teria que especificar uma largura mais ampla que o item mais largo, caso contrário, eles serão cortados na lista suspensa.
