jQuery EasyUI 官方网站 http://www.jeasyui.com/ 。去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样。但是,广告有点多,凑合能用,可以参考。。但是,广告真的实在的确是有点非常碍眼。

  现在最新的 EasyUI 是 1.4.2 版本,本系列教程都会基于该版本。没有的可以去EasyUI 官网http://www.jeasyui.com/ 下载,或者点击该链接 jquery-easyui-1.4.2下载。不过因为我只想以一个框架来帮助大家学习 EasyUI,而不是“大全”式的讲 EasyUI 的方方面面,所以一般不会用到很特殊的东西,所以使用别的版本也没有问题。

  jQuery EasyUI 1.4.2下载的是一个压缩包,解压以后目录结构是这个样子:

  

  其中包含一些文件夹和文件,大概说明如下:

  文件夹:

    demo——该目录下存放的是 EasyUI PC 版各插件的示例示例。如果不想在官网上查看演示,可以在该目录下找到相应的演示示例

    demo-mobile——该目录下存放的是 EasyUI 移动版各插件的示例示例

    locale——本地化文件,即语言库。主要用于如 DataGrid 这类有提示信息文本显示的插件本地化。需要使用哪种语言加载相应的语言库就行。

    plugins——EasyUI 的插件库,不过一般我们只使用 EasyUI 的主文件 jquery.easyui.min.js 就行,主文件已包含所有插件,无需单独加载

    src——EasyUI 的源文件,因为部分功能 EasyUI 不开源,所以该目录下不是全部的源码文件

    themes——主题包。包含主题 style 及相应的资源文件(图标等)。该目标下共包含 5 个主题可供使用

  文件:

    changelog.txt——更新日志

    easyloader.js——加载器,可以动态的加载项目用到的 EasyUI 插件

    jquery.easyui.min.js——EasyUI PC版主文件

    jquery.easyui.mobile.js—— EasyUI 移动版主文件

    jquery.min.js——EasyUI 所依赖的 jQuery 主文件

    licence_gpl.txt——许可协议

    readme.txt——版本说明文件

  一般来说我们只需要加载 themes/default/easyui.css、themes/icon.css、jquery.min.js、jquery.easyui.min.js 等四个文件即可。比如下面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="js/easyui-1.4.2/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="js/easyui-1.4.2/themes/icon.css" />
    <script type="text/javascript" src="js/easyui-1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/easyui-1.4.2/jquery.easyui.min.js" ></script>
</head>

<body class="easyui-layout">
<div region="north" style="height:65px;">
    <!-- 页面头部 -->
    <h1>***管理系统</h1>
</div>

<div region="west" split="true" style="width:220px" title="导航菜单">页面左侧</div>

<div region="center">
    <input class="easyui-textbox" value="文本框" /><br /><br />
    <input class="easyui-filebox" value="文件框" /><br /><br />
    <a class="easyui-linkbutton" data-options="iconCls:'icon-reload', height:30">按钮</a>
</div>

<div region="east" style="width:100px;">页面右侧</div>

<div region="south">页面底部</div>
</body>
</html>

  运行后显示效果如下(在 IE11 下):

  

  当然,任何优秀的 Programer 都离不开 API,我英文太挫,看官网 Document 很吃力,中文网上广告太多,而且我觉得不管怎么,Internet上的文档都没有本地的方便(响应速度快),所以我参考的 API 的是网上找来的中文chm版,这里给大家下载参考 jQuery EasyUI 1.4 API.zip。(在此感谢作者“王锦阳”)

  示例源码:http://files.cnblogs.com/files/zhhh/EasyUI-1.zip

前端框架 EasyUI (1)熟悉一下EasyUI的更多相关文章

  1. 前端框架 EasyUI (0) 重新温习(序言)

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

  2. EasyUI搭建前端框架

    EasyUI搭建前端框架 前言: 最近在忙公司的项目,也没太多时间来更新博客,谢谢大家的关注. 好啦,有了前面的系统整体简介和用户登录界面,我们开始使用EasyUI搭建前端页面框架! EasyUI官方 ...

  3. EasyUI+bootsrtap混合前端框架

    EasyUI+bootsrtap混合前端框架 http://www.jeasyui.com/download/index.php用户没有登录前浏览的页面用bootsrtap框架用户登录进去后的商家管理 ...

  4. easyui前端框架01

    一. 三大前端框架的特点 1.easyui=jquery+html4 优点:快速开发.功能齐全 .免费 缺点:不好看.不支持相应式开发 2.bootstrap=jquery+html5 优点: 功能强 ...

  5. 前端框架easyui layout, Tabs,tree

    一.三大前端框架的 1.easyui=jquery+html4(用来做后台的管理界面) 不要钱,开发速度快,不好看,不支持响应式 2.bootstrap=jquery+html5 好看,开发速度快,部 ...

  6. 前端框架Easyui学习积累

    前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...

  7. Web前端框架汇总

    在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...

  8. 2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com

    近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那 ...

  9. Web前端框架学习成本比较及学习方法

    就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...

随机推荐

  1. 【探索】无形验证码 —— PoW 算力验证

    先来思考一个问题:如何写一个能消耗对方时间的程序? 消耗时间还不简单,休眠一下就可以了: Sleep(1000) 这确实消耗了时间,但并没有消耗 CPU.如果对方开了变速齿轮,这瞬间就能完成. 不过要 ...

  2. ASP.NET是如何在IIS下工作的

    ASP.NET与IIS是紧密联系的,由于IIS6.0与IIS7.0的工作方式的不同,导致ASP.NET的工作原理也发生了相应的变化. IIS6(IIS7的经典模式)与IIS7的集成模式的不同 IIS6 ...

  3. 如何快速优化手游性能问题?从UGUI优化说起

    WeTest 导读   本文作者从自身多年的Unity项目UI开发及优化的经验出发,从UGUI,CPU,GPU以及unity特有资源等几个维度,介绍了unity手游性能优化的一些方法.   在之前的文 ...

  4. C#多线程之线程同步篇1

    在多线程(线程同步)中,我们将学习多线程中操作共享资源的技术,学习到的知识点如下所示: 执行基本的原子操作 使用Mutex构造 使用SemaphoreSlim构造 使用AutoResetEvent构造 ...

  5. 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

    今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...

  6. springmvc的拦截器

    什么是拦截器                                                         java里的拦截器是动态拦截action调用的对象.它提供了一种机制可以使 ...

  7. 创建ABPboilerplate模版项目

    本文是根据角落的白板报的<通过ABPboilerplate模版创建项目>一文的学习总结,感谢原文作者角落的白板报. 1 准备 开发环境: Visual Studio 2015 update ...

  8. iOS 10 跳转系统设置

    苦心人天不负, 为了项目终于把 iOS 10 跳转系统设置的方法给搞定了, 很欣慰. http://www.cnblogs.com/lurenq/p/6189580.html iOS 10 跳转系统设 ...

  9. (转载) RESTful API 设计指南

    作者: 阮一峰 日期: 2014年5月22日 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制 ...

  10. .NET面试题系列[4] - C# 基础知识(2)

    2 类型转换 面试出现频率:主要考察装箱和拆箱.对于有笔试题的场合也可能会考一些基本的类型转换是否合法. 重要程度:10/10 CLR最重要的特性之一就是类型安全性.在运行时,CLR总是知道一个对象是 ...