码迷,mamicode.com
首页 > 其他好文 > 详细

可以伸缩的查询面板 (searchBar)

时间:2014-11-21 16:10:51      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   sp   on   

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

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

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

bubuko.com,布布扣
 $("document").ready(function(){  
$("#gjjs").click(function(){  
        $this = $(this);  
        var yh = $("#workplan_search").height();   
        if($this.text()==‘高级检索‘){  
            $this.text(‘简单检索‘)  
        }else{  
            $this.text(‘高级检索‘)  
        }  
        $("#workplan_search .complex").toggle();  
        var xh = $("#workplan_search").height();  
          
        var $panel=$this.parents(‘.unitBox:first‘).find("[layoutH]").each(function(){  
                $(this).attr("layoutH",parseInt($(this).attr("layoutH"))+(xh-yh));  
                $(this).layoutH();  
        });  
          
        return false;     
});  
View Code

 

bubuko.com,布布扣bubuko.com,布布扣

 

以上是改变前后的效果图

可以伸缩的查询面板 (searchBar)

标签:style   blog   http   io   ar   color   os   sp   on   

原文地址:http://www.cnblogs.com/donchen/p/4112968.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!