Вопросы Теги

Добавление опций к выбору, использование jQuery, изменяют размер его?

В этом небольшой, но полный пример я пытаюсь воссоздать двойное поле списка компонент UI. Я просто хочу смочь переместить объекты от одного поля до другого. (Было бы хорошо, если я мог бы добавить сортировку, но одно препятствие за один раз я думаю!)

Я получаю проблему с этим кодом в IE7 (FF, Chrome, Opera, все, кажется, хорошо работают). Каждый раз, когда я перемещаю объекты от одного списка до другого, избранное поле изменяет размер (уменьшает) каждое повторение. Я не действительно уверен, где я иду не так, как надо здесь, кто-либо может потерять некоторое понимание?

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

Я был видом надежды на это для не становления взломом сверх взлома, но к сожалению это кажется. У кого-либо есть очевидный способ решения этого вопроса?

6
задан Mike 3 February 2010 в 14:03
поделиться

2 ответа

Я решил ответить на свой вопрос, по крайней мере, до тех пор, пока кто-нибудь не предложит «лучшее» решение. Решение - мое второе обновление, где я «взламываю» положение элементов с репозиционированием по javascript.

Обновление 2: Хорошо, я отследил это, чтобы IE не хотел, чтобы процентные размеры устанавливались в элементе select (хотя выбирает это value up fine изначально он ломается после того, как вы каким-то образом манипулируете элементом). Выполнение следующих двух строк jQuery, похоже, решает проблему: 

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

Я как бы надеялся, что это не приведет к {{1} } стать хакером поверх хака, но , к сожалению, кажется, что из. Есть ли у кто-нибудь чистый способ решить эту проблему?

2
ответ дан 17 December 2019 в 18:15
поделиться

Согласно данной статье: https://web.archive.org/web/1/http ://articles.techrepublic% 2ecom% 2ecom/5100-10878 _ 11-5109829 .html

Циклическая ссылка является проблемой, которая возникает при наличии два объекта, которые относятся к каждому другое. Допустим, у вас есть класс А, который относится к классу B. Если класс B также относится к классу A, то у нас есть циклическая ссылка. Это происходит в много ситуаций. Типичный пример для это отношение «родитель-потомок» между объектами, где находится ребенок взаимодействует с родительским объектом и также содержит ссылку на родителя объект. Это может привести к объектам это не будет очищено до приложение было закрыто. .NET способ сбора мусора решает проблема циклической ссылки потому что сборщик мусора способен для очистки любого объекта, который доступно из корня.

ПРАВКА:
Судя по этому посту: http://blogs.msdn.com/abhinaba/archive/2009/01/27/back-to-basics-reference-counting-garbage-collection.aspx кажется, что сбор мусора .Net не основан на ссылочном подсчете для сбора мусора.

Еще одна статья, которую стоит прочитать (подробно объясняет сбор мусора): http://www.simple-talk.com/dotnet/.net-framework/understanding-garbage-collection-in-.net/

-121--3894440-

Структура IplImage имеет поле с именем colorModel , состоящее из 4 символов. К сожалению, OpenCV игнорирует это поле. Но это поле можно использовать для сохранения трека различных цветовых моделей.

-121--1265551-

В IE поле выбора по умолчанию соответствует ширине самого широкого предмета, а раскрывающийся список всегда совпадает с полем выбора. В большинстве других браузеров раскрывающийся список может быть шире поля выбора, поэтому они не так стремятся изменить размер поля выбора.

Если вы указываете ширину поля выбора, IE должен следовать за этим. Необходимо указать ширину, превышающую ширину самого широкого предмета, в противном случае они будут обрезаны в раскрывающемся списке.

1
ответ дан 17 December 2019 в 18:15
поделиться
Другие вопросы по тегам:

Похожие вопросы: