2. 程式人生 > >EasyUI入門（Accordion，Layout）

EasyUI入門（Accordion，Layout）

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

           和以前一樣，這個博文依舊是演示文件中的Demo。

一.Accordion(分類)

           Accordion單詞意為手風琴，可摺疊的。分類空間允許使用者使用多面板，但在同一時間只會顯示一個。每個面板都內建支援展開和摺疊功能。點選一個面板的標題將會展開或摺疊面板主體。面板內容可以通過指定的'href'屬性使用ajax方式讀取面板內容。使用者可以定義一個被預設選中的面板，如果未指定，那麼第一個面板就是預設的。

1.建立分類

          通過標籤建立分類，給<div/>標籤新增一個名為'easyui-accordion'的類ID。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入門</title>
<!-- 在head中引入必要的js檔案和css檔案 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
		//我們可以更改或修改面板的一些功能以後再重新建立它。
		$('#aa').accordion({    
		    animate:true  
		});
		//重新整理分類面板內容。呼叫'getSelected'方法獲取當前面板，此外我們還可以呼叫'refresh'方法重新載入新內容。
		var pp = $('#aa').accordion('getSelected'); // 獲取選擇的面板 
		if (pp){    
		    pp.panel('refresh','1.jsp');  // 呼叫'refresh'方法重新整理 
		}
	});
</script>	
</head>
<body>
	<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   
	    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
	          <h3 style="color:#0099FF;">小情歌</h3>   
	          <p>這是一首簡單的小情歌</p>   
	          <p>這是一首簡單的小情歌</p>  
	    </div>   
	    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
	        content2    
	    </div>   
	    <div title="Title3">   
            content3    
    </div>   
</div> 
</body>
</html>

                頁面效果：

                 我們需要通過一個div標籤定義一個Accordion容器， 然後通過子div標籤來建立面板。其中<p/>標籤自帶換行，並且當多個div的selected標籤為true時，最前面的標籤會預設執行selected。

                  現在說一個語句：

                    var pp = $('#aa').accordion('getSelected'); // 獲取選擇的面板                          if (pp){                                 pp.panel('refresh','1.jsp');  // 呼叫'refresh'方法重新整理                         }

                 在上篇部落格末尾我認為.accordion和.panel是一個方法，現在覺得是錯誤的，現在看一下，我覺得 $('#aa').accordion的含義是說明這個id為aa的div標籤現在是一個accordion物件，而getSelected是這個物件的一個方法，由於後面沒有值，說明這個方法沒有引數。而寫.accordion和.panel的原因，我認為是可能是同名的方法比較多，通過這個就可以指明這個標籤代表的或引用指向的到底是個什麼物件。（自己理解的，如果覺得有錯誤望告知。。。）

二.Layout（佈局）

                佈局容器有5個區域：北、南、東、西和中間。中間區域面板是必須的，邊緣的面板都是可選的。每個邊緣區域面板都可以通過拖拽其邊框改變大小，也可以點選摺疊按鈕將面板摺疊起來。佈局可以進行巢狀，使用者可以通過組合佈局構建複雜的佈局結構。

1.通過標籤建立佈局

                為<div/>標籤增加名為'easyui-layout'的類ID。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入門</title>
<!-- 在head中引入必要的js檔案和css檔案 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
	
	});
</script>	
</head>
<body>
	<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
	    <div data-options="region:'north',title:'上',split:false" style="height:100px;"></div>   
	    <div data-options="region:'south',title:'下',split:true" style="height:100px;"></div>   
	    <div data-options="region:'east',iconCls:'icon-reload',title:'右',split:false" style="width:100px;"></div>   
	    <div data-options="region:'west',title:'左',split:true" style="width:100px;"></div>   
	    <div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;"></div>   
	</div>  
</div> 
</body>
</html>

                   我們通過父div標籤來作為easyui-layout容器，然後通過子div的region屬性和style屬性來指定div的位置或者height和width。其中split屬性為true時，會顯示分割條紋，如果設為false，則使區域間不產生無橫的間隔。

                  頁面效果圖：

2.使用完整頁面建立佈局

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入門</title>
<!-- 在head中引入必要的js檔案和css檔案 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
	
	});
