suchen

Heim  >  Artikel  >  Web-Frontend  >  Verwendung von Registerkarten im jQuery EasyUI-Registerkartenfeld

Verwendung von Registerkarten im jQuery EasyUI-Registerkartenfeld

php中世界最好的语言
php中世界最好的语言Original
2018-03-15 14:16:061927Durchsuche

Dieses Mal bringe ich Ihnen jQuery Wie Sie die Registerkarten des EasyUI-Registerkartenfelds verwenden, was sind die Vorsichtsmaßnahmen bei der Verwendung der Registerkarten des jQuery EasyUI-Registerkartenfelds, das Folgende ist praktisch Fall, lasst uns gemeinsam einen Blick darauf werfen. Schaut mal rein.

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

Hyperlink

, um eine neue Registerkarte hinzuzufügen

Syntax: SeiteObjekt.easyui-Plug-in (Methodenname, Parameter) ;

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! 
<!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:'123',
   content:'456，'
   });
  });
  });
 </script>
 </head>
 <body class="easyui-layout">
 <p data-options="region:&#39;north&#39;,title:&#39;123&#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">123</a>
  </p>
  <p data-options="title:&#39;系统菜单&#39;">123</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;123&#39;,closable:true">后台编程</p>
  <p data-options="title:&#39;456&#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>

Empfohlene Lektüre:

jQuery fügt neue Elemente zu dynamischen Listen hinzu


Praktischer Online-Kundenservice für jQuery-Schubladen


jquery führt Zellen dynamisch zusammen

Das obige ist der detaillierte Inhalt vonVerwendung von Registerkarten im jQuery EasyUI-Registerkartenfeld. 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+localStorage implementiert einen TimerNächster Artikel：jQuery+localStorage implementiert einen Timer

In Verbindung stehende Artikel

Mehr sehen