DWZ (JUI) 教程 可以伸缩的查询面板 （searchBar）

DWZ (JUI) 教程  可以伸缩的查询面板 （searchBar）

  最近有这样的需求，一个页面查询条件特别多，一次全部展示出来的话就占用大量的空间，所以分成了两类，简单搜索和高级搜索，当点击高级搜索的时候就会全部显示。

这样就存在一个问题，页面（navTab，dialog）上下pageHeader panelBar 高度是有 layoutH值决定的，如果上面的面板变高，就会把下面的分页标签撑出，

解决的方法就是 当改变searchpanel的高度时，获取前后的高度差，修改当前页面元素的layoutH值重新layout一下。

[html] view plain copy

1.            $("document").ready(function(){  
2. $("#gjjs").click(function(){  
3.         $this = $(this);  
4.         var yh = $("#workplan_search").height();   
5.         if($this.text()=='高级检索'){  
6.             $this.text('简单检索')  
7.         }else{  
8.             $this.text('高级检索')  
9.         }  
10.         $("#workplan_search .complex").toggle();  
11.         var xh = $("#workplan_search").height();  
12.           
13.         var $panel=$this.parents('.unitBox:first').find("[layoutH]").each(function(){  
14.                 $(this).attr("layoutH",parseInt($(this).attr("layoutH"))+(xh-yh));  
15.                 $(this).layoutH();  
16.         });  
17.           
18.         return false;     
19. });  

以上是改变前后的效果图，希望对大家有帮助