jQuery EasyUI 入门简介

对于前端开发者来说,在开发过程应用框架这一工具,可以极大的缩短开发时间,提高开发效率今天我们就开介绍一款常用的框架——jQuery EasyUI

那什么jQuery EasyUI呢

jQuery EasyUI是一组基于jQueryUI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。然后就可以so easy地完成类似图书管理系统站点。

那如何开始着手去应用框架呢?

(一) 下载框架

    您可以从 http://www.jeasyui.com/download/index.php 上下您需要jQuery EasyUI 版本。

(二) 结构介绍

 

下载的整个压缩包解压以后包含一下几个文件文件夹,具体每个什么意思?哪些有用?我们一一来看一下:

demo文件jQuery EasyUI所包含的各种控件的使用案例,都是一个一个片段,初学者熟悉各个控件有帮助,在实际项目中没必要入。

locale文件 jQuery EasyUI展的言包。在使用的候只保留自己需要的言所对应的文件即可,一般情况下保留easyui-lang-zh_CN.js中文文件。

plugins文件EasyUI提供的各个功能的文件。

src文件: 部分开源控件的源文件。正式目不需要引用此文件

themes文件:所有EasyUI的主,也就是css文件和要用到的图标文件。EasyUI为我们提供了5格。目中我只保留自己需要的即可。具体到一个格,又分两部分:easyui.css和其它所有csseasyui.css是其它所有css的合并后果,在不同的加方式中只会用到一部分。

easyloader.js暂且称之为加载器文件。

jquery.easyui.min.jsEasyUI的主文件。它是各个功能的文件的一个整合jquery.min.jsjquery文件,EasyUI是在jQuery的基使用的,所以文件是目中必存在的

(三) 开始使用

         jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件,也可以单独使用其中一个。那么具体在一个项目中,我们如何去操作那?我们一步一步来分析

1、 第一步:新建项目工程

我们打开自己使用的编译器,新建一个web工程,包括imgjscssEasyUI文件夹index.html文件

2、 第二步导入EasyUI框架

我们将解压后的框架包复制到项目的EasyUI文件夹里面,包含框架中的项目如图所示

3、 第三步:index.html引用框架

具体实现代码如下:

       4第四步添加控件到界面

jQuery EasyUI 提供易于使用的控件,它使 Web 开发人员快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。 这些功能使您的应用适合今天的网络。 有两个方法声明的 UI 控件:

1)直接在 HTML 声明组件。

2)编写 JavaScript 代码来创建组件。

只要学会了组件的声明创建然后对照API把相应的组件填上去即可那这个框架整体思路就清晰了。提供一个API下载地址大家可以参考一下:

http://www.veryhuo.com/down/html/119306.html

除了系统自带的这些属性以外你所掌握HTML5一些渲染也是有用武之地的!data-options属性即可置相css

是不是觉得jQuery EasyUI简单,很强大!快去下载试试看吧!

原文地址:https://www.cnblogs.com/jerehedu/p/6385949.html