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

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

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

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

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


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


DWZ (JUI) 教程 可以伸缩的查询面板 (searchBar)_第1张图片DWZ (JUI) 教程 可以伸缩的查询面板 (searchBar)_第2张图片


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

你可能感兴趣的:(search)