1.0 引用的js,css

    <link href="/Content/scripts/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" />

    <link href="/Content/scripts/ligerUI/skins/ligerui-icons.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.8.2.js"></script>

    <script src="/Content/scripts/ligerUI/js/ligerui.all.js"></script>

2.0 用js代码设置ligerUI布局和Tab高度

 <script>

        var tab;

        $(function () {

            $("#layout1").ligerLayout({ leftWidth: 200, topHeight: 80 });

            $("#accordion1").ligerAccordion({ height: 300 });

            //重要的代码,设置新增加的tab的高度等于center div的高度.

            var height = $(".l-layout-center").height();

            tab = $("#tab1").ligerTab({ height: height });

        });

        //可以动态增加一个tab标签页,但是元素有哪些

        function addTab(url, text, tabid) {

            tab.addTabItem({ url: url, text: text, tabid: tabid });

        }

    </script>

3.0 简单的设置样式

    <style type="text/css">

        body { padding: 10px; margin: 0; }

        #layout1 { width: 100%; margin: 40px; height: 400px; margin: 0; padding: 0; }

        #accordion1 { height: 270px; }

        h4 { margin: 20px; }

        #accordion1 ul li { font-size: 14px; margin-left: 15px; }

        a { color: black; text-decoration: none; }

        a:hover { color: #ff6a00; }

    </style>

4.0 body中的内容

<body style="padding:10px">

    <div id="layout1">

        <div position="left" title="功能列表">

            <div id="accordion1">

                <div title="项目管理">

                    <ul>

                        <li><a href="javascript:void(0)" onclick="addTab( 'http://www.youku.com','指定队伍',  1 )">指定队伍</a></li>

                        <li><a href="javascript:void(0)" onclick="addTab( 'http://www.jd.com','查看项目',  2 )">查看项目</a></li>

                    </ul>

                </div>

                <div title="用户管理">

                    <ul>

                        <li><a href="javascript:void(0)" onclick="addTab('http://www.baidu.com','用户审核', 3 )">用户审核</a> </li>

                        <li><a href="javascript:void(0)" onclick="addTab( 'http://www.sina.com','查看用户', 4 )">查看用户</a></li>

                    </ul>

                </div>

                <div title="其他" style="padding:10px">

                    其他内容

                </div>

            </div>

        </div>

        <div position="center" id="tab1">

        </div>

        <div position="top" style="line-height: 80px;">

            <span style="font-size: 28px;font-weight: bolder;font-family:楷体;">超级管理员后台</span>

            <span><a href='@Url.Action("LoginOut","Admin")' style="margin-right: 20px;font-size: 18px;color: #0000cd;float: right;">退出</a></span>

        </div>

        <div position="bottom"></div>

    </div>

</body>

ligerUI布局时,Center中的Tab高度太小问题解决的更多相关文章

  1. easyui dialog 中 panel-body 高度太小出现 滚动条 的原因

    easyui dialog 中 panel-body 高度太小出现 滚动条 的原因: dialog 高度比 iframe 高度大79 就可以了 $.editcompanypersoninfo = fu ...

  2. IOS中录音后再播放声音太小问题解决

    1.AVAudioSessionCategory说明 1.1 AVAudioSessionCategoryAmbient 或 kAudioSessionCategory_AmbientSound 用于 ...

  3. WebSphere中数据源连接池太小导致的连接超时错误记录

    WebSphere中数据源连接池太小导致的连接超时错误记录. 应用连接超时错误信息: [// ::: CST] webapp E com.ibm.ws.webcontainer.webapp.WebA ...

  4. eclipse下java中凝视字体太小和xml中中文字体太小问题解决方法

    我们在win7下进行android应用开发.须要搭建对应的开发环境.如今普遍基本上都是eclipse+adt+sdk,在本人搭建完环境后,发现eclipse下.java中的凝视和xml中的中文字体变得 ...

  5. flex布局时，内容区域自适应高度

    页面元素高度固定,中间的元素需要撑满屏幕,或者内容多时显示滚动条时,我们要把父元素设置为height:100vh <div class="parent"> <di ...

  6. ExtJS4中设置tabpanel的tab高度问题

    最近碰到个问题,在ExtJS中应该如何设置tabpanel的tab的高度?因为默认情况下,tab的高度太矮了,以至于tab的标题底部字都被截掉.设置了个tabpanel.minHeight = ‘50 ...

  7. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  8. ListView点击Item展开隐藏项（单项展开、多项展开、复杂布局时的展开处理）

    手机屏幕毕竟有限,当我们要显示较多数据时便不得不舍去一些次要信息.将主要信息优先显示,也使显示效果更加简洁美观.遇到类似的需求,我们使用最多的就是 ListView ,而假设每次点击一个 Item 都 ...

  9. (iOS)使用auto layout进行复杂布局时，UILabel的相关trick

    本文转载至 http://blog.csdn.net/madongchunqiu/article/details/47960745  本文首发于CSDN:http://blog.csdn.net/ma ...

随机推荐

  1. angularjs组件之input mask

    今天将奉献一个在在几个angularjs项目中抽离的angular组件 input mask.在我们开发中经常会对用户的输入进行控制,比如日期,货币格式,或者纯数字格式之类的限制,这就是input m ...

  2. 跟我一起云计算（4）——lucene

    了解lucene的基本概念 这一部分可以参考我以前写的博客: http://www.cnblogs.com/skyme/tag/lucene/ lucene是什么 下图是一个很好的说明: 1.luce ...

  3. UISwitch

    UISwitch *noticeSwtich = [[UISwitch alloc] initWithFrame:CGRectMake(0, 0, 51, 31)]; // noticeSwtich. ...

  4. 知方可补不足~用CDC功能来对数据库变更进行捕捉

    回到目录 如果我们希望监视一个数据表的变化,在sql2008之前的版本里,在数据库端可能想到的只有触发器,或者在程序端通过监视自己的insert,update,delete来实现相应的功能,这种实现无 ...

  5. Atitit.软件中见算法 程序设计五大种类算法

    Atitit.软件中见算法 程序设计五大种类算法 1. 算法的定义1 2. 算法的复杂度1 2.1. Algo cate2 3. 分治法2 4. 动态规划法2 5. 贪心算法3 6. 回溯法3 7. ...

  6. Atitit 图像处理30大经典算法attilax总结

    Atitit 图像处理30大经典算法attilax总结 1. 识别模糊图片算法2 2. 相似度识别算法(ahash,phash,dhash)2 3. 分辨率太小图片2 4. 横条薯条广告2 5. 图像 ...

  7. Android笔记——活动的生命周期

    一.活动的重要性 掌握活动的生命周期对任何 Android 开发者来说都非常重要,当你深入理解活动的生命周期之后,就可以写出更加连贯流畅的程序,并在如何合理管理应用资源方面,你会发挥的游刃有余.你的应 ...

  8. sql语句执行顺序

    首先来一张朋友传给我的图 FORM: 对FROM的左边的表和右边的表计算笛卡尔积.产生虚表VT1 ON: 对虚表VT1进行ON筛选,只有那些符合<join-condition>的行才会被记 ...

  9. Python中的字符串与字符编码

    本节内容: 前言 相关概念 Python中的默认编码 Python2与Python3中对字符串的支持 字符编码转换 一.前言 Python中的字符编码是个老生常谈的话题,同行们都写过很多这方面的文章. ...

  10. HTML5语义标签的实践

    <article> 定义一篇文章 论坛发帖 博客文章 一篇文章 <article>  <h1>标题</h1>  <p>内容</p> ...