Heim >Web-Frontend >js-Tutorial >So lösen Sie die Tab-Höhengröße in der Mitte während des LigerUI-Layouts

So lösen Sie die Tab-Höhengröße in der Mitte während des LigerUI-Layouts

不言Original: 2018-07-02 14:27:301494Durchsuche

In diesem Artikel wird hauptsächlich beschrieben, wie die relevanten Informationen zur Tab-Höhengröße in der Mitte während des LigerUI-Layouts gelöst werden. Freunde, die sie benötigen, können sich auf die in

1.0

  <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 LigerUI-Layout und Tab-Höhe mit JS-Code festlegen

<script>
    var tab;
    $(function () {
      $("#layout1").ligerLayout({ leftWidth: 200, topHeight: 80 });
      $("#accordion1").ligerAccordion({ height: 300 });
      //重要的代码,设置新增加的tab的高度等于center p的高度.
      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 Einfacher Einstellungsstil

  <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 Zoll Körperinhalt

<body style="padding:10px">
  <p id="layout1">
    <p position="left" title="功能列表">
      <p id="accordion1">
        <p title="项目管理">
          <ul>
            <li><a href="javascript:void(0)" onclick="addTab( &#39;http://www.youku.com&#39;,&#39;指定队伍&#39;, 1 )">指定队伍</a></li>
            <li><a href="javascript:void(0)" onclick="addTab( &#39;http://www.jd.com&#39;,&#39;查看项目&#39;, 2 )">查看项目</a></li>
          </ul>
        </p>
        <p title="用户管理">
          <ul>
            <li><a href="javascript:void(0)" onclick="addTab(&#39;http://www.baidu.com&#39;,&#39;用户审核&#39;, 3 )">用户审核</a> </li>
            <li><a href="javascript:void(0)" onclick="addTab( &#39;http://www.sina.com&#39;,&#39;查看用户&#39;, 4 )">查看用户</a></li>
          </ul>
        </p>
        <p title="其他" style="padding:10px">
          其他内容
        </p>
      </p>
    </p>
    <p position="center" id="tab1">
    </p>
    <p position="top" style="line-height: 80px;">
      <span style="font-size: 28px;font-weight: bolder;font-family:楷体;">超级管理员后台</span>
      <span><a href=&#39;@Url.Action("LoginOut","Admin")&#39; style="margin-right: 20px;font-size: 18px;color: #0000cd;float: right;">退出</a></span>
    </p>
    <p position="bottom"></p>
  </p>
</body>

Das Folgende ist ein Artikel über das Layout des LigerUI-Lernnotizen-Layouts

Hör auf, Unsinn zu reden, ich werde den Code direkt für dich veröffentlichen.

<!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>
  <p id="top">
    其实俺和他们不是一起的，俺是独立的一部分
  </p>
  <p id="container">
    <p position="left"> 这里也要注意啊
    </p>
    <p position="center" title="标题"> 加个标题更好玩
    </p>
  </p>
</body>
</html>

Stildatei

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

Zusammenfassung:

Konvertieren Sie den Container einfach in ein Ligerlayout-Objekt

Nicht Vergessen Sie das Positionsattribut

Hier ist übrigens eine Darstellung

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Lernen aller hilfreich sein , mehr Bitte beachten Sie die chinesische PHP-Website für verwandte Inhalte!

Verwandte Empfehlungen:

Über $apply und die optimierte Verwendung in Angularjs

Über jquery ajaxfileuplod Hochladen von Dateien, Essyui-Laoding-Effekt

Das obige ist der detaillierte Inhalt vonSo lösen Sie die Tab-Höhengröße in der Mitte während des LigerUI-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery implementiert die Methode zur Überwachung aller Ajax-Anfragen auf der SeiteNächster Artikel：jQuery implementiert die Methode zur Überwachung aller Ajax-Anfragen auf der Seite

In Verbindung stehende Artikel

Mehr sehen