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

来源:http://www.cnblogs.com/niwotaxuexiba/archive/2017/12/24/8099012.html
-Advertisement-
Play Games

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-
Play Games
更多相關文章
  • 自動佈局是一項強大的功能,它允許開發者創建一個單一的用戶界面,它會自動調整屏幕大小,方向和本地化,Xcode5中的編輯界面的自動佈局功能已經大大增強了。當約束缺失或錯誤配置時,界面生成器可以修複佈局。 參考資料:《iOS7開發快速入門》 ...
  • 轉載請註明原文鏈接:http://www.cnblogs.com/yanyojun/p/8099523.html 代碼已上傳到github:https://github.com/YanYoJun/FragmentTabHostDemo 上一篇有講過使用ViewPager來實現標簽卡效果的。這一篇講一 ...
  • Android遠程桌面助手理論上相容Android4.4至Android8.1之間所有的原生安卓系統,其他第三方ROM,如MIUI、Flyme、EMUI和Smartisan OS等也都陸續測試過,目前尚未發現相容性問題。 ...
  • 前言 在框架規劃時,就有提到過這個框架的一些常用功能需要支持 環境下的調用,也就是需要實現API的多平臺支撐 為什麼要多平臺支撐?核心仍然是復用代碼,比如在微信下,在釘釘下,在quick容器下, 如果沒有多平臺支撐,那麼 只能用於quick容器下,釘釘和微信下就得分別用其它代碼實現, 代碼復用率低, ...
  • 前言 一切就緒,開始規劃API,這裡在規劃前對API進行了一次分類:__短期API、長期API__ 首先申明下,這個是在實際框架演變過程中自創的一個概念,其它混合框架可能也會有這個概念,但應該是會在原生底層來實現,而不是前端實現。。 而這裡由於是 ,所以相比其它混合框架,前端多了一個處理引擎(包括多 ...
  • 1、 添加自定義屬性 page 2、 為 ztree 每個樹形節點,添加點擊事件 ...
  • 在每個節點添加 id 和 pid, id 表示當前節點編號,pid 表示父節點編號 第一步:在頁面顯示菜單位置,添加 ul設置 class=”ztree” 第二步:開啟簡單數據格式支持 第三步:編寫樹形菜單數據 第四步:生成樹形菜單 ...
  • 匿名函數:創建函數時,不指定函數名的函數。此種函數只能運行一次,可以避免變數全局污染,保護變數。 匿名函數可以回調使用,比如 btn.addEventListener("click",function(){...}) 也可以用匿名函數聲明函數名,比如var abc=function (){conso ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...