EasyUI-基本框架
目錄
1. 什么是EasyUI?
????????1.1 下載地址
????????1.2 在線文檔
2. easyui如何使用？
?3. 組鍵
4. 如何使用EasyUI
4.1?引入相關文件
4.2 使用官網插件
4.3 實現效果
1. 什么是EasyUI?
????????jQuery EasyUI 是一個基于 jQuery 的框架，集成了各種用戶界面插件。jQuery EasyUI的目標就是幫助web開發者更輕松的打造出功能豐富并且美觀的UI界面。開發者不需要編寫復雜的javascript，也不需要對css樣式有深入的了解，開發者需要了解的只有一些簡單的html標簽。
????????1.1 下載地址
????????EasyUI官方下載地址：http://www.jeasyui.com/download/index.php
????????1.2 在線文檔
????????JQuery EasyUI中文網 (jeasyui.net)（中文網）
????????EasyUI - 幫助您輕松構建網頁 (jeasyui.com)（英文版）
2. easyui如何使用？
????????引入必要的js和css樣式文件
????????1）引入JQuery（jquery.min.js）
????????2）引入EasyUI（jquery.easyui.min.js）
????????3）引入EasyUI的中文國際化js，讓EasyUI支持中文（locale/easyui-lang-zh_CN.js）
????????4）引入EasyUI的樣式文件（/themes/default/easyui.css）
????????5）引入EasyUI的圖標樣式文件（/themes/icon.css）
?3. 組鍵
?????????分類：Base（基礎）、Layout（布局）、Menu and Button（菜單和按鈕）、Form（表單）、Window（窗口）、
DataGrid and Tree（表格和樹）、Extension（擴展）
本章節主要講述以下組件的使用：
1）layout（布局組件）
2）accordion（分類組件）
3）tree（樹形組件）
4）tabs（選項卡組件）
5）datagrid和pagination（表格和分頁組件）
6）dialog和messager（窗口組件）
7）form（表單組件）
4. 如何使用EasyUI
4.1?引入相關文件
<!-- jquery --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!-- 引入EasyUI相關文件 --> <!-- 圖標庫 --> <link rel="js/jquery-easyui-1.5.5.2/themes/icon.css"> <!-- 樣式文件 --> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css"> <!-- js文件 --> <script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>4.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>Insert title here</title> <!-- 通過incloud指令引入公共部分頁面head.jsp --> <%@ include file="static/common/head.jsp" %> </head> <body class="easyui-layout"> <div data-options="region:'north',title:'網上書城',split:true" style="height:150px;"></div> <div data-options="region:'south',title:'版權/鏈接',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'菜單管理',split:true" style="width:200px;"><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;">Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div></div> <div data-options="region:'center',title:'評論區域'" style="padding:5px;background:#eee;"><div id="tt" class="easyui-tabs" style="width:100%;height:100%;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab3 </div> </div> </div> </body> </html>4.3 實現效果
總結
以上是生活随笔為你收集整理的EasyUI-基本框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI(搭建框架layout布局)
- 下一篇： EasyUI框架