【EasyUI】EasyUI学习笔记
生活随笔
收集整理的這篇文章主要介紹了
【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 的語法
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：定義了一些子節點的節點數組。
總結
以上是生活随笔為你收集整理的【EasyUI】EasyUI学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【JQuery】JQuery学习笔记
- 下一篇： 在JS中如何判断undefined和nu