easyui menubutton combobox 被遮盖问题

 

 

如图一所示，menubutton 中的 combobox 被遮盖 z-Index 不够。这是作者给出的解决方案

 

 1 <a href="#" class="easyui-menubutton" data-options="menu:'#mm1'">Search</a>
 2 <div id="mm1" class="menu-content" data-options="hideOnUnhover:false">
 3     <select class="easyui-combobox" data-options="
 4             onShowPanel:function(){
 5                 $(this).combobox('panel').panel('panel').css('z-index',$.fn.menu.defaults.zIndex++);
 6             }
 7             ">
 8         <option>Item1</option>
 9         <option>Item2</option>
10         <option>Item3</option>
11     </select>
12 </div>

 

 1 <script>
 2 $(function(){
 3     $(document).unbind('.combo').unbind('.menu')
 4         .bind('mousedown.combo', handler)
 5         .bind('mousedown.menu', handler);
 6     function handler(e){
 7         var d = $(e.target).closest('span.combo,div.combo-p,div.menu');
 8         if (d.hasClass('combo-p')){
 9             d.find('.combo-f').each(function(){
10                 var p = $(this).combo('panel');
11                 if (p.is(':visible')){
12                     p.panel('close');
13                 }
14             });
15             return;
16         } else if (d.hasClass('combo')){
17             return;
18         } else if (d.hasClass('menu')){
19             return;
20         } else {
21             $('body>div.combo-p>div.combo-panel:visible').panel('close');
22             $('body>div.menu-top:visible').menu('hide');
23         }
24     }
25 });
26 </script>
posted @ 2014-01-20 11:27  少爵  阅读(1332)  评论(0)  编辑  收藏  举报