Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用
技术qq交流群：CreDream：251572072
1.使用之前导入文件:
这里用jquery-easyui-1.2.6
2.先导入jquery.easyui.min.js
--------------------------------------
3.新建一个测试文件1.html
4.下面会把整个测试实例给大家
------------------------------
5.如果不想导入整个easyui的模块,只想导入自己用到的部分
那么可以这样做,一会上代码吧,下面有
6.下面是本次学习用的所有代码:
a.首先建立javaweb项目:EasyUITest
b.加入jquery-easyui-1.2.6
/EasyUITest/WebRoot
/EasyUITest/WebRoot/jquery-easyui-1.2.6
/EasyUITest/WebRoot/jquery-easyui-1.2.6/demo
/EasyUITest/WebRoot/jquery-easyui-1.2.6/locale
/EasyUITest/WebRoot/jquery-easyui-1.2.6/plugins
/EasyUITest/WebRoot/jquery-easyui-1.2.6/themes
/EasyUITest/WebRoot/jquery-easyui-1.2.6/changelog.txt
/EasyUITest/WebRoot/jquery-easyui-1.2.6/easyloader.js
/EasyUITest/WebRoot/jquery-easyui-1.2.6/jquery-1.7.2.min.js
/EasyUITest/WebRoot/jquery-easyui-1.2.6/jquery.easyui.min.js
/EasyUITest/WebRoot/jquery-easyui-1.2.6/licence_gpl.txt
/EasyUITest/WebRoot/jquery-easyui-1.2.6/license_commercial.txt
/EasyUITest/WebRoot/jquery-easyui-1.2.6/readme.txt
/EasyUITest/WebRoot/META-INF
/EasyUITest/WebRoot/WEB-INF
/EasyUITest/WebRoot/easyloader.html
/EasyUITest/WebRoot/easyuitest.html
/EasyUITest/WebRoot/index.jsp
------------------------------------
c.新建:easyuitest.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!-- 解决乱码问题,设置编码charset=UTF-8" -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 这里导入easyui的文件 -->
<script type="text/javascript" src="jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset='utf-8'></script>
<script type="text/javascript" src="jquery-easyui-1.2.6/jquery.easyui.min.js" charset='utf-8'></script>
<!-- 这里导入css,只需要导入themes中的easyui.css这里包含了easyui的所有的css -->
<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/default/easyui.css" type="text/css"></link>
<!-- 导入完上面的内容就可以利用easyui了 -->
<!-- 下面再导入图片的css文件 icon.css-->
<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/icon.css" type="text/css"></link>
<!-- 这个是时候easyui是英文的,这时候要用中文的需要引入locale中的 -->
<script type="text/javascript" src="jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js" charset='utf-8'></script>
<!-- 下面先介绍dialog实例 -->
<!--1.先写一个script-->
<script type="text/javascript" charset='utf-8'>
$(function(){
//这句话取得这个节点
//console.info( $('#dd'))
$('#dd').dialog({modal:true})
//console.info()这句话可以打印出这个节点是什么东西,建议用火狐debug
//用这个可以打印出选择的是个div
//alert这种方式不能体现出你选择的是什么东西
//2.这里想要把这个显示成模式化的dialog,但是dialog没有这个属性
// 这时候可以去他的父类中,window中找,可以找到modal这个模式化控制属性
// 默认是true
/*
dialog()这里的参数有
title string The dialog title text. New Dialog
collapsible boolean Defines if to show collapsible button. false
minimizable boolean Defines if to show minimizable button. false
maximizable boolean Defines if to show maximizable button. false
resizable boolean Defined if the dialog can be resized. false
toolbar array The top toolbar of dialog, each tool options is same as linkbutton. null
buttons array The bottom buttons of dialog, each button options is same as linkbutton. null
*/
});
</script>
</head>
<!-- 这里onload是在全部页面加载完之后才执行的onload='' -->
<body onload=''>
<!-- 下面先介绍dialog实例 -->
<!-- 注意这里 class='easyui-dialog'的class很重要
规则是easyui-组件名称
加了这个class之后,easyui就会把你的div变成dialog样式
Properties
The properties extend from window, below is the overridden properties for dialog
其中dialog的相关属性可以通过查找api获取
1.下面是第一种调用方法,通过div中加入class来调用
<div class='easyui-dialog' id="dd" title="My Dialog" style="width:400px;height:200px;">
Dialog Content.
</div>
-->
<div id="dd" title="My Dialog" style="width:400px;height:200px;">
Dialog Content.
</div>
<!--
这里easyui是通过Base中的parer方法来把你所填写div,变成对应组件名的组件的
ZHELI
1.$.parser.parse(); // parse all the page
2.$.parser.parse('#cc'); // parse the specified node
-->
</body>
</html>
--------------------------------------------
d.新建/EasyUITest/WebRoot/easyloader.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>1.html</title>
<!-- 下面用回调方法easyloader,只引入message这个组件,可以加快页面加载速度 -->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!-- 解决乱码问题,设置编码charset=UTF-8" -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 这里导入easyui的文件 -->
<script type="text/javascript" src="jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset='utf-8'></script>
<script type="text/javascript" src="jquery-easyui-1.2.6/easyloader.js"></script>
<!-- 下面先介绍easyloader实例 -->
<!--1.先写一个script-->
<script type="text/javascript" charset='utf-8'>
$(function(){
/*
1.单独加载一个模块
easyloader.load('dialog',function(){
$('#dd').dialog({
modal:true
});
});
*/
//2.同时加载多个模块,这里把需要加载的模块放到一个数组中
//3.这个时候也可以用class这种方式的
easyloader.load(['dialog','messager'],function(){
//a.这里调用dialog
$('#dd').dialog({
modal:true
});
//b.这里调用messager这种模块
$.messager.alert('title','load ok');
});
});
</script>
</head>
<!-- 这里onload是在全部页面加载完之后才执行的onload='' -->
<body onload=''>
<!-- 下面先介绍dialog实例 -->
<!-- 注意这里 class='easyui-dialog'的class很重要
规则是easyui-组件名称
加了这个class之后,easyui就会把你的div变成dialog样式
Properties
The properties extend from window, below is the overridden properties for dialog
其中dialog的相关属性可以通过查找api获取
1.使用easyloader的时候也可以不使用js,使用class这种方式
<div class='easyui-dialog' id="dd" title="My Dialog" style="width:400px;height:200px;">
Dialog Content.
</div>
-->
<div id="dd" class='easyui-dialog' modal='true' title="My Dialog" style="width:400px;height:200px;">
Dialog Content.
</div>
<!--
可以看到 class='easyui-dialog' modal='true'
这里把属性直接写到html中也可以,并不一定要用modal
-->
</body>
</html>
-------------------------------------------