修改LigerUI的导航栏，改为Tab标签模式

太阳不下山

　　修改LigerUI的导航栏，改为Tab标签模式
　　

　　LigerUI导航栏本身是没有tab标签模式的，但是实际上，很多时候标签能能更好的展示业务，将导航的内容按照类目进行划分，避免一个里面太多的情况。
　　

　　下面是我改造后的效果图，如下：
　　

　　

　　ligerui是一个不错的免费开源ui框架，功能还是很强大的，但是有些地方也做的不够好，比如表单的自适应布局，树，布局等等，但是相信会越来越好。这里给出我改造后代码：
　　

<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>导航</title>
  <link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.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/ligerTab.js" type="text/javascript"></script>
  <script src="../lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#layout").ligerLayout({topHeight: 40, leftWidth: 200});
      var ttt = "<div id="tab" style="width: 160px">\n" +
          "  <div title="业务"></div>\n" +
          "  <div title="配置"></div>\n" +
          "</div>";
      $(".l-layout-header-inner").html(ttt);
      $("#tab").ligerTab();
    })
  </script>
</head>
<body>
<div id="layout">
  <div position="top"></div>
  <div position="left"></div>
  <div position="center"></div>
  <div position="bottom"></div>
</div>
</body>
</html>

　　

　　

　　欢迎交流！
　　

　　

[JavaScript] 修改LigerUI的导航栏，改为Tab标签模式

相关帖子

如何修改pdf中的文字内容

pdf修改器修改文字步骤

pdf文件怎么修改文字内容

如何在pdf上修改文字内容

修改pdf文件内容教程

安全模式下一键还原操作方法

电脑护眼模式设置步骤

预留手机号修改方法

常用的css伪类a标签

Discuz X重置应用中心数据的方法

太阳不下山 LV4