jQuery EasyUI詳解-EasyUI佈局和標籤頁

阿新 • • 發佈：2019-01-11

EasyUI的佈局非常簡單，但是也能充分滿足網頁日常的佈局，先來一個最基本的例子：
這裡寫圖片描述

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>佈局和標籤頁</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" 
>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </head>
  <body>
  <!-- 通過設定寬度和左右邊距auto使form居中 --> 

  <form class="main_form" style="margin:8px auto;width:600px;">
     <div>標準的EasyUI東西南北中佈局,注意easyui-layout標誌著這個div使用佈局,而split:true表示區域之間採用分割欄</div>
     <div class="easyui-layout" style="width:600px;height:300px;">
        <div data-options="region:'north'" style="height:32px"> 
</div>
        <div data-options="region:'south',split:true" style="height:32px;"></div>
        <div data-options="region:'east',split:true" title="東" style="width:80px;"></div>
        <div data-options="region:'west',split:true" title="西" style="width:80px;"></div>
        <div data-options="region:'center',title:'內容區域',iconCls:'icon-ok'">這裡是內容區域，注意是通過region:'center'設定的</div>
    </div>
  </form>
  <script type="text/javascript"></script>
  </body>
</html>

需要注意的是，EasyUI的佈局支援巢狀，所以可以在任意區域內再巢狀一個區域。當然，如果只需要左右兩列的佈局，只需要儲存region:’east’和region:’west’即可。

哈哈，看到上面的佈局，是不是感覺到很像某個網站後臺的管理頁面。是的，只要稍加改動，讓佈局佔滿整個頁面，就是一個精美的後臺管理模版了。所以，直接對body設定easyui-layout佈局方式就好了，如下：
這裡寫圖片描述

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>佈局和標籤頁</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </head>
  <body class="easyui-layout">
        <div data-options="region:'north',border:false" style="height:48px;background:#B3DFDA;padding:10px">
            這個地方放一個漂亮的標題欄圖片和企業logo
        </div>
        <div data-options="region:'west',split:true,title:'選單欄'" style="width:150px;padding:10px;">
            <ul>
                <li><a href="#">選單1</a></li>
                <li><a href="#">選單2</a></li>
                <li><a href="#">選單3</a></li>
                <li><a href="#">選單4</a></li>
                <li><a href="#">選單5</a></li>
            </ul>
        </div>
        <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;text-align:center;">
            版權所有區域
        </div>
        <div data-options="region:'center',title:'內容區域'" style="padding:10px;">
            此處放置點選選單之後對應頁面
        </div>
  </body>
</html>

本篇的最後，介紹以下tabs標籤面板，使用方法也很簡單，當對一個div標籤採用easyui-tabs樣式後，此div會自動的將其內的子div分為不同的標籤頁。OK，演示如下：
這裡寫圖片描述

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>標籤頁</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </head>
<body>
    <div class="easyui-tabs" style="width:500px;height:300px">
        <div title="操作" data-options="iconCls:'icon-ok'" style="padding:10px">
            操作頁
        </div>
        <div title="幫助" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
            需要注意closable:true表示採用關閉按鈕
        </div>
        <div title="第三頁" style="padding:10px">
            第三頁的內容
        </div>
    </div>
</body>
</html>

jQuery EasyUI詳解-EasyUI佈局和標籤頁

EasyUI的佈局非常簡單，但是也能充分滿足網頁日常的佈局，先來一個最基本的例子： <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYP

jQuery EasyUI詳解-EasyUI環境配置

需要預先說明的一點是，不管是EasyUI也好，Bootstrap也罷，都可以認為是在CSS、Javascript、jQuery上再封裝了一層。所以我們來看一個十分簡單的例子： <a href="#" class="easyui-linkbutton"

jQuery EasyUI詳解-EasyUI下拉列表datalist

本篇主要介紹下拉列表控制元件的資料繫結和下拉列表選中項的獲取。與下拉框有兩點不同，第一是外觀上下拉列表會同時顯示多個待選項，第二是下拉列表會經常遇到需要多選的情況。之前貓哥自己也沒在EasyUI中遇到過使用下拉列表時，同時獲取多個選中項的功能，今天寫DE

iOS狂暴之路--兩種佈局方式操作詳解(xib檔案和程式碼編寫)

一、前言在Android中我們進行佈局操作也是有兩種方式，一種是直接手寫xml佈局，還有一種就是用程式碼編寫，在iOS中其實也是類似，有兩種方式一種是xib檔案，一種程式碼編寫。本文就來介紹iOS開發中最麻煩的最常用的知識佈局內容。有了這些知識之後結合之前的講解的網路和多

easyUI詳解

1、EasyUI 是前端框架，封裝大量 css和封裝大量 JS 2、使用前端框架時，給標籤定義class 屬性，就會有樣式和指令碼功能了 3、data-options 屬性是定義 easyui 屬性的，如果 easyui 提供的屬性和 html 標籤屬性相同,這個屬性可以不寫在 data-options

