jQuery EasyUI 選項卡面板tabs使用實例精講

-Advertisement-

1、對選項卡面板區域 div 設置 class=”easyui-tabs” 2、對選項卡面板區域添加多個 div，每個 div 就是一個選項卡（每個面板一定設置 title） 3、設置面板 fit 為 true ，自適應父容器大小 4、設置選項卡 closable 為 true ，添加可關閉 ...

1、對選項卡面板區域 div 設置 class=”easyui-tabs”
2、對選項卡面板區域添加多個 div，每個 div 就是一個選項卡（每個面板一定設置 title）
3、設置面板 fit 為 true ，自適應父容器大小
4、設置選項卡 closable 為 true ，添加可關閉按鈕
5、通過超鏈接，點擊後，添加新的選項卡
語法：頁面對象.easyui 插件(方法名, 參數) ;

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>easyui-選項卡面板tabs的使用</title>
 6         <!-- 導入jquery核心類庫 -->
 7         <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 8         <!-- 導入easyui類庫 -->
 9         <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
10         <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
11         <link rel="stylesheet" type="text/css" href="../css/default.css">
12         <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
13         <script type="text/javascript">
14             //頁面載入後執行
15             $(function(){
16                 //對鏈接綁定點擊事件
17                 $("#nwtxxb").click(function(){
18                     //添加一個新的選項卡
19                     $("#mytabs").tabs('add',{
20                         title:'CSDN博客',
21                         content:'學IT，你我他學習吧'
22                     });
23                 });
24             });
25         </script>
26     </head>
27     <body class="easyui-layout">
28         <div data-options="region:'north',title:'你我他學習吧-學習Java的好博客！'" style="height:100px"></div>
29         <div data-options="region:'west',title:'菜單導航'" style="width:200px">
30             <!--摺疊面板-->
31             <div class="easyui-accordion" data-options="fit:true">
32                 <div data-options="title:'基礎菜單'">
33                     <a href="javascript:void(0)" id="nwtxxb">你我他學習吧</a>
34                 </div>
35                 <div data-options="title:'系統菜單'">你我他學習吧</div>
36             </div>
37         </div>
38         <div data-options="region:'center',title:'中部區域'">
39             <!--選項卡面板-->
40             <div id="mytabs" class="easyui-tabs" data-options="fit:true">
41                 <div data-options="title:'CSDN博客',closable:true">學Java後臺編程，就來你我他學習吧！</div>
42                 <div data-options="title:'博客園',closable:true">學前端開發，就來你我他學習吧！</div>
43             </div>
44         </div>
45         <div data-options="region:'east',title:'東部區域'" style="width:100px"></div>
46         <div data-options="region:'south',title:'南部區域'" style="height:100px"></div>
47     </body>
48 </html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

【讀書筆記】iOS-自動佈局

自動佈局是一項強大的功能，它允許開發者創建一個單一的用戶界面，它會自動調整屏幕大小，方向和本地化，Xcode5中的編輯界面的自動佈局功能已經大大增強了。當約束缺失或錯誤配置時，界面生成器可以修複佈局。參考資料：《iOS7開發快速入門》 ...
FragmentTabHost實現標簽卡效果

轉載請註明原文鏈接：http://www.cnblogs.com/yanyojun/p/8099523.html 代碼已上傳到github：https://github.com/YanYoJun/FragmentTabHostDemo 上一篇有講過使用ViewPager來實現標簽卡效果的。這一篇講一 ...
Android遠程桌面助手之系統相容篇

Android遠程桌面助手理論上相容Android4.4至Android8.1之間所有的原生安卓系統，其他第三方ROM，如MIUI、Flyme、EMUI和Smartisan OS等也都陸續測試過，目前尚未發現相容性問題。 ...
【quickhybrid】API多平臺支撐的實現

前言在框架規劃時，就有提到過這個框架的一些常用功能需要支持環境下的調用，也就是需要實現API的多平臺支撐為什麼要多平臺支撐？核心仍然是復用代碼，比如在微信下，在釘釘下，在quick容器下，如果沒有多平臺支撐，那麼只能用於quick容器下，釘釘和微信下就得分別用其它代碼實現，代碼復用率低， ...
【quickhybrid】API的分類：短期API、長期API

前言一切就緒，開始規劃API，這裡在規劃前對API進行了一次分類：__短期API、長期API__ 首先申明下，這個是在實際框架演變過程中自創的一個概念，其它混合框架可能也會有這個概念，但應該是會在原生底層來實現，而不是前端實現。。而這裡由於是，所以相比其它混合框架，前端多了一個處理引擎（包括多 ...
zTree樹形菜單交互選項卡效果實現

1、添加自定義屬性 page 2、為 ztree 每個樹形節點，添加點擊事件 ...
zTree樹形菜單使用實例

在每個節點添加 id 和 pid， id 表示當前節點編號，pid 表示父節點編號第一步：在頁面顯示菜單位置，添加 ul設置 class=”ztree” 第二步：開啟簡單數據格式支持第三步：編寫樹形菜單數據第四步：生成樹形菜單 ...
匿名函數與閉包

匿名函數：創建函數時，不指定函數名的函數。此種函數只能運行一次，可以避免變數全局污染，保護變數。匿名函數可以回調使用，比如 btn.addEventListener("click",function(){...}) 也可以用匿名函數聲明函數名，比如var abc=function (){conso ...