recherche

Maison >Applet WeChat >Développement de mini-programmes >Explication détaillée de la mise en œuvre easyUI Layout des exemples d'étiquettes d'onglets

Explication détaillée de la mise en œuvre easyUI Layout des exemples d'étiquettes d'onglets

小云云
小云云original
2018-01-31 14:11:402206parcourir

Cet article présente principalement des informations pertinentes sur les exemples d'implémentation de balises d'onglets de jQuery EasyUI Layout. J'espère que cet article pourra aider tout le monde à réaliser une telle fonction. Les amis qui en ont besoin pourront s'y référer.

Exemple de jQuery EasyUI Layout implémentant l'étiquette des onglets

1. Introduisez les fichiers liés à jquery.js et easyUi

2. L'effet est le suivant :



2. Créer une mise en page page d'accueil :


3. Créer une page intermédiaire : 

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML >
<html>
<head>
<title>SSHE DEMO</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="jslib/jquery-easyui-1.3.1/themes/default/easyui.css" rel="external nofollow" type="text/css"></link>
<link rel="stylesheet" href="jslib/jquery-easyui-1.3.1/themes/icon.css" rel="external nofollow" type="text/css"></link>
<script type="text/javascript" src="jslib/syUtil.js"></script>
</head>
<body class="easyui-layout">
  <p data-options="region:&#39;north&#39;" style="height: 60px;"></p>
  <p data-options="region:&#39;south&#39;" style="height: 20px;"></p>
  <p data-options="region:&#39;west&#39;" style="width: 200px;">
    <jsp:include page="layout/west.jsp"></jsp:include>
  </p>
  <p data-options="region:&#39;east&#39;,title:&#39;east&#39;,split:true" style="width: 200px;"></p>
  <p data-options="region:&#39;center&#39;,title:&#39;欢迎使用SSHE示例系统&#39;" style="overflow: hidden;">
    <jsp:include page="layout/center.jsp"></jsp:include>
  </p>

  <jsp:include page="user/login.jsp"></jsp:include>

  <jsp:include page="user/reg.jsp"></jsp:include>
</body>
</html>


4. Page de menu : west.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<script type="text/javascript">
  function addTab(opts) {
    var t = $(&#39;#layout_center_tabs&#39;);
    if (t.tabs(&#39;exists&#39;, opts.title)) {
      t.tabs(&#39;select&#39;, opts.title);
    } else {
      t.tabs(&#39;add&#39;, opts);
    }
  }
</script>
<p id="layout_center_tabs" class="easyui-tabs" data-options="fit:true,border:false" style="overflow: hidden;">
  <p title="首页"></p>
</p>

Recommandations associées ;

<%@ page language="java" pageEncoding="UTF-8"%>
<p class="easyui-panel" data-options="title:&#39;功能导航&#39;,border:false,fit:true">
  <p class="easyui-accordion" data-options="fit:true,border:false">
    <p title="系统菜单" data-options="iconCls:&#39;icon-save&#39;">
      <ul id="layout_west_tree" class="easyui-tree" data-options="
          url : &#39;${pageContext.request.contextPath}/menuAction!getAllTreeNode.action&#39;,
          parentField : &#39;pid&#39;,
          lines : true,
          onClick : function(node) {
            if (node.attributes.url) {
              var url = &#39;${pageContext.request.contextPath}&#39; + node.attributes.url;
              addTab({
                title : node.text,
                closable : true,
                href : url
              });
            }
          }
          "></ul>
    </p>
    <p title="Title2" data-options="iconCls:&#39;icon-reload&#39;"></p>
  </p>
</p>

Exemple de code div+ css pour implémenter les onglets tag_html/css_WEB-ITnose

Document chinois de l'API jQuery EasyUI - Onglet page/tab_jquery

Javascript méthode pour ajouter et supprimer dynamiquement des compétences tabs_javascript

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!

jquery css easyui JS
Déclaration：
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
Article précédent：L'applet WeChat implémente le code pour la liaison BluetoothArticle suivant：L'applet WeChat implémente le code pour la liaison Bluetooth

Articles Liés

Voir plus