jQuery EasyUi实现tab页

来源：互联网发布：淘宝达人管理中心地址编辑：程序博客网时间：2024/05/22 09:41

在项目中往往会遇到这种情况，点击菜单，上面出现tab页，下次如果再要访问这个菜单下面的数据就不用重新加载，以下代码是我这次在项目中用jQuery EasyUI实现的tab页：

在jsp中需要引入的重要js：

<link href="<%=request.getContextPath()%>/common/jquery-easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />  <link href="<%=request.getContextPath()%>/common/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" />  <script src="<%=request.getContextPath()%>/common/js/jquery.js" type="text/javascript"></script>  <script src="<%=request.getContextPath()%>/common/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>

接下来是jsp中的tab页div：

    <div id="phone_list_date">                  <div id="tab" class="easyui-tabs">                  </div>              </div>

以下是js中对应的一些代码，菜单树使用的也是jquery EasyUI实现的

//加载菜单树      $('#tt').tree({          data: menuData,          loadFilter: function(rows) {              return convert(rows);          },          onClick : function(node) {   //点击onclick事件，查询出对应的数据              addTablePanel(node);   //添加table页              onclickMenu(node);   //数据加载到table页中          }      });

下面代码是向页面中添加tab页的核心代码：

    /**      * 点击菜单树添加table页      */      function addTablePanel(node){           if(isTabExists(node.text)){                $('#tab').tabs('select',node.text);//选中当前tabs           }else{               $('.multipleAnalyse_iframe').removeClass("multipleAnalyse_iframe").addClass('xx');               $('#tab').tabs('add',{                   title:node.text,                   content:"<iframe class='multipleAnalyse_iframe' style='height:100%; width:100%'></iframe>", //每个tab页里面添加一个iframe标签                   closable:true               });               $('.multipleAnalyse_iframe').height($('#phone_list_date').height()-29);           }      }      /**      * 判断tab页是否存在      * @param title      * @returns      */      function isTabExists(title){          return $('#tab').tabs('exists',title);      }

下面代码就是向tab页里面添加数据啦，这里添加的又是jsp页面

    /**      * 根据不同的菜单，向iframe里面添加不同的jsp页面      * @param node      */      function onclickMenu(node){          var nodeId = node.id;          switch(nodeId){          case 93: //DT用户跟踪              $(".multipleAnalyse_iframe").attr("src",path+"/multipleAnalyse/jsp/extendsBusinessAnalyse.jsp");              <span style="white-space:pre">    </span>$.messager.alert('提示','演示版暂时未提供该功能演示，请谅解！！');              break;          }      }

0 0