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

这样就存在一个问题,页面(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;
});

以上是改变前后的效果图

可以伸缩的查询面板 (searchBar)的更多相关文章

  1. Ext查询面板收缩时,文本内容垂直显示

    css添加如下样式/***查询面板收缩时,文本内容垂直显示**/.x-layout-collapsedText{ width:16px; font-size:11px; word-wrap:break ...

  2. ExtJS4 自己定义基于配置的高级查询1

    今天在编码过程中遇到一个问题,临时还没解决,先记录下来 上面是我做的高级查询面板..字段名和值都是读取配置文件,依据用户选择不同的字段名,自己主动载入不同的值列表,关系是与或 问题来了,我在字段名那个 ...

  3. 利用WPF建立自己的3d gis软件(非axhost方式)(九)SDK自带部分面板的调用

    原文:利用WPF建立自己的3d gis软件(非axhost方式)(九)SDK自带部分面板的调用 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bP ...

  4. [译]SSAS下玩转PowerShell(二)

    上一篇中简单的介绍了SSAS下的PowerShell,这一篇会演示更多的操作,比如根据当前时间创建备份,使用变量去指定处理哪一个分区,以及用XMLA脚本去创建分区,和在PowerShell中调用Pow ...

  5. Linux终端杀手、程序员利器-Tmux

        Send article as PDF      SA.Coder.经常远程.还在开一堆终端?试试 Tmux 吧,一个窗口就搞定. 目录 0.0.0.1 Tmux ? Tmux 是一个终端复用 ...

  6. 报表性能优化方案之单数据集分页SQL实现层式报表

    1.概述 我们知道,行式引擎按页取数只适用于Oracle,mysql,hsql和sqlserver2008及以上数据库,其他数据库,如access,sqlserver2005,sqlite等必须编写分 ...

  7. SQL Server 2014 BI新特性(一)五个关键点带你了解Excel下的Data Explorer

    Data Explorer是即将发布的SQL Server 2014里的一个新特性,借助这个特性讲使企业中的自助式的商业智能变得更加的灵活,从而也降低了商业智能的门槛. 此文是在微软商业智能官方博客里 ...

  8. Mac键位设定和Xcode快捷键(自己总结,持续更新)

    一. Xcode实用快捷键: Cmd + b                     编译 Cmd + r                      运行 Cmd + z               ...

  9. SQL Server 2014新特性:五个关键点带你了解Excel下的Data Explorer

    SQL Server 2014新特性:五个关键点带你了解Excel下的Data Explorer Data Explorer是即将发布的SQL Server 2014里的一个新特性,借助这个特性讲使企 ...

随机推荐

  1. android学习记录(十三)Task 和 Activity 回退栈操作。

    首先说一下Task是一个什么概念吧:Task是一个包括activity的列表.没 错.简单的说就是依照启动的先后来排队的一个队列.Back Stack.就是回退栈的意思:那么有什么用?Back Sta ...

  2. CodeForces 164A Variable, or There and Back Again 搜索

    Variable, or There and Back Again 题目连接: http://codeforces.com/problemset/problem/164/A Description L ...

  3. Codeforces Gym 100231L Intervals 数位DP

    Intervals 题目连接: http://codeforces.com/gym/100231/attachments Description Start with an integer, N0, ...

  4. Educational Codeforces Round 4 B. HDD is Outdated Technology 暴力

    B. HDD is Outdated Technology 题目连接: http://www.codeforces.com/contest/612/problem/B Description HDD ...

  5. C++ Code_animateCtrl

      Code:: 播放     if (!m_animate1.Open("C:\\copy.avi"))     {         MessageBox("NULL& ...

  6. [MongoDB] Insert, find -- 1

    MongoDB is JSON Document: How to start MongoDB client: mongod //start the server mongo // start the ...

  7. Android NDK: WARNING: APP_PLATFORM android-14 is larger than android:minSdkVersion 8

    在使用Eclipse 直接编译NDK,有时候会报类似以下错误 Android NDK: WARNING: APP_PLATFORM android-14 is larger than android: ...

  8. JavaWeb学习总结

    http://www.cnblogs.com/xdp-gacl/tag/JavaWeb%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/ http://www.cnblogs. ...

  9. 程序集、应用程序配置及App.config和YourSoft.exe.config .

    转自:http://www.cnblogs.com/luminji/archive/2010/10/21/1857339.html 什么是程序集 程序集标识属性 强名称的程序集 强名称工作原理 配置文 ...

  10. 关于 ArtifactTransferException: Failure to transfer

    eclipse 在导入maven project后,pom.xml有可能出现这种错误. 这里update maven project解决了:右键点击Maven项目->Maven->Upda ...