zoukankan      html  css  js  c++  java
  • 可以伸缩的查询面板 (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

    以上是改变前后的效果图

  • 相关阅读:
    仿淘宝首页产品展示橱窗
    Browserwidth defined font size自定义容器和字体大小
    fso操作大全
    .net学习区
    IE与Firefox的CSS兼容大全
    网易娱乐头图新闻代码
    PHPAccess数据库操作类
    锁定表列
    美化列表
    web_custom_request应用示例
  • 原文地址:https://www.cnblogs.com/donchen/p/4112968.html
Copyright © 2011-2022 走看看