筆記：MyBatis Mapper XML文件詳解 - 映射和參數

gin server 頂級 ctp columns ref acl 目標對象傳遞 MyBatis 的真正強大在於它的映射語句，也是它的魔力所在。由於它的異常強大，映射器的 XML 文件就顯得相對簡單。如果拿它跟具有相同功能的 JDBC 代碼進行對比，你會立即發現省掉了將近

Spring Boot 配置文件詳解：Properties和YAML

列表 config 其他操作系統 des num mat 變量 onf 一.配置文件的生效順序，會對值進行覆蓋： 1. @TestPropertySource 註解 2. 命令行參數 3. Java系統屬性（System.getProperties

詳解懶漢模式和餓漢模式以及他們的改進

下一步例子理解創建對象進行有一個這就是 cnblogs 多人提到單例模式的話相信很多人都不會陌生，一般初級程序員也知道懶漢模式和餓漢模式。那麽什麽是單例模式呢？我個人低的理解就是當用這個類的對象的時候就只能創建同一個對象。是你，是你，還是你！而在單例模式中

Linux rpm 命令參數使用詳解［介紹和應用］

使用詳解 gtk ont 由於 ins toolbar root 重新整理完成後參考來源：http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/10/08/2203153.html rpm 執行安裝包二進制包（Bi

MyBatis之Mapper XML 文件詳解(二)-sql和入參

java mybatis sql 參數 mapper sql這個元素可以被用來定義可重用的 SQL 代碼段，可以包含在其他語句中。它可以被靜態地(在加載參數) 參數化. 不同的屬性值通過包含的實例變化. 比如：<sql id="userColumns"> $

Net Core中數據庫事務隔離詳解——以Dapper和Mysql為例

事務 ring 增刪改 tostring 測試 stc efault 多個 log Net Core中數據庫事務隔離詳解——以Dapper和Mysql為例事務隔離級別準備工作 Read uncommitted 讀未提交 Read committed 讀取提交內

jQuery動畫詳解

總結當前 adding 什麽設置 fas 永遠 hide 底層本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。以下是正文。前言 jQuery提供的一組網頁中常見的動畫效果，這些動畫是標準的、有

Linux守護進程詳解(init.d和xinetd)

ger 發行版數據報支持字符串 rdp 任務超級客戶機一 Linux守護進程 Linux 服務器在啟動時需要啟動很多系統服務，它們向本地和網絡用戶提供了Linux的系統功能接口，直接面向應用程序和用戶。提供這些服務的程序是由運行在後臺的守護進程來執行的。守護進

Python-Flask框架之——圖書管理系統 , 附詳解源碼和效果圖 !

數據庫 mysql AS image http 分享圖片 bubuko 書籍 sql 該圖書管理系統要實現的功能: 1. 可以通過添加窗口添加書籍或作者, 如果要添加的作者和書籍已存在於書架上, 則給出相應的提示. 2. 如果要添加的作者存在, 而要添加的書籍書架上沒有,

【轉】Linux rpm 命令參數使用詳解［介紹和應用］

binary 包管理 samba cpio 詳解 -- hash pos 升級 RPM是RedHat Package Manager（RedHat軟件包管理工具）類似Windows裏面的“添加/刪除程序” rpm 執行安裝包二進制包（Binary）以及源代碼包（So

詳解C#特性和反射（三）

typeinfo ref 都是 system.in 全局 color com 依然程序　　類型信息（Type Information）用來表示類型聲明的信息，通過抽象基類System.Type的實例存儲這些信息，當使用反射時，CLR獲取指定類型的Type對象，通過這個對

Redis全方位詳解--磁碟持久化和容災備份

序言在上一篇部落格中，部落格介紹了redis的資料型別使用場景和redis分散式鎖的正確姿勢。我們知道一旦Redis重啟，存在redis裡面的資料就會全部丟失。所以這篇部落格中向大家介紹Redis的磁碟持久化。 REDIS持久化　　以每隔一段時間對redis進行快照的方

Linux用戶搶占和內核搶占詳解(概念, 實現和觸發時機)--Linux進程的管理與調度(二十）

amp 3.1 not 職責 mon 顯式 default hust ron 1 非搶占式和可搶占式內核為了簡化問題，我使用嵌入式實時系統uC/OS作為例子首先要指出的是，uC/OS只有內核態，沒有用戶態，這和Linux不一樣多任務系統中, 內核負責管理各個任務, 或

一文詳解卷積和逆卷積

文章目錄一文詳解卷積和逆卷積卷積運算單通道多通道卷積運算的引數計算逆卷積卷積運算的矩陣實現參考資料一文詳解卷積和逆卷積卷積神經

詳解C#委託和事件（二）

　　一、當我們使用關鍵字delegate宣告一個自定義委託型別時，實際上是聲明瞭一個該名稱的類型別，繼承自抽象類System.MulticastDelegate，還包含例項方法Invoke、BeginInvoke、EndInvoke：　　public delegate void MyDelegate

jQuery EasyUI詳解-EasyUI佈局和標籤頁

相關推薦