How jQuery EasyUI operates tab panel tabs

This time I will show you how jQuery EasyUI operates the tab panel tabs, and what are the precautions for jQuery EasyUI operating the tab panel tabs. The following is a practical case, let's take a look.

1. Set class="easyui-tabs" for the tab panel area p

2. Add multiple p's to the tab panel area, each p is a tab (a title must be set for each panel)

3. Set panel fit to true to adapt to the size of the parent container

4. Set the tab closable to true and add a close button

5. Through hyperlink, click to add a new tab

Syntax: Page object.easyui plug-in (method name, parameters);

nbsp;html>

 
 <meta>
 <title>easyui-选项卡面板tabs的使用</title>
 <!-- 导入jquery核心类库 -->
 <script></script>
 <!-- 导入easyui类库 -->
 <link>
 <link>
 <link>
 <script></script>
 <script>
  //页面加载后执行
  $(function(){
  //对链接绑定点击事件
  $("#nwtxxb").click(function(){
   //添加一个新的选项卡
   $("#mytabs").tabs(&#39;add&#39;,{
   title:&#39;CSDN博客&#39;,
   content:&#39;学IT，你我他学习吧&#39;
   });
  });
  });
 </script>
 
 
 <p></p>
 <p>
  <!--折叠面板-->
  </p><p>
  </p><p>
   <a>你我他学习吧</a>
  </p>
  <p>你我他学习吧</p>
  
 
 <p>
  <!--选项卡面板-->
  </p><p>
  </p><p>学Java后台编程，就来你我他学习吧！</p>
  <p>学前端开发，就来你我他学习吧！</p>
  
 
 <p></p>
 <p></p>
 

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Other related articles on the Chinese website!

Recommended reading:

The above is the detailed content of How jQuery EasyUI operates tab panel tabs. For more information, please follow other related articles on the PHP Chinese website!