suchen

Heim >Web-Frontend >js-Tutorial >Erklären Sie ausführlich die Verwendung von Bauchmuskeln in EasyUI

Erklären Sie ausführlich die Verwendung von Bauchmuskeln in EasyUI

亚连
亚连Original
2018-06-15 16:46:352122Durchsuche

Im Folgenden werde ich Ihnen ein Beispiel für die Verwendung von jQuery EasyUI-Tab-Panel-Tabs vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

1. Setzen Sie class="easyui-tabs" auf den Tab-Panel-Bereich

2. Fügen Sie mehrere Ps zum Tab-Panel-Bereich hinzu, jedes p ist ein Tab (jedes). (der Titel)

3. Stellen Sie die Panel-Anpassung auf „true“ ein und passen Sie die Größe des übergeordneten Containers an

4 5. Klicken Sie über Hyperlinks, um eine neue Registerkarte hinzuzufügen

Syntax: page object.easyui plug-in (Methodenname, Parameter);

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>easyui-选项卡面板tabs的使用</title>
 <!-- 导入jquery核心类库 -->
 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <!-- 导入easyui类库 -->
 <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
 <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
 <script type="text/javascript">
  //页面加载后执行
  $(function(){
  //对链接绑定点击事件
  $("#nwtxxb").click(function(){
   //添加一个新的选项卡
   $("#mytabs").tabs(&#39;add&#39;,{
   title:&#39;CSDN博客&#39;,
   content:&#39;学IT，你我他学习吧&#39;
   });
  });
  });
 </script>
 </head>
 <body class="easyui-layout">
 <p data-options="region:&#39;north&#39;,title:&#39;你我他学习吧-学习Java的好博客！&#39;" style="height:100px"></p>
 <p data-options="region:&#39;west&#39;,title:&#39;菜单导航&#39;" style="width:200px">
  <!--折叠面板-->
  <p class="easyui-accordion" data-options="fit:true">
  <p data-options="title:&#39;基础菜单&#39;">
   <a href="javascript:void(0)" rel="external nofollow" id="nwtxxb">你我他学习吧</a>
  </p>
  <p data-options="title:&#39;系统菜单&#39;">你我他学习吧</p>
  </p>
 </p>
 <p data-options="region:&#39;center&#39;,title:&#39;中部区域&#39;">
  <!--选项卡面板-->
  <p id="mytabs" class="easyui-tabs" data-options="fit:true">
  <p data-options="title:&#39;CSDN博客&#39;,closable:true">学Java后台编程，就来你我他学习吧！</p>
  <p data-options="title:&#39;博客园&#39;,closable:true">学前端开发，就来你我他学习吧！</p>
  </p>
 </p>
 <p data-options="region:&#39;east&#39;,title:&#39;东部区域&#39;" style="width:100px"></p>
 <p data-options="region:&#39;south&#39;,title:&#39;南部区域&#39;" style="height:100px"></p>
 </body>
</html>
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie Wertweitergabe und Kommunikation in Vue2.0-Komponenten

Webpack 4.0.0-beta.0 Neue Funktionen der Version (ausführliches Tutorial)

Verwendung von SpringMVC zur Lösung domänenübergreifender Vue-Anfragen

Der Lebenszyklus von Vue-Komponenten und Route (ausführliches Tutorial)

Benutzerberechtigungskontrolle in Vue2.0

WeChat-Zahlung über vue.js

Das obige ist der detaillierte Inhalt vonErklären Sie ausführlich die Verwendung von Bauchmuskeln in EasyUI. 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：Probleme im Zusammenhang mit der Webpack3-Geschwindigkeitsoptimierung in vue-cliNächster Artikel：Probleme im Zusammenhang mit der Webpack3-Geschwindigkeitsoptimierung in vue-cli

In Verbindung stehende Artikel

Mehr sehen