How jQuery EasyUI operates tab panel tabs-JS Tutorial-php.cn

How jQuery EasyUI operates tab panel tabs

php中世界最好的语言

Release： 2018-04-19 14:02:43

Original

1703 people have browsed it

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);

<!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>

Copy after login

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!