</script>	
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>  
</html>

                 頁面效果描述：

                 和上一個程式碼塊不同的是，這次將body標籤作為佈局用的父標籤，所以這次的佈局會填滿整個螢幕。

3. 建立巢狀佈局

                 注意：巢狀在內部的佈局面板的左側(西面)面板是摺疊的。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入門</title>
<!-- 在head中引入必要的js檔案和css檔案 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
	
	});
</script>	
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'上'" style="height:100px"></div>   
    <div data-options="region:'center'">   
        <div class="easyui-layout" data-options="fit:true">   
            <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
		    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
		    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
		    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
		    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
        </div>   
    </div>   
</body>  

</html>

                   上述程式碼中有一個fit屬性，它的作用是自適應父容器的大小。簡單的一個體現就是如果不設定為true，那麼頁面可以就不會被顯示。

4. 通過ajax讀取內容

                   佈局是以面板為基礎建立的。所有的佈局面板都支援非同步載入URL內容。使用非同步載入技術，使用者可以使自己的佈局頁面顯示的內容更多更快。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入門</title>
<!-- 在head中引入必要的js檔案和css檔案 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
		//得到這個layout佈局面板物件
		$('#cc').layout(); 
		//對這個面板佈局物件進行操作。
		$('#cc').layout('collapse','west');
		//
		$('#cc').layout('add',{    
		    region: 'east',    
		    width: 180,    
		    title: 'West Title',    
		    split: true,    
		    tools: [{    
		        iconCls:'icon-add',    
		        handler:function(){
		        	alert('add')
		        }    
		    },{    
		        iconCls:'icon-remove',    
		        handler:function(){
		        	alert('remove')
		        }    
		    }]    
		});  

	});
</script>	
</head>
<body id="cc" class="easyui-layout">   
    <div data-options="region:'west',title:'左',href:'1.jsp',split:true" style="width:180px" ></div>   
    <div data-options="region:'center',title:'中',href:'1.jsp'" ></div>   
</body>  
</html>

              頁面效果圖： 

三.總結

               在操作物件的時候，我們應該先用 " . " 的方式來指明操作的物件是一個什麼物件,然後在呼叫這個物件的方法。

相關推薦

EasyUI入門（Accordion，Layout）

           和以前一樣，這個博文依舊是演示文件中的Demo。 一.Accordion(分類)            Accordion單詞意為手風琴，可摺疊的。分類空間允許使用者使用多面板，但在同一時間只會顯示一個。每個面板都內建支援展開和摺疊功能。點選一個面板

二維計算幾何入門（點，直線）及簡單練習

精度問題：定義eps比較浮點數大小時需要引入極小值eps，具體多小由題目要求定例如：當eps=0時，0與0.1相等 0與0.9相等向量：既有方向又有大小的量向量的夾角：用<a，b>表示向量a和向量b的夾角表示：1. 點（point） 用（x，y）表示2.線段：可以

python入門（@property，@*.setter）

@property可以將python定義的函式“當做”屬性訪問，從而提供更加友好訪問方式，但是有時候setter/deleter也是需要的。1、只有@property表示只讀。2、同時有@property和@*.setter表示可讀可寫。3、同時有@property和@*.s

ElasticSearch最佳入門實踐（六十九）優化寫入流程實現durability可靠儲存（translog，flush）

（1）資料寫入buffer緩衝和translog日誌檔案 （2）每隔一秒鐘，buffer中的資料被寫入新的segment file，並進入os cache，此時segment被開啟並供search使用 （3）buffer被清空 （4）重複1~3，新的segment不斷新增，buf

Python入門學習筆記————06（函式，列）

變數的作用域 變數由作用範圍限制 分類：按作用域分類 全域性（global）:在函式外部定義 區域性（local）：在函式內部定義 變數的作用範圍： 全域性變數：在整個全域性範圍都有效 全域性變數在區域性可以使用

git入門（安裝，基本命令）

git安裝 使用的是linux系統，所以安裝方法：終端中輸入：sudo apt-get install git，老一點的版本則需要執行命令：sudo apt-get install git-core，也可以原始碼安裝則需要進行make instal 。 初始設定：

