easyUI学习记录(一)- Helloword&&easyloader介绍
来源:互联网 发布:java学籍管理系统代码 编辑:程序博客网 时间:2024/05/17 04:47
2014年9月17日
easyUI1.4文件以及中文版API下载地址:http://pan.baidu.com/s/1jG7QkF8
1. 怎样使用easyUI?
① 引入jQuery文件(建议使用easyUI版本中自带的)
② 引入easyUI文件
③ 引入easyUI样式
④ 引入easyUI图标
⑤ 引入本地化文件
<scripttype="text/javascript"src="../js/jquery-easyui-1.4/jquery.min.js"></script>
<scripttype="text/javascript"src="../js/jquery-easyui-1.4/jquery.easyui.min.js"></script>
<linkrel="stylesheet"href="../js/jquery-easyui-1.4/themes/default/easyui.css"type="text/css"></link>
<link rel="stylesheet" href="../js/jquery-easyui-1.4/themes/icon.css"type="text/css"></link>
<script type="text/javascript" src="../js/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>
在引入js文件时,要注意jQuery和easyUI的顺序,由于easyUI是基于jQuery开发的,所以要先引入jQuery。
2. 实例
作为程序员的我们每学习一种语言首先要写的程序是Helloworld程序。easyUI也不例外。下面我们以dialog为例:
2.1 纯HTML语言的方式:
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;">Hello</div>
在没有js时:通过配置calss=”easyui-*” *为组件名称。这样就能将easyUI的组件样式引入进来。但是为什么呢?其功能要归功于easyUI的parser(暂时不说)。
2.2 JS方式:
<div id="dd" title="My Dialog" style="width:400px;height:200px;">Hello</div>
<scripttype="text/javascript">
$(function(){
$("#dd").dialog({
modal:true //模式化
});
});
</script>
介绍一个调试打印功能的方法console.info($("#dd"));这样在debug的控制台上打印出来。如果用alert的话,永远都是object。
Dialog本身没有modal的属性但是Dialog继承与window,window下面具有modal属性。
3. Easyloader(简单加载)
对于有严重洁癖的人来说,会对上述引入的多个js、css等有点恐惧。同时由于easyUI文件的大小为300K左右,css大小50K,会在一定程度上影响网速。对于网速较低的用户会出现延迟等。这样就可以使用Easyloader进行使用的简单加载。
首先我们看一下Easyloader组件的API:下面是easyloader的一个唯一的方法
API的使用方法:
API属性:
使用方法:
以js方式实现:
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title here</title>
<scripttype="text/javascript"src="../js/jquery-easyui-1.4/jquery.min.js"></script>
<scripttype="text/javascript"src="../js/jquery-easyui-1.4/easyloader.js"></script>
<scripttype="text/javascript">
$(function(){
//console.info()
easyloader.load(["dialog","messager"],function(){
$("#dd").dialog({
modal:true //模式化
});
$.messager.alert('Title','load ok');
});
});
</script>
</head>
<body>
<ahref="www.baidu.com">baidu</a>
<divid="dd"title="My Dialog"style="width:400px;height:200px;">Dialog Demos</div>
</body>
</html>
在这里easyloader.load()可以简写成using
以HTML方式实现
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title here</title>
<scripttype="text/javascript"src="../js/jquery-easyui-1.4/jquery.min.js"></script>
<scripttype="text/javascript"src="../js/jquery-easyui-1.4/easyloader.js"></script>
<scripttype="text/javascript">
</script>
</head>
<body>
<ahref="www.baidu.com">baidu</a>
<divid="dd"class="easyui-dialog"title="My Dialog"style="width:400px;height:200px;">Dialog Demos</div>
</body>
</html>
- easyUI学习记录(一)- Helloword&&easyloader介绍
- jQuery EasyUI中EasyLoader的使用记录
- jQuery EasyUI 的EasyLoader功能介绍
- jQuery EasyUI 的EasyLoader功能介绍
- easyUI EasyLoader
- easyUI--easyLoader
- (一)jQuery EasyUI 的EasyLoader加载原理
- 学习使用EasyUI之easyloader加载
- Easyui EasyLoader(加载器)用法
- EasyUI Base - EasyLoader(加载器)
- easyUI学习记录(二)- Parser&&Panel介绍
- webwork学习笔记(一):helloword
- RabbitMQ学习(一)之helloword(java)
- disruptor学习教程(一)helloWord
- Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用
- Ui学习笔记---EasyUI的EasyLoader组件源码分析
- Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用
- EasyUI学习总结(二)——easyloader分析与使用
- 執觴請換 表憲
- <leetcode> Permutations
- 不懂语言代码,超级菜鸟的建站分享(二):界面设置
- 优化工具 Neos Server
- IntelliJ IDEA快捷键
- easyUI学习记录(一)- Helloword&&easyloader介绍
- LoadRunner代码模拟参数化过程
- Wildcard Matching
- LeetCode总结 -- 图篇
- 第六章、Linux 的文件权限与目录配置
- android 瀑布流分析
- 微软疯狂之举,25亿天价收购Mojang是否值得?
- 脱离屌丝426天
- IOS算法(三)之插入排序