suchen

Heim >Web-Frontend >js-Tutorial >Wie jQuery EasyUI Tab-Panel-Registerkarten bedient

Wie jQuery EasyUI Tab-Panel-Registerkarten bedient

php中世界最好的语言
php中世界最好的语言Original
2018-04-19 14:02:431727Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie die Registerkarten des Tab-Panels mit jQuery EasyUI bedienen. Was sind die Vorsichtsmaßnahmen für die Bedienung der Tab-Panel-Registerkarten? sehen.

1. Legen Sie class="easyui-tabs" für den Tab-Panel-Bereich fest

2. Fügen Sie dem Tab-Panel-Bereich mehrere Ps hinzu. Jedes P ist ein Tab (für jedes Panel muss ein Titel festgelegt werden)

3. Stellen Sie die Panel-Passform auf True ein und passen Sie die Größe des übergeordneten Containers an

4. Setzen Sie die Registerkarte „Schließbar“ auf „True“ und fügen Sie eine Schaltfläche „Schließen“ hinzu

5. Klicken Sie auf den Hyperlink, um einen neuen Tab 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('add',{
   title:'CSDN博客',
   content:'学IT，你我他学习吧'
   });
  });
  });
 </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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall hier gelesen haben Artikel, bitte kommen Sie für weitere spannende Informationen. Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:



Das obige ist der detaillierte Inhalt vonWie jQuery EasyUI Tab-Panel-Registerkarten bedient. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery easyui class 对象
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：So verwenden Sie jQuery EasyUI in WINNächster Artikel：So verwenden Sie jQuery EasyUI in WIN

In Verbindung stehende Artikel

Mehr sehen