随笔 - 130  文章 - 0  评论 - 7  阅读 - 32万

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

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

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

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

复制代码
 $("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
复制代码

 

 

以上是改变前后的效果图

posted on   donchen-c  阅读(506)  评论(2编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示