如何解决ligerUI布局时Center中的Tab高度大小


Posted in Javascript onNovember 24, 2015

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学习笔记之布局篇 layout

不说废话了,直接给大家贴代码了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>布局实力篇之自动适应窗口 高度</title>
  <link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  <!--<link href="../lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />--> 我用的另一套皮肤
  <!--我添加了自定义的样式-->
  <link href="../style/site.css" rel="stylesheet" type="text/css" />
  <script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
  <script src="../lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#container").ligerLayout({ leftWidth: 200 }); //这一句可是关键啊
    });
  </script>
</head>
<body>
  <div id="top">
    其实俺和他们不是一起的,俺是独立的一部分
  </div>
  <div id="container">
    <div position="left"> 这里也要注意啊
    </div>
    <div position="center" title="标题"> 加个标题更好玩
    </div>
  </div>
</body>
</html>

样式文件

* { margin: 0px; padding: 0px; }
body { padding: 5px; margin: 0; padding-bottom: 15px; }
#top { height: 80px; margin-bottom: 3px; background-color:Lime }

总结:

只需要将容器转换为一个ligerlayout对象就行了

别忘了 position 属性啊

顺便来张效果图

如何解决ligerUI布局时Center中的Tab高度大小

Javascript 相关文章推荐
限制文本框输入N个字符的js代码
May 13 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
JS实现图片高亮展示效果实例
Nov 24 #Javascript
JS截取字符串实例详解
Nov 24 #Javascript
超漂亮的jQuery图片轮播特效
Nov 24 #Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 #Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 #Javascript
Bootstrap每天必学之按钮(一)
Nov 24 #Javascript
JavaScript DOM 学习总结(五)
Nov 24 #Javascript
You might like
那些年一起学习的PHP(一)
2012/03/21 PHP
Linux中为php配置伪静态
2014/12/17 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
Python itertools模块详解
2015/05/09 Python
python 生成器协程运算实例
2017/09/04 Python
python list格式数据excel导出方法
2018/10/31 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
Python简易版图书管理系统
2019/08/12 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
珍惜水资源建议书
2014/03/12 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
教师节简报
2015/07/20 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记