jQuery EasyUI 摺疊面板accordion的使用例項

阿新 • • 發佈：2019-02-13

1、對摺疊面板區域 div 設定 class=”easyui-accordion”
2、在區域新增多個 div，每個 div 就是一個面板（每個面板一定要設定 title 屬性）。
3、設定面板屬性 fit 為 true，自適應父容器大小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>easyui-摺疊面板accordion的使用</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>
    </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:'基礎選單'">面板一</div>
                <div data-options="title:'系統選單'">面板二</div>
            </div>
        </div>
        <div data-options="region:'center',title:'中部區域'"></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 摺疊面板accordion的使用例項

1、對摺疊面板區域 div 設定 class=”easyui-accordion” 2、在區域新增多個 div，每個 div 就是一個面板（每個面板一定要設定 title 屬性）。 3、設定面板

Easyui如何關閉所有的摺疊面板Accordion Actions

在使用Easyui摺疊面板的時候，當摺疊面板與Dialog共同使用的時候會出現一個問題，就是當你開啟dialog，展開所有的摺疊面板後，關閉dialog，在重新開啟的時候發現摺疊面板沒有復原，這個時候就需要考慮如何在關閉dialog的時候同時關閉所有的摺疊面板。Esayui的

jquery 實現摺疊面板

1.dom元素 <div class="box"> <ul id="ul"> <li>Client agreement <div class="line"></div> <div class="content"&

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

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

jQuery EasyUI中window/dialog 視窗摺疊和展開方法（顯示）

在jQuery的EasyUI中新視窗或訊息框是通過class="easyui-window"和class="easyui-dialog"定義，並可以通過其collapsible、minimizable、maximizable、closable、closed分別控

jQuery切換網頁面板儲存到Cookie例項

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

IT忍者神龜之jquery easyui DataGrid 例項，增、刪、查、改基礎功能

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/taglibs.jsp"%&g

實現摺疊面板效果 jQuery

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

jquery easyui layout 怎樣新增和刪除面板

<divid="gpyDiv"class="easyui-layout"fit=truestyle="width:100%;height:100%;"> <divdata-optio

jQuery基礎（常用插件表單驗證，圖片放大鏡，自定義對象級，jQuery UI，面板折疊）

此外 cookie值添加圖標 tor 列表需要 droppable 使用 ddn 1.表單驗證插件——validate 該插件自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常信息，此外，還允許自定義驗證規則，插件調用方法如下： $(form).vali

動態控制jQuery easyui datagrid工具欄顯示隱藏

第一條 button 一個按鈕 yui query 控制 show disable //隱藏第一個按鈕 $(‘div.datagrid-toolbar a‘).eq(0).hide(); //隱藏第一條分隔線 $(‘div.datagrid-toolbar div‘).e

使用Struts2和jQuery EasyUI實現簡單CRUD系統（五）——jsp,json,EasyUI的結合

元素 word cli resultset sheet 傳輸 charset {} tco 這部分比較復雜，之前看過自己的同學開發一個選課系統的時候用到了JSON，可是一直不知道有什麽用。寫東西也沒用到。所以沒去學他。然後如今以這樣的懷著好奇心，這是做什麽用的，這是怎麽用

jquery easyui的使用

tracking p s article -c font 結構效果 js報錯 3.0 第一步下載jquery easyui 下載地址：http://www.jeasyui.com/download/index.php 第二步創建Java web項目第三步導入相關的

jquery easyui grid 表格特殊字符處理

數據庫字段一個 cti enc formatter val 提示 ddr 特殊字符 grid 獲取的數據中，如果數據存在測試的字符，或者js語句，會導致頁面布局錯亂，如下方法，讓獲取到的數據全部當成文本進行顯示此操作主要防止以下亮點 1. 由於業務需要，查詢的數據中

jQuery EasyUI一個基於 jQuery 的框架(創建網頁所需的一切)

fault def edi lec ... center icon jquer timeout jQuery EasyUI學習網址：http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuery MiniUI

jquery-easyui:格式化列

ets cti valid app 網址 span clu 格式化函數函數主框架頁面: 在主界面區會加載西區菜單點擊的URL內容. <!DOCTYPE html> <html> <head> <meta charset=

Jquery EasyUI Tree樹形結構的Java實現（實體轉換VO）

優勢 con control 項目 util turn ttr real org 前一陣做的OA項目，有一個是組織架構的樹，因為是分開做的，我做的是Controller和頁面，其他組做的Service和Dao，因為之前一直沒有商量頁面用什麽框架做比較好，導致，Dao層取出來

jQuery EasyUI---DataGrid

ebo out xmlns tar utf select 基本 yui round <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</t

jquery easyui裏datagrid用法記錄

action 名稱 lap pre election soft 未定義 enter table 1、刪除行方法（deleteRow） $(‘#ruleManagementTable‘).datagrid(‘deleteRow‘, 1); //1代表選中的行索引 2、刪

jQuery EasyUI快速入門實戰教程（一）-入門

jquery javascript easyui 1、jQuery EasyUI概述jQuery EasyUI是一組基於jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發者更輕松的打造出功能豐富並且美觀的UI界面。開發者不需要編寫復雜的javascript，也不需要

jQuery EasyUI 摺疊面板accordion的使用例項

相關推薦