當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EasyUI(搭建框架layout布局)

發布時間：2023/12/2 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 EasyUI(搭建框架layout布局) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、介紹

二、需要的工具

三、搭建框架

四、layout布局

五、總結

一、介紹

easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。

easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。

使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。

easyui是個完美支持HTML5網頁的完整框架。

easyui節省您網頁開發的時間和規模。

easyui很簡單但功能強大的。

二、需要的工具

?1、eclipse

?2、EasyUI插件包

?3、Tomcat

三、搭建框架

1、創建一個web項目

2、導入EasyUI必要的css樣式和js文件

3、在jsp頁面中引入css樣式和js文件

4、關于文件路徑問題

? ? ? ? 4.1、我們可以使用一個公用的head.jsp頁面來統一引入需要的資源，其他頁面使用include進行引入，便于管理。

? ? ? ? 4.2、在webapp下創建common目錄， head.jsp

????????

? ? ? ? ?4.3、將引入樣式和文件的代碼移到head.jsp中

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%//拿到絕對路徑，例如：demo/ request.setAttribute("ctx", request.getContextPath()); %><script type="text/javascript" src="${ctx }/js/jquery-easyui-1.5.5.2/jquery.min.js"></script> <script type="text/javascript" src="${ctx }/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script> <script type="text/javascript" src="${ctx }/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="${ctx }/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="${ctx }/js/jquery-easyui-1.5.5.2/themes/icon.css"/><script type="text/javascript">//將拿到的路徑賦值給js變量var ctx = "${ctx}"; </script>

? ? ? ? 4.4、使用包含導入到其他的jsp頁面中

<%@ include file="common/head.jsp" %>

四、layout布局

<body class="easyui-layout"> <div data-options="region:'north',title:'蕪湖',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'功能導航',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div><div data-options="region:'south',split:true" style=" text-align:center;height:30px;background: #E0ECFF" class="panel-title">Copyright@XXXX有限責任公司</div> </body>

五、總結

其實EasyUI很簡單，不需要記什么代碼，只需要留下印象，要用的時候直接去查API文檔就行了

總結

以上是生活随笔為你收集整理的EasyUI(搭建框架layout布局)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。