追加オプションを選択し、jQueryズです。

StackOverflow https://stackoverflow.com/questions/2191547

質問

この小さいものの、全例では、私を再現しようとのデュアルリストボックスのUI部品です。だけどのような希望を移動することができ項目からのボックスです。(皆さんのファンダメンタルズ分別なハードルの時だと思い!)

いくことをコードIE7(FF、クロム、オペラな作).また移動項目一覧他の選択ボックスサイズ(縮小)各なります。んだいかここで、誰でもできるのでつinsight?

<!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);

したがってこなハッキングの上にハックが、残念ながらそうです。は誰でも、決して綺麗というレベルを解決す。

役に立ちましたか？

解決

私は誰かが「よりよい」ソリューションを提供し、少なくともまでは、自分の質問に答えることにしました。解決策は、私はジャバスクリプトによって再配置と要素の位置を「ハック」二度目の更新です。

  

のアップデート2：さて、私はこれを追跡してきたを   IEはに割合の大きさを好きではないこと   （ただし、select要素に設定されます   それは罰金、この値を選びます   origionally、それはあなたの後に壊れます   ）何とか要素を操作します。   以下の2行を実行します   jQueryのは、問題を解決しているようだ。

$('.dual-box > .list-box > select').height($('.dual-box').height());
$('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);
     

私はちょっとないように、このために期待していました   ハッキングの上にハックになりますが、   残念ながら、それはのように思われます。 DOES   誰もが解決のきれいな方法を持っています   この問題？

他のヒント

でIE選択ボックスは、デフォルトでは最も広いアイテムの幅であり、そしてそれのドロップダウンリストには、常に選択ボックスと同じ幅です。彼らは選択ボックスのサイズを変更することが熱望してませんので、他のほとんどのブラウザではドロップダウンリストには、選択ボックスより広くすることができます。

あなたが選択ボックスの幅を指定した場合は、

、IEはそれに従ってください。あなたは、そうでない場合は、ドロップダウンリストに切り取られます、最も広い項目よりも広い幅を指定する必要があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top