简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Comment résoudre la taille de la hauteur de l'onglet au centre lors de la mise en page ligerUI

不言
Libérer： 2018-07-02 14:27:30
original
1413 Les gens l'ont consulté

Cet article présente principalement comment résoudre les informations pertinentes sur la taille de la hauteur de l'onglet dans le Centre lors de la mise en page ligerUI. Les amis qui en ont besoin peuvent se référer aux js et css cités par

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>
Copier après la connexion

2.0 Définir la disposition ligerUI et la hauteur des onglets avec le code js

<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>
Copier après la connexion

3.0 Style de réglage simple

  <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>
Copier après la connexion
Contenu dans le corps 4.0

<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>
Copier après la connexion

Ce qui suit est un article sur la mise en page des notes d'étude LigerUI

Plus de bêtises, donnez-le simplement à vous tout le monde a posté le code. 

<!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>
Copier après la connexion

Fichier de style

* { margin: 0px; padding: 0px; }
body { padding: 5px; margin: 0; padding-bottom: 15px; }
#top { height: 80px; margin-bottom: 3px; background-color:Lime }
Copier après la connexion
Résumé :


Convertissez simplement le conteneur en un objet ligerlayout

N'oubliez pas l'attribut position

Voici un rendu au passage

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile pour l'apprentissage de tous Aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

À propos de $apply et de l'utilisation optimisée dans Angularjs

À propos de jquery ajaxfileuplod téléchargeant des fichiers essyui laoding Effect

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
ligerUI_tab高度 ligerui_tab
source：php.cn
Article précédent：jQuery implémente la méthode de surveillance de toutes les requêtes ajax sur la page Article suivant：La technologie Jquery ajax réalise la transmission de valeurs à une certaine page toutes les N secondes
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
J'ai des problèmes avec une grille CSS dont la hauteur n'est pas celle à laquelle je m'attendais, quelles erreurs pourrais-je commettre ? J'apprends actuellement les grilles CSS et on m'a demandé de créer cette carte en la décom...
Depuis 2024-04-06 12:52:14
0
1
339
La v-card Vuetify s'adapte à toutes les hauteurs possibles dans v-col Je construis une page de connexion/inscription en utilisant vue et vuetify. Je mets le cod...
Depuis 2024-04-06 10:29:26
0
1
406
Obtenir les *deux* valeurs de hauteur de la toile ? J'essaie d'obtenir deux valeurs de hauteur de cette toile. <canvaswidth="886"...
Depuis 2024-04-05 09:32:33
0
1
1360
Réglez le bas à 100 % de sa propre hauteur Je souhaite configurer un élément de manière à ce qu'il soit masqué de la vue de la page e...
Depuis 2024-04-04 22:41:16
0
1
1438
Assurez-vous que le conteneur de la cellule du tableau remplit toute la hauteur du parent J'essaie d'aligner verticalement le contenu sans utiliser Flexbox, car il y a quelques pro...
Depuis 2024-04-04 16:03:18
0
1
404
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！