خيارات إلحاق باختيار ، باستخدام jQuery ، تغيير حجمه؟
-
25-09-2019 - |
سؤال
في هذا المثال الصغير ، ولكن الكامل ، أحاول إعادة إنشاء مكون واجهة المستخدم مربع قائمة مزدوجة. أود ببساطة أن أكون قادرًا على نقل العناصر من صندوق إلى آخر. (سيكون من الجيد أن أتمكن من إضافة الفرز ، لكن عقبة واحدة في وقت أعتقد!)
أواجه مشكلة في هذا الرمز في IE7 (FF ، Chrome ، يبدو أن الأوبرا تعمل بشكل جيد). كلما قمت بنقل العناصر من قائمة إلى أخرى ، فإن مربع SELECT يرقص (يتقلص) كل تكرار. لست متأكدًا حقًا من أين أخطأ هنا ، هل يمكن لأي شخص أن يلق بعض البصيرة؟
<!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: حسنًا ، لقد تتبعت هذا الأمر ليكون لا يعجبك أحجام النسبة المئوية ليتم تعيينه على العنصر المحدد (على الرغم من أنه يختار هذه القيمة بشكل جيد أصليًا ، إلا أنه يكسر بعد معالجة العنصر بطريقة أو بأخرى). يبدو أن تنفيذ الخطين التاليين من jQuery يحل المشكلة:
$('.dual-box > .list-box > select').height($('.dual-box').height());
$('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);
كنت آمل أن أكون هذا مخترقًا على رأس الاختراق ، لكن للأسف يبدو. هل لدى أي شخص طريقة نظيفة لحل هذه المشكلة؟
المحلول
لقد قررت الإجابة على سؤالي ، على الأقل حتى يقدم شخص ما حلًا "أفضل". الحل هو التحديث الثاني لي ، حيث "اخترق" موضع العناصر مع إعادة وضعه بواسطة JavaScript.
تحديث 2: حسنًا ، لقد تتبعت هذا الأمر ليكون لا يعجبك أحجام النسبة المئوية ليتم تعيينه على العنصر المحدد (على الرغم من أنه يختار هذه القيمة بشكل جيد أصليًا ، إلا أنه يكسر بعد معالجة العنصر بطريقة أو بأخرى). يبدو أن تنفيذ الخطين التاليين من jQuery يحل المشكلة:
$('.dual-box > .list-box > select').height($('.dual-box').height()); $('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);
كنت آمل أن أكون هذا مخترقًا على رأس الاختراق ، لكن للأسف يبدو. هل لدى أي شخص طريقة نظيفة لحل هذه المشكلة؟
نصائح أخرى
في IE ، يكون مربع SELECT افتراضيًا عرضًا لأوسع عنصر ، كما أن قائمة المنسدلة هي دائمًا نفس عرض مربع تحديد. في معظم المتصفحات الأخرى ، يمكن أن تكون قائمة القائمة المنسدلة أوسع من مربع SELECT ، لذلك فهي ليست حريصة على تغيير حجم المربع المحدد.
إذا حددت عرضًا لمربع تحديد ، فيجب أن يتبع ذلك. يجب عليك تحديد عرض أوسع من العنصر الأوسع ، وإلا فإنه سيتم اقتصاصه في قائمة القائمة المنسدلة.