杰瑞教育

最新动态NEWS
您当前的位置:首页 > 最新动态

jQuery EasyUI 入门简介

| 查看次数:740次

对于前端开发者来说,在开发过程中应用框架这一工具,可以极大的缩短开发时间,提高开发效率。今天我们就开介绍一款常用的框架——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简单,很强大!快去下载试试看吧!

杰瑞教育旗下:SAP 新版官网 营业执照

捷瑞数字 版权所有Copyright © 2014 All rights reserved [鲁ICP备09041295号] 管理员登陆

培训课程
JAVA专区
ANDROID专区
IOS专区
动画设计专区
就业播报
就业进行时
合作企业
学员风采
精彩活动
成长故事
话题分享
我的团队
技术分享
面试题分享
UI
JAVA
ANDROID
IOS
HTML5
源码分享
首页
免费视频
关于我们
常见问题
联系我们