【機器學習入門——1】Python 開發環境的安裝 Python（x，y）及Pycharm

          在學習機器學習的過程中，我們必不可少的要敲寫一些程式碼。在機器學習領域中用到的語言主要有Matlab、Python、R等語言，由於自身接觸到的環境原因我主要選著Matlab及Pyt

線段樹入門（建樹，查詢，更新）hdu1754

先來一道純線段樹的題目： I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 75617   

專案開發過程中的細節問題及解決方法（Vue，Css）（入門級）

Vue開發填坑 方法methods通用 問題描述： vue開發過程中很多時候，函式方法methods會在各個元件內共用，每個元件都寫個比較多餘。 解決方法： 1.利用CommonJS思想，單獨寫，然後每個元件利用import { function

文件讀取草稿（excel，csv）

string guid dwr lda clas isn urn datarow arraylist using NPOI.XSSF.UserModel; using System; using System.Collections.Generic; using Syst

[51NOD1524] 可除圖的最大團（組合，dp）

鏈接 ble spa 組合 sin ons .html color 出現的次數 題目鏈接：https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1524 題意：略。 這個題相當於是找出現最長的整除鏈。

information_schema系列八（鎖，事物）

開啟 mysql 獲取 排它 lin tin 查詢 pre join 這個系列的文章主要是為了能夠讓自己了解MySQL5.7的一些系統表，統一做一下備註和使用，也希望分享出來讓大家能夠有一點點的受益。 第八篇主要看一下一下幾系統表： 今天我們主要看一下MySQL inf

歸並排序&&逆序對（codves1688，4163）

如果 排序 範圍 eight 註意 sam def 序列 pad 歸並排序 歸並排序采用的是分治的思想 1、劃分問題：把序列分為元素個數盡量相等的兩半 2、遞歸求解：把兩半分別排序 3、合並問題：把兩個有序的序列合並為一個 對於第三個問題，我們可以從兩個序列中最小的元素開始

[2017浙工大之江學院決賽 L] qwb與整數對（離線，篩）

online con ons print include main amp i++ max 題目鏈接：http://115.231.222.240:8081/JudgeOnline/problem.php?cid=1005&pid=11 這題不會，看了檸檬巨的題解才

CO-PRIME（初探 莫比烏斯）NYOJ1066（經典）gcd（a，b）=1

put size 兩個 test hat ott == clas otto CO-PRIME 時間限制：1000 ms | 內存限制：65535 KB 難度：3 描寫敘述 This problem is so easy! Can you solve it

java：容器/集合（Map（HashMap，TreeMap））

常用 接口 blog ava keyset 常用方法 system entryset 方法 HashMap： *Map接口:采用是鍵值對的方式存放數據。無序 *常見的實現類: *--HashMap:基於哈希表的 Map 接口的實現。 *常用的構造方法: * HashMap(

js 通過瀏覽器直接打開應用程序（IOS，Android）並判斷瀏覽器內核

agent rtt 程序 javascrip ref java lock roi col 本功能主要用於手機端，如果手機未安裝該APP，則跳轉至下載頁面；否則，直接打開手機中的APP。 <div style="position:absolute; top:84%;

js源碼 模仿 jquery的ajax的獲取數據（get，post ）的請求封裝

{} req turn eva syn 動作 取字符串 func ring function ajax(obj){ // 默認參數 var defaults = { type : ‘get‘, data : {}, url : ‘#‘, dataType : ‘text‘,

JS面向對象（封裝，繼承）

通過 ray 混合 字母 顯示 彈出 pan rip http 在六月份找工作中，被問的最多的問題就是： js面向對象，繼承，封裝，原型鏈這些，你了解多少？ 額，，，我怎麽回答呢， 只能說，了解一些，不多不少，哈哈哈哈，當然，這是玩笑話。 不過之前學過java，來理解這些還

HDU 1308 What Day Is It?（模擬，日期）

else 天數 pre names 一點 val return can 星期幾 解題報告：輸入一個年月日，讓你求出那一天是星期幾，但是做這題之前必須先了解一點歷史。首先在1582年之前，判斷是否是閏年的標準是只要能被四整除就是閏年， 然後在1752年9月2號的後的11天被