2011-06-25 47 views
0

第一个问题,为什么是这种风格问题与jQuery的对话框插件

label, input { display:block; } 

减少dropdownchecklist下拉列表(文字出现在该复选框下方)的宽度是多少?该风格是程序的其他部分所需要的,所以消除风格并不那么简单。

第二个问题:如果我在jQuery对话框之外使用dropdownchecklist插件,它完美地工作。但是,如果将它添加到对话框中,宽度将减小到零,即使我在Firebug中调整宽度,它也不起作用(单击不会生成下拉列表)。 's9'id来自dropdownchecklist演示代码。

$(document).ready(function() {   

     $("#s9").dropdownchecklist({ textFormatFunction: function(options) { 
      var selectedOptions = options.filter(":selected"); 
      var countOfSelected = selectedOptions.size(); 
      switch(countOfSelected) { 
       case 0: return "Nobody"; 
       case 1: return selectedOptions.text(); 
       case options.size(): return "Everybody"; 
       default: return countOfSelected + " People"; 
      } 
     } }); 

以下代码是从对话框演示中获取的。

<div class="demo"> 
     <div id="dialog-form" title="Create new user"> 
      <p class="validateTips">All form fields are required.</p>    
      <form> 
      <fieldset> 
       <label for="userid">User ID</label> 
       <input type="text" name="userid" id="userid" class="text ui-widget-content ui-corner-all" />     
       <label for="password">Password</label> 
       <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> 
       <label for="email">email</label> 
       <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />              
       <label for="locked">Locked</label> 
       <input type="checkbox" name="locked" id="locked" value="" >      
       <select id="s9" class="s9" multiple="multiple" > 
       <option>Alice</option> 
       <option>Bob</option> 
       <option>Christian</option> 
       <option>Daniel</option> 
       </select>     
      </fieldset>  
     </form> 
</div> 

我需要更改哪些内容才能使dropdownchecklist在对话框中工作?普通的下拉框工作得很好,但我希望复选框可以让用户更容易理解。

这太问题听起来像是我的问题,但它似乎并没有为我工作: jQuery Plugin does not work in a Modal

谢谢。

回答

1

关于第一个问题:块级元素(如DIV,P等,或者用display: block作为块级别的元素)通常从新行开始。

您可以改为使用display: inline-block,但它在旧版IE中支持较差(在IE6/7中部分支持,旧版本不支持)。一个更好的办法很可能是把每个label + input一对<div> S和使用:

label, input { 
    display:block; 
    float: left; 
} 

关于你提到的第二个问题,我们可以看到一个活生生的例子或jQuery代码?