分类: javascript2011-05-18 21:10 692人阅读 收藏 举报
Jquery easyui是一个javascript UI 组件库,使用它可以快速开发企业级的业务系统。如果你正准备开发系统后台,可以选择jquery easyui,也可以选择Ext JS。我个人的看法是,如果开发团队就两三个人,开发工期很短,就一两个月。那么选择jquery easyui就对了,jquery easyui源代码量不多,便于阅读和自行修改。而Ext JSy源代码太多,短时间很难看完,学习曲线也比较陡峭。如果人手充足,时间也富裕,可以考虑使用Ext JS来开发,毕竟Ext JS更强大,控件更多。
Jquery easyui是基于Jquery插件机制扩展的,所以如果你很熟悉Jquery,那么使用它开发会很简单。
Jquery easyui的源代码svn地址:http://jquery-easyui.googlecode.com/svn
easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依赖关系,先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成easyui的控件。
先看Demo1例子,再分析源代码。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Demo1</title>
- <mce:script type="text/javascript" src="jquery-easyui-1.2.3/jquery-1.4.4.min.js" mce_src="jquery-easyui-1.2.3/jquery-1.4.4.min.js"></mce:script>
- <mce:script type="text/javascript" src="jquery-easyui-1.2.3/easyloader.js" mce_src="jquery-easyui-1.2.3/easyloader.js"></mce:script>
- </head>
- <body>
- <div class="easyui-panel" title="Demo1" fit="true" collapsible="true" minimizable="true" maximizable="true" closable="true" style="width: 100%; height: 200px;" >
- easyloader会自动解析这个div,因为class属性中带有easyui开头的类!
- </div>
- </body>
- </html>
还有一种正常加载方法,不使用easyuiloader来加载。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Demo2</title>
- <link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.3/themes/default/easyui.css" mce_href="jquery-easyui-1.2.3/themes/default/easyui.css">
- <link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.3/themes/icon.css" mce_href="jquery-easyui-1.2.3/themes/icon.css">
- <mce:script type="text/javascript" src="jquery-easyui-1.2.3/jquery-1.4.4.min.js" mce_src="jquery-easyui-1.2.3/jquery-1.4.4.min.js"></mce:script>
- <mce:script type="text/javascript" src="jquery-easyui-1.2.3/jquery.easyui.min.js" mce_src="jquery-easyui-1.2.3/jquery.easyui.min.js"></mce:script>
- </head>
- <body>
- <div class="easyui-panel" title="Demo1" fit="true" collapsible="true" minimizable="true" maximizable="true" closable="true" style="width: 100%; height: 200px;" >
- easyloader会自动解析这个div,因为class属性中带有easyui开头的类!
- </div>
- </body>
- </html>
这两种方法都行,作者开发此模块,说明应该尽量使用easyuiloader来加载。因为他定制性更强,可以自定义主题和国际化等。而压缩过的文件的优势在于一次性把所有模块都加载进来,速度上更快。
-
-
-
-
-
-
-
-
-
- (function(){
-
- var modules = {
- draggable:{
- js:'jquery.draggable.js'
- },
- droppable:{
- js:'jquery.droppable.js'
- },
- resizable:{
- js:'jquery.resizable.js'
- },
- linkbutton:{
- js:'jquery.linkbutton.js',
- css:'linkbutton.css'
- },
- pagination:{
- js:'jquery.pagination.js',
- css:'pagination.css',
- dependencies:['linkbutton']
- },
- datagrid:{
- js:'jquery.datagrid.js',
- css:'datagrid.css',
- dependencies:['panel','resizable','linkbutton','pagination']
- },
- treegrid:{
- js:'jquery.treegrid.js',
- css:'tree.css',
- dependencies:['datagrid']
- },
- panel: {
- js:'jquery.panel.js',
- css:'panel.css'
- },
- window:{
- js:'jquery.window.js',
- css:'window.css',
- dependencies:['resizable','draggable','panel']
- },
- dialog:{
- js:'jquery.dialog.js',
- css:'dialog.css',
- dependencies:['linkbutton','window']
- },
- messager:{
- js:'jquery.messager.js',
- css:'messager.css',
- dependencies:['linkbutton','window']
- },
- layout:{
- js:'jquery.layout.js',
- css:'layout.css',
- dependencies:['resizable','panel']
- },
- form:{
- js:'jquery.form.js'
- },
- menu:{
- js:'jquery.menu.js',
- css:'menu.css'
- },
- tabs:{
- js:'jquery.tabs.js',
- css:'tabs.css',
- dependencies:['panel','linkbutton']
- },
- splitbutton:{
- js:'jquery.splitbutton.js',
- css:'splitbutton.css',
- dependencies:['linkbutton','menu']
- },
- menubutton:{
- js:'jquery.menubutton.js',
- css:'menubutton.css',
- dependencies:['linkbutton','menu']
- },
- accordion:{
- js:'jquery.accordion.js',
- css:'accordion.css',
- dependencies:['panel']
- },
- calendar:{
- js:'jquery.calendar.js',
- css:'calendar.css'
- },
- combo:{
- js:'jquery.combo.js',
- css:'combo.css',
- dependencies:['panel','validatebox']
- },
- combobox:{
- js:'jquery.combobox.js',
- css:'combobox.css',
- dependencies:['combo']
- },
- combotree:{
- js:'jquery.combotree.js',
- dependencies:['combo','tree']
- },
- combogrid:{
- js:'jquery.combogrid.js',
- dependencies:['combo','datagrid']
- },
- validatebox:{
- js:'jquery.validatebox.js',
- css:'validatebox.css'
- },
- numberbox:{
- js:'jquery.numberbox.js',
- dependencies:['validatebox']
- },
- spinner:{
- js:'jquery.spinner.js',
- css:'spinner.css',
- dependencies:['validatebox']
- },
- numberspinner:{
- js:'jquery.numberspinner.js',
- dependencies:['spinner','numberbox']
- },
- timespinner:{
- js:'jquery.timespinner.js',
- dependencies:['spinner']
- },
- tree:{
- js:'jquery.tree.js',
- css:'tree.css',
- dependencies:['draggable','droppable']
- },
- datebox:{
- js:'jquery.datebox.js',
- css:'datebox.css',
- dependencies:['calendar','validatebox']
- },
- parser:{
- js:'jquery.parser.js'
- }
- };
-
-
- var locales = {
- 'af':'easyui-lang-af.js',
- 'bg':'easyui-lang-bg.js',
- 'ca':'easyui-lang-ca.js',
- 'cs':'easyui-lang-cs.js',
- 'da':'easyui-lang-da.js',
- 'de':'easyui-lang-de.js',
- 'en':'easyui-lang-en.js',
- 'fr':'easyui-lang-fr.js',
- 'nl':'easyui-lang-nl.js',
- 'zh_CN':'easyui-lang-zh_CN.js',
- 'zh_TW':'easyui-lang-zh_TW.js'
- };
-
-
- var queues = {};
-
-
-
-
-
-
- function loadJs(url, callback){
- var done = false;
- var script = document.createElement('script');
- script.type = 'text/javascript';
- script.language = 'javascript';
- script.src = url;
- script.onload = script.onreadystatechange = function(){
- if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')){
- done = true;
- script.onload = script.onreadystatechange = null;
- if (callback){
- callback.call(script);
- }
- }
- }
- document.getElementsByTagName("head")[0].appendChild(script);
- }
-
-
-
-
-
-
- function runJs(url, callback){
- loadJs(url, function(){
- document.getElementsByTagName("head")[0].removeChild(this);
- if (callback){
- callback();
- }
- });
- }
-
-
-
-
-
-
- function loadCss(url, callback){
- var link = document.createElement('link');
- link.rel = 'stylesheet';
- link.type = 'text/css';
- link.media = 'screen';
- link.href = url;
- document.getElementsByTagName('head')[0].appendChild(link);
- if (callback){
- callback.call(link);
- }
- }
-
-
-
-
- function loadSingle(name, callback){
-
-
- queues[name] = 'loading';
-
-
- var module = modules[name];
-
-
- var jsStatus = 'loading';
-
-
- var cssStatus = (easyloader.css && module['css']) ? 'loading' : 'loaded';
-
-
- if (easyloader.css && module['css']){
- if (/^http/i.test(module['css'])){
- var url = module['css'];
- } else {
- var url = easyloader.base + 'themes/' + easyloader.theme + '/' + module['css'];
- }
- loadCss(url, function(){
- cssStatus = 'loaded';
- if (jsStatus == 'loaded' && cssStatus == 'loaded'){
- finish();
- }
- });
- }
-
-
- if (/^http/i.test(module['js'])){
- var url = module['js'];
- } else {
- var url = easyloader.base + 'plugins/' + module['js'];
- }
- loadJs(url, function(){
- jsStatus = 'loaded';
- if (jsStatus == 'loaded' && cssStatus == 'loaded'){
- finish();
- }
- });
-
-
- function finish(){
- queues[name] = 'loaded';
- easyloader.onProgress(name);
- if (callback){
- callback();
- }
- }
- }
-
-
-
-
-
-
- function loadModule(name, callback){
-
-
- var mm = [];
-
-
- var doLoad = false;
-
-
- if (typeof name == 'string'){
-
- add(name);
- } else {
- for(var i=0; i<name.length; i++){
-
- add(name[i]);
- }
- }
-
-
-
-
-
- function add(name){
-
- if (!modules[name]) return;
-
-
- var d = modules[name]['dependencies'];
- if (d){
-
-
- for(var i=0; i<d.length; i++){
- add(d[i]);
- }
- }
-
-
- mm.push(name);
- }
-
-
-
-
- function finish(){
- if (callback){
- callback();
- }
- easyloader.onLoad(name);
- }
-
-
- var time = 0;
-
-
-
-
- function loadMm(){
-
- if (mm.length){
-
-
- var m = mm[0];
-
-
- if (!queues[m]){
-
-
-
- doLoad = true;
-
-
- loadSingle(m, function(){
- mm.shift();
- loadMm();
- });
- } else if (queues[m] == 'loaded'){
-
- mm.shift();
- loadMm();
- } else {
-
-
- if (time < easyloader.timeout){
- time += 10;
- setTimeout(arguments.callee, 10);
- }
- }
- } else {
-
- if (easyloader.locale && doLoad == true && locales[easyloader.locale]){
-
- var url = easyloader.base + 'locale/' + locales[easyloader.locale];
-
-
- runJs(url, function(){
- finish();
- });
- } else {
-
- finish();
- }
- }
- }
-
- loadMm();
- }
-
-
-
-
- easyloader = {
-
-
- modules:modules,
-
-
- locales:locales,
-
-
- base:'.',
-
-
- theme:'default',
-
-
- css:true,
-
-
-
- locale:null,
-
-
- timeout:2000,
-
-
-
- load: function(name, callback){
- if (
-
-
- if (/^http/i.test(name)){
-
- loadCss(name, callback);
- } else {
-
- loadCss(easyloader.base + name, callback);
- }
- } else if (
-
-
- if (/^http/i.test(name)){
-
- loadJs(name, callback);
- } else {
-
- loadJs(easyloader.base + name, callback);
- }
- } else {
-
- loadModule(name, callback);
- }
- },
-
-
- onProgress: function(name){},
-
-
- onLoad: function(name){}
- };
-
-
-
- var scripts = document.getElementsByTagName('script');
- for(var i=0; i<scripts.length; i++){
- var src = scripts[i].src;
- if (!src) continue;
- var m = src.match(/easyloader/.js(/W|$)/i);
- if (m){
- easyloader.base = src.substring(0, m.index);
- }
- }
-
-
-
-
-
- window.using = easyloader.load;
-
-
-
- if (window.jQuery){
- jQuery(function(){
- easyloader.load('parser', function(){
- jQuery.parser.parse();
- });
- });
- }
-
- })();
到这里easyloader就分析结束了,如果你仔细看过了,相信一定会使用easyloader了。有问题可以给我留言。
转:http://blog.csdn.net/baozhifei/article/details/6430586
分享到:
相关推荐
EasyUI 是一个基于 jQuery 的前端框架,主要用于快速构建用户界面,尤其适用于后台管理系统。这个"easyUI例子_easyui1.4.4"压缩包提供了一套使用 EasyUI 1.4.4 版本的经典后台管理模板,适用于开发人员快速搭建功能...
近期由于参与的一个Web系统项目前台使用了EasyUI作为Web解决方案,所以查了一下EasyUI的相关资料,发现离线的中文API不太多,而且版本都比较老,索性自己讲EasyUI官网给扣下来,然后做了翻译,文档是2月份过年的时候...
《jQuery EasyUI 主题详解与应用》 jQuery EasyUI 是一款基于 jQuery 的前端框架,它提供了丰富的组件和易于使用的API,极大地简化了Web界面的开发。而其核心魅力之一,便是丰富的主题系统,使得开发者可以轻松定制...
EasyUI 是一个基于 jQuery 的轻量级前端框架,它为开发者提供了一系列的组件和插件,使得构建交互式用户界面变得更加便捷。这个压缩包“jquery-easyui.zip”包含了使用 EasyUI 实现的一个HTML框架,它主要用于简化...
EasyUI InsdepTheme是一款基于EasyUI的皮肤美化版本,它为开发者提供了更加美观且自定义的界面风格。EasyUI是一个轻量级的JavaScript框架,主要用于构建Web应用的用户界面,它基于jQuery,提供了丰富的组件和易用的...
EasyUI 是一个基于 jQuery 的前端开发框架,专为构建用户界面而设计。它提供了一套完整的组件和样式,包括布局、表格、对话框、菜单、按钮等,使得开发者能够快速地构建出美观且功能丰富的 web 应用。在这个“easyui...
《jQuery EasyUI 1.4.5 API详解》 jQuery EasyUI 是一款基于 jQuery 的前端框架,它提供了丰富的用户界面组件,使得开发者可以快速构建出美观且功能强大的Web应用。在本文中,我们将深入探讨jQuery EasyUI 1.4.5...
在使用UasyUI的时候,在一般的input输入框上添加class="easyui-textbox"属性,则在该输入框上添加的事件将不起作用,但是如果去掉class="easyui-textbox"变成一般的input则起作用。 控件的生成原理,它是把你原有的...
EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。这个"easyui官方离线文档"包含了丰富的资源,包括demo、源码、演示以及针对现代前端框架如Vue、Angular和React的...
EasyUI 是一款基于 jQuery 的 UI 组件库,它提供了丰富的界面元素和布局功能,使得开发者能够快速构建出美观且响应式的 web 应用程序。"全套EasyUI示例源码"是一个包含三十多个组件的完整示例集合,可以帮助开发者...
EasyUI 是一个基于 jQuery 的前端框架,用于快速构建用户界面。它简化了网页开发过程,提供了丰富的组件和统一的API接口,使得开发者可以更专注于业务逻辑而非页面展示的细节。这个"jQuery_EasyUI_v1.3.5.exe"文件很...
EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了丰富的组件和易于使用的主题系统,使得开发者能够快速构建用户界面。本套分享的资源是一组免费且漂亮的 EasyUI 主题,包括黑色和蓝色两种风格,适用于后台管理...
【EasyUI 多层导航框架】是一个基于JavaScript和CSS的前端框架,专为构建具有高效用户体验的Web应用程序而设计。EasyUI提供了一系列组件,包括布局、表格、对话框、菜单、按钮、表单等,而多层导航框架则是其在实际...
在前端开发中,EasyUI 是一个基于 jQuery 的 UI 框架,它提供了一系列美观、易用的组件,用于构建用户界面。在这个实例中,我们将深入探讨 EasyUI 中的两个重要组件:`easyui-textbox` 和 `easyui-combobox`,以及...
EasyUI 是一个基于 jQuery 的前端框架,用于快速开发简洁、美观的Web应用程序界面。这个压缩包包含的是EasyUI 1.5.0的完整源代码,具有官方授权,确保了开发者能够深入理解并自定义其组件,而不受压缩代码的困扰。 ...
EasyUI是中国程序员喜爱的一款基于jQuery的前端用户界面框架,它为快速开发Web应用提供了丰富的组件和功能。"最新EasyUI扁平化"标题暗示我们关注的是EasyUI的一个更新版本,可能着重于现代扁平化设计趋势,这在当前...
EasyUI 是一个基于 jQuery 的轻量级用户界面框架,它为开发者提供了丰富的组件,包括布局、表格、对话框、树形菜单、表单等,帮助快速构建美观且响应式的 web 应用程序。"easyui 视频教程(6)"显然是针对初学者设计的...
EasyUI是一种基于JavaScript和CSS的前端框架,专为构建用户界面而设计,尤其适用于后台管理系统。这个名为"简单的easyui页面"的项目提供了一个简化版的EasyUI页面,非常适合用作前台UI界面,以实现简洁、高效的用户...
EasyUI是一种轻量级的前端开发框架,专为简化网页应用和后台管理系统界面设计而创建。这个名为"EasyUI登录页面.zip"的压缩包文件包含了使用EasyUI框架构建的一个登录页面的相关资源。EasyUI框架主要基于jQuery,它...
在本文中,我们将深入探讨如何在EasyUI框架中有效地使用时间控件,以及如何解决时间格式化的问题。EasyUI是一个基于jQuery的轻量级前端开发框架,它提供了一系列丰富的组件,帮助开发者快速构建用户界面。时间控件是...