easyui框架tabs控件
生活随笔
收集整理的這篇文章主要介紹了
easyui框架tabs控件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
tabs控件
- 一、前言
- 二、實現選項卡
- 增加選項卡
- 三、結果
一、前言
今天分享easyui框架的tabs控件（tab選項卡）基于上次的前端實現tree結構
二、實現選項卡
首先要在jsp頁面上最后一個div中加上easyui框架的標簽
<div id="bookTabs" class="easyui-tabs" style="width:100%;height:250px;"> <div title="首頁" style="padding:20px;display:none;"> 首頁</div> </div>jsp界面代碼
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 全局樣式 --> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css"> <!-- 定義圖標 --> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script> <!-- 組件庫源碼的js文件 --> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script> <title>登錄后的主界面</title> </head> <body class="easyui-layout"><input type="hidden" id="ss" value="${pageContext.request.contextPath }" /><div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">xxxxx</div><div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;"><ul id="tt"></ul> </div><div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div><div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">xxxxx</div><div data-options="region:'center',title:'Center'"><div id="bookTabs" class="easyui-tabs" style="width:100%;height:250px;"> <div title="首頁" style="padding:20px;display:none;"> 首頁</div> </div> </div> </body> </html>增加選項卡
里面做了增加選項卡時的判斷
$(function(){ // jsp頁面的隱藏域存放的是項目名var ss=$('#ss').val(); // 樹形控件的觸發事件$('#tt').tree({url:ss+'/permission.action?methodName=menuTree', // 樹形控件的點擊事件onClick: function(node){ // jsp頁面打斷點 debugger; // alert(node.text); // 在用戶點擊的時候提示 // 判斷是否打開了某選項卡如果打開了就不增加此節點if($('#bookTabs').tabs('exists',node.text)){$('#bookTabs').tabs('select',node.text);}else{//沒有打開此選項卡就新增一個var src = node.attributes.self.url;if(src){//新增選項卡var contebt='<iframe scrolling="no" frameborder="0" src="'+ss+src+'" width="99%" height="99%" ></iframe>';$('#bookTabs').tabs('add',{title:node.text, content:contebt, closable:true, }); }}}});})三、結果
總結
以上是生活随笔為你收集整理的easyui框架tabs控件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于SSM框架和easyUI框架的简易人
- 下一篇： 前端框架EasyUI