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

编程问答

【EasyUI】EasyUI学习笔记

發布時間：2024/2/28 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了【EasyUI】EasyUI学习笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一.EasyUI 簡介

1.EasyUI 是前端框架.

2.前端框架
2.1 封裝大量css
2.2 封裝大量JS

3.使用前端框架
3.1 給標簽設置easyui提供的 class 屬性即可，id屬性可以隨便起名。

4.easyui 中需要注意的地方
4.1 data-options 屬性定義easyui 屬性的.
4.2 如果easyui 提供的屬性和html 標簽屬性相同,可以把這個屬性
不寫在data-options 中
4.3 每一個效果使用純標簽方式和使用標簽結合js 方式
4.3.1 如果效果是靜態的建議使用純html 標簽方式
4.3.2 如果效果是動態建議使用html 結合js 方式
4.4 在easyui 中所有腳本功能語法:
4.4.1 如果該效果(組件)是abc,控制abc 的語法

$(“jquery 選擇器獲取到abc”).abc({屬性名:值,事件:function([參數]){} })

4.4.2 如果該效果(組件)是abc,控制abc 方法的語法

$(“jquery 選擇器獲取到abc”).abc(“方法名”);//調用方法 $(“jquery 選擇器獲取到abc”).abc(“方法名”,”參數”);//調用方法

4.5 每個組件可能會有繼承關系.

5.EasyUI 適用于后臺管理界面,不適用于前臺項目頁面.用于處理服務器端處理真實數據的效率比較高。
5.1 優點:處理服務器傳遞過來json 數據能力比較強.

登錄頁面示例

<%@ 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> <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css"> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script> <style type="text/css"> .myicon-login{background:url('images/login.png') no-repeat center center; } </style> <script type="text/javascript"> $(function(){$("#login_submit").click(function(){$('#login_form').form('submit', { url:'login', onSubmit: function(){ //非空驗證等 if($(":text:eq(0)").val()==""){$.messager.alert('系統信息','用戶名不能為空');return false;}else if($(":password:eq(0)").val()==""){$.messager.alert('系統信息','密碼不能為空');return false;}}, success:function(data){ if(data=="1"){location.href="page/main.jsp";}else{$.messager.alert('系統信息','登錄失敗'); }} });}) }) </script> </head> <body style="background-color:#E9F1FF;"><div style="margin:100px auto;width:400px;"><div id="p" class="easyui-panel" title="登錄" style="width:400px;height:200px;padding:10px;background:#fafafa;" data-options="iconCls:'myicon-login'"> <form action="login" method="post" id="login_form"><table width="225" align="center"><tr><td colspan="2" style="text-align:center;font-size:20px; font-weight:bold">至尊管理系統</td></tr><tr style="height:40px;"><td>登錄名</td><td><input type="text" name="username"/> </td></tr><tr style="height:40px;"><td>密碼</td><td><input type="password" name="password"/> </td></tr><tr><td colspan="2" align="right"><a id="login_submit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">登錄</a> </td></tr></table></form></div></div> </body> </html>

根據不同用戶顯示不同頁面

使用json的樹，要求數據格式：EasyUI官方文檔-樹的數據格式

每個節點可以包括下列屬性：
id：節點的 id，它對于加載遠程數據很重要。
text：要顯示的節點文本。
state：節點狀態，‘open’ 或 ‘closed’，默認是 ‘open’。當設置為 ‘closed’ 時，該節點有子節點，并且將從遠程站點加載它們。
checked：指示節點是否被選中。
attributes：給一個節點添加的自定義屬性。
children：定義了一些子節點的節點數組。

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>主頁面</title><link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css"> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script><script type="text/javascript">$(function(){$('#main_tree').tree({ url:"data/tree_data.json",onClick:function(node){if($("#main_tabs").tabs("getTab",node.text)==null){//alert(node.text);$('#main_tabs').tabs('add',{title: node.text,selected: true,//content:'<b>adsfadsf</b>'//只能引進來<body>標簽的內容href:node.attributes.filename,closable:true});}else{$("#main_tabs").tabs("select",node.text);}}}); })</script></head><body class="easyui-layout"><div data-options="region:'north',title:'至尊管理系統'" style="height:100px;"><div style="width:400px;height:50px; float:left;font-size:20px; font-weight:bold;line-height: 50px;padding-left:20px;">至尊管理系統</div><div style="width:200px;height:50px;float:right;line-height: 50px;">您好,用戶,歡迎登錄!</div></div> <div data-options="region:'west',title:'菜單'" style="width:200px;"><ul id="main_tree"></ul> </div><div data-options="region:'center',title:'內容'" style="padding:5px;background:#eee;"><div id="main_tabs" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true"> <div title="首頁" style="padding:20px;"> tab1 </div><div title="第二頁" style="padding:20px;"> tab2 </div> </div></div><div data-options="region:'south',title:'底部聲明'" style="height:100px;"><div style="height:50px; line-height: 50px; text-align:center;color:gray">Copyright © 版權</div></div></body> </html>

總結

以上是生活随笔為你收集整理的【EasyUI】EasyUI学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：【JQuery】JQuery学习笔记
下一篇： Jquery中的$(document).