EasyUIjavascript
1、簡介css
1.EasuyUI介紹：html
EasyUI：簡單的界面設計框架，做用主要是用來設計網站的後臺管理系統。幫助程序員快速的構建網站界面。java
二、EasyUI官網：http://www.jeasyui.comnode
三、EasyUI使用目錄介紹：jquery
demo: easui的效果示例;程序員
locale：easyui的語言文件;框架
plugins:easyUI的案例切割的js文件;佈局
src:源碼;學習
themes:easyUI提供的css樣式;
jquery.easyui.min.js:easyUI的插件;
jquery.min.js：easyUI依賴額jquery文件。
EasyUI的使用:
1 導入EasyUI的支持
2 將要使用的EasyUI加入到項目中
導入css文件
導入js文件
3 EasyUI是經過class類選擇器方式進行樣式添加的
在HTML標籤上使用class屬性直接引入EasyUI提供的樣式支持
4 使用data-options指定一些樣式效果，例如：小圖標
使用此屬性對樣式的一些特效進行自定義修改
5 同時可使用style屬性自定義
示例：
form登陸
EasyUI登陸界面：
1 優化登陸頁面：
登陸界面居中；
form表單居中顯示；
給登陸和重置添加功能；
jQuery校驗彈窗。
EasyUI主頁面佈局：
注意：先引入EasyUI相關組件。
1 body使用佈局樣式；
2 使用div進行東南西北的佈局；
3 設置能夠手動調節大小。
EasyUI主頁佈局（2）：
1 設置底部網站聲明；
2 設置頭部網站logo；
3 設置頂部用戶退出提示框；
4 設置用戶修改密碼window窗口；
5 校驗密碼修改。
EasyUI主頁佈局（3）：設置樹狀菜單和選項卡：
1 設置div的class樣式爲easyui-accordion(分類)；
2 設置ul的class樣式爲easyui-tree；
3 在ul中建立樹菜單便可；
4 在佈局的中間部分建立並設置div的class屬性爲easyui-tabs；
5 在div下建立選項卡面板便可；
EasyUI主頁佈局 (4) ：設置菜單和選項卡的聯動操做：
使用jQuery進行操做便可。
2、EasyUI實現登陸頁面
1 將EasyUI提供的js文件和主題（themes）樣式存放到項目的指定位置
2 在Html文檔中引入EasyUI的插件
3在HTML文檔標籤上遵循EasyUI的文檔規則使用EasyUI完成頁面的開發
面板使用(panel)：
建立面板：
在建立一個div標籤，並class屬性值爲："easyui-panel"。
面板屬性:
title:添加面板標題。
data-options：給面板添加經常使用的操做。具體參照API 。
添加按鈕。
信息提示。
注意：
EasyUI的使用。
經過標籤的class屬性添加基本EasyUI功能，包括樣式和jQuery操做。
data-options屬性對標籤的基本功能進行修改操做。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入CSS文件 主題css文件-->
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
<!--引入css的圖標樣式文件-->
<link rel="stylesheet" type="text/css" href="themes/icon.css" />
<!--引入js文件 兩個js的順序是不能夠互換的-->
<!--引入 jQuery中的核心文件-->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入easyui的核心js文件-->
<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入語言包-->
<script src="js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
<style> body { background-color: gray; } table { margin-top: 70px; margin-left: 100px; } tr { height: 40px; text-align: center; } </style>
<script type="text/javascript"> $(function() { $("#sub").click(function() { if($(":text").val() == "") { $.messager.alert('警告', '帳號不能爲空', 'warning'); } else if($(":password").val() == "") { $.messager.alert('警告', '密碼不能爲空', 'warning'); } else { //表單的提交 $("form").submit(); } }) $("#res").click(function() { //清空使用js的對象 $("form")[0].reset(); }) }) </script>
</head>
<body>
<div style="margin-top: 200px; margin-left: 450px;">
<div style="width: 400px; height: 300px;" class="easyui-panel" title="登陸" data-options="iconCls:'icon-liu',closable:false,
collapsible:false,minimizable:true,maximizable:true">
<form action="02主頁面.html">
<table>
<tr>
<th>帳號</th>
<th>
<input type="text" name="" id="" value="" class="easyui-validatebox" data-options="required:true" />
</th>
</tr>
<tr>
<th>密碼:</th>
<th>
<input type="password" name="" id="" value="" />
</th>
</tr>
<tr>
<th colspan="2">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" id="sub">提交</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" id="res">清空</a>
</th>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
3、EasyUI實現後臺主頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="themes/icon.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<style> #top { background-image: url(img/layout-browser-hd-bg.gif); } #top img { margin-top: 20px; margin-left: 40px; } #top>span { font-size: 25px; color: #FFFFFF; margin-left: 10px; } #div1 { float: right; margin-top: 30px; margin-right: 30px; color: #FFFFFF; font-size: 15px; } #div1 a { color: #FFFFFF; } table { margin: 0px auto; margin-top: 40px; } tr { height: 40px; text-align: center; } </style>
<script type="text/javascript"> $(function() { /*****退出操做************/ $("#zx").click(function() { $.messager.confirm("提示", "是否確認退出？", function(f) { if(f) { //進行頁面的跳轉 window.location.href = "01登陸頁面.html"; } }) }) /*******修改密碼***************/ $("#changepwd").click(function() { $("#update").window("open"); }) /*****確認提交*********/ $("#sub").click(function() { if($(":text").val() == "") { $.messager.alert('警告', '舊密碼不能爲空', 'error'); } else if($(":password").eq(0).val() == "") { $.messager.alert('警告', '新密碼不能爲空', 'error'); } else if($(":password").eq(1).val() == "") { $.messager.alert('警告', '確認密碼不能爲空', 'error'); } else if($(":password").eq(0).val() != $(":password").eq(1).val()) { $.messager.alert('警告', '兩次比較不一致', 'error'); } else { //修改爲功 $("#update").window("close"); $.messager.show({ title: '提示', msg: '密碼修改爲功', timeout: 5000, showType: 'show' }); } }) /******樹形展現***********/ $('#tt').tree({ onClick: function(node) { console.log(node); var flag = $("#tab").tabs('exists', node.text); if(flag) { //證實該選項卡已經存在 $("#tab").tabs('select', node.text); } else { //創建新的選項卡 $('#tab').tabs('add', { title: node.text, content: "<iframe src='" + node.attributes.url + "' width='100%' height='98%'></iframe>", closable: true }); } } }); }) </script>
</head>
<body class="easyui-layout">
<!--佈局：上-->
<div data-options="region:'north'" style="height: 70px;" id="top">
<img src="img/blocks.gif" />
<span>後臺管理系統</span>
<div id="div1">
<span>歡迎admin登陸</span>
<a href="javascript:void(0)" id="zx">註銷</a>|
<a href="#" id="changepwd">修改密碼</a>
</div>
</div>
<!--佈局：下-->
<div data-options="region:'south'" title="bottom" style="height: 80px;"></div>
<!--佈局：左-->
<div data-options="region:'west'" title="導航信息" style="width: 200px;">
<div class="easyui-accordion" data-options="fit:true,animate:true">
<div title="導航一">
<ul class="easyui-tree" id="tt">
<li>
<span>購物網站</span>
<ul>
<li data-options="attributes:{url:'http://www.baidu.com'}">百度一下</li>
<li data-options="attributes:{url:'http://www.taobao.com'}">淘寶一下</li>
<li data-options="attributes:{url:'http://www.jd.com'}">京東一下</li>
</ul>
</li>
<li>
<span>學習網站</span>
<ul>
<li>百度一下</li>
<li>淘寶一下</li>
<li>京東一下</li>
</ul>
</li>
<li>其餘網站</li>
</ul>
</div>
<div title="導航二">
導航二
</div>
<div title="導航三">
導航三
</div>
</div>
</div>
<!--佈局：右-->
<div data-options="region:'east'" title="其餘" style="width: 150px;"></div>
<!--佈局：中-->
<div data-options="region:'center'" title="cen">
<div class="easyui-tabs" data-options="fit:true" id="tab">
<div title="tab1">123</div>
</div>
</div>
<!--修改密碼的窗口-->
<div id="update" class="easyui-window" style="width: 400px; height: 300px;" title="修改密碼" data-options="iconCls:'icon-save',modal:true,closed:true">
<table>
<tr>
<th>舊密碼:</th>
<th>
<input type="text" name="" id="" value="" />
</th>
</tr>
<tr>
<th>新密碼:</th>
<th>
<input type="password" name="" id="" value="" />
</th>
</tr>
<tr>
<th>確認密碼:</th>
<th>
<input type="password" name="" id="" value="" />
</th>
</tr>
<tr>
<th colspan="2">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" id="sub">提交</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" id="res">清空</a>
</th>
</tr>
</table>
</div>
</body>
</html>
注：缺乏資源素材文件的能夠私聊索取