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

阿新 • • 發佈：2018-12-31

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

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

        <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../css/default.css">
        <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">
        <div data-options="region:'north',title:'你我他學習吧-學習Java的好部落格！'" style="height:100px"></div>
        <div data-options="region:'west',title:'選單導航'" style="width:200px">
            <!--摺疊面板-->
            <div class="easyui-accordion" data-options="fit:true">
                <div data-options="title:'基礎選單'">
                    <a href="javascript:void(0)" id="nwtxxb">你我他學習吧</a>
                </div>
                <div data-options="title:'系統選單'">你我他學習吧</div>
            </div>
        </div>
        <div data-options="region:'center',title:'中部區域'">
            <!--選項卡面板-->
            <div id="mytabs" class="easyui-tabs" data-options="fit:true">
                <div data-options="title:'CSDN部落格',closable:true">學Java後臺程式設計，就來你我他學習吧！</div>
                <div data-options="title:'部落格園',closable:true">學前端開發，就來你我他學習吧！</div>
            </div>
        </div>
        <div data-options="region:'east',title:'東部區域'" style="width:100px"></div>
        <div data-options="region:'south',title:'南部區域'" style="height:100px"></div>
    </body>
</html>

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

1、對選項卡面板區域 div 設定 class=”easyui-tabs” 2、對選項卡面板區域新增多個 div，每個 div 就是一個選項卡（每個面板一定設定 title） 3、設定面板 f

原生js、jQuery實現選項卡功能

lap span size open absolute index http jquery html 在大家在網上平常瀏覽網頁的時候，想必各位都會看到選項卡功能，在這裏給大家詳解一下用原生js、jQuery如何來寫一些基本的選項卡話不多說，先給各位看一下功能圖：

47 jQuery-網頁選項卡的應用

1.效果圖 2.HTML程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>46 jQuery-網頁選項卡的應用</tit

Bootstrap筆記8--選項卡+面板

1.基礎選項卡+面板 <body> <div class="container">

JQuery實現選項卡

<head><meta charset="UTF-8"><title>Document</title><style type="text/css">#ulList{margin: 0;padding: 0;}#ul

Jquery Tab 選項卡切換

jquery Tab 選項卡切換直接上程式碼，以下為最基本的選項卡切換以下為效果圖 <!DOCTYP

jquery實現選項卡切換

選項卡在網頁中很常見，可以說是必備的一個元素了，網上其實也有很多案例講解選項卡的做法，各種炫酷。寫這篇文章，就是記錄下自己的一個練手Demo了。兩張簡陋的圖。主要邏輯就在於找到選

JavaSwing_3.4: JTabbedPane（選項卡面板）

1. 概述 JTabbedPane，選項卡面板。它允許使用者通過點選給定標題或圖示的選項卡，在一組元件之間進行切換顯示。常用構造方法: /** * 參事說明: *

三行jquery實現選項卡效果

選項卡特效的實現實現選項卡特效，先講一下大致的思路. 1.用一個大的div 包裹住一個ul ，ul ,裡面再接四個小的li,和四個可以點選的span ，用按鈕等代替也行。 html程式碼結構大致如下，設定背景色是為了看出效果，最後一個是預設展開，可以自

jQuery-easyui實現關閉全部tabs

有時候當我們開啟很多tabs選項卡時,要關閉它只能一個一個的進行關閉,顯然太麻煩,這時可以在選項卡的最右邊新增一個按鈕實現關閉全部。 function openTab(text, url, iconCls) { if ($("#tabs").tabs("exists", te

Java 圖形使用者介面選項卡面板的建立

/** 作者：wwj 日期：2012/4/15 功能：選項卡面板 **/ import java.awt.*; import javax.swing.*; public class Jxxk e

jquery實現選項卡效果

效果圖如下： css程式碼如下： *{ margin: 0; padding: 0; } .obox ul li{ list-style: none; width: 100px; height: 30px; text-ali

jquery編寫選項卡Tab頁跳轉功能

前面寫過用JavaScript原生程式碼寫選項卡tab頁的跳轉的方法，在後來的學習工作過程中，發現並不是很實用，這裡分享一個jquery的寫法，比較簡單，也比較容易修改套用，適合初學者學習和使用。 1、首先是選單tab標籤使用ul-li列出選

用jquery實現選項卡效果（非常漂亮，帶動畫效果）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

《Oracle PL/SQL例項精講》學習筆記26——優化PL/SQL（第三部分——子程式內聯）

本章內容： 1. PL/SQL調優工具 2. PL/SQL優化級別 3. 子程式內聯程式碼如下： 1. 檢視dbmshptab.sql指令碼內容 Rem Rem $Header: rdbms/admin/dbmshptab.sql /main/4 20

《Oracle PL/SQL例項精講》學習筆記26——優化PL/SQL（第二部分——PL/SQL優化級別）

本章內容： 1. PL/SQL調優工具 2. PL/SQL優化級別 3. 子程式內聯程式碼如下： 1. 檢視PROFTAB.sql內容 Rem Rem $Header: plsql/admin/proftab.sql /main/4 2013/07/0

《Oracle PL/SQL例項精講》學習筆記26——優化PL/SQL（第一部分——PL/SQL調優工具）

本章內容： 1. PL/SQL調優工具（使用PL/SQL剖析器API、使用跟蹤API、使用PL/SQL層次式剖析器） 2. PL/SQL優化級別 3. 子程式內聯程式碼如下： 1. 檢視PLSQL_DEBUG引數 SQL> show parame

《Oracle PL/SQL例項精講》學習筆記25——Oracle提供的包（第六部分——使用UTL_CALL_STACK包報告錯誤）

本章內容： 1. 利用Oracle提供的包擴充套件功能（使用UTL_FILE訪問檔案、使用DBMS_JOB排程作業、DBMS_XPLAN生成解釋計劃、DBMS_SQL產生隱式語句結果） 2. 利用Oracle提供的包報告錯誤（使用DBMS_UTILITY包報告錯誤、使用UTL_CALL

《Oracle PL/SQL例項精講》學習筆記25——Oracle提供的包（第五部分——使用DBMS_UTILITY報告錯誤）

《Oracle PL/SQL例項精講》學習筆記2——PL/SQL概念

這一章學習到了以下內容： 1. PL/SQL架構（如，三層架構：資料管理層、應用處理層、表示層） 2. 替代變數的字首有兩種：&和&&，其中後者表示即使同名替代變數在程式碼中出現多次，使用者僅需輸入一次原始碼如下： -- *** Chap

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

相關推薦