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

那什么是jQuery EasyUI呢?

jQuery EasyUI是一组基于jQuery的UI插件集合体,而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和其它所有css。easyui.css是其它所有css的合并后结果,在不同的加载方式中只会用到一部分。

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

jquery.easyui.min.js:EasyUI的主文件。它是各个功能的文件的一个整合jquery.min.jsjquery文件,EasyUI是在jQuery的基础上开发使用的,所以这个文件是项目中必须存在的。

(三) 开始使用

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

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

我们打开自己使用的编译器,新建一个web工程,包括img、js、css、EasyUI文件夹和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很简单,很强大!快去下载试试看吧!

jQuery EasyUI 入门简介的更多相关文章

  1. 第一百九十一节,jQuery EasyUI 入门

    jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...

  2. 第 1 章 jQuery EasyUI 入门

    学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下 ...

  3. [JQuery EasyUI系列]简介

    一.jQuery EasyUI是一个基于jQuery的框架,继承了各种用户界面插件. 二.jQuery EasyUI框架提供了创建网页所需的一切,可以轻松建立站点. easyui是一个基于jQuery ...

  4. JQuery快速入门-简介

    一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

  5. jQuery的入门与简介

    jQuery的入门与简介<思维导图>   <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...

  6. jQuery EasyUI 简介

    简介 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. 特点: ①easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. ②easyui 提供建 ...

  7. jQuery EasyUI简介

    jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助we ...

  8. jQuery EasyUI 详解

    EasyUI 简介 easyui 是一种基于 jQuery 的用户界面插件集合. easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能. 使用 easyui 你不需要写很多 ...

  9. jQuery EasyUI视频教程合集

    下载地址:http://www.fu83.cn/thread-269-1-1.html 教程内容: 尚学堂科技_jqueryeasyui视频教程_白贺翔 李炎恢jQuery EasyUI视频教程全集 ...

随机推荐

  1. 操作iframe 的方法与兼容性

    首先创建两个页面 //iframe1.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. Azure存储上传下载(断点续传)

    最近有一个客户需要将文件系统(VM搭建)迁移到Azure存储上,对于Azure存储这里就不多做介绍,但是该客户由于网络原因下载文件的时候经常出现上传中断,所以想在Azure 存储上实现下载的断点续传. ...

  3. STM32 Controller area network (bxCAN) Identifier filtering

    Identifier filtering In the CAN protocol the identifier of a message is not associated with the addr ...

  4. linux内核数据包转发流程(二):中断

    [版权声明:转载请保留出处:blog.csdn.net/gentleliu.邮箱:shallnew*163.com] 内核在处理2层数据包之前,必须先处理中断系统.设立中断系统,才有可能每秒处理成千的 ...

  5. 奇妙的 CSS shapes(CSS图形) 【css 图形,绘图,CSS 几何图形)】

    http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...

  6. AngularJS报错:[$compile:tpload]

    页面中有: <div ng-view></div> 这里会根据不同的路由设置选择不同模版下的内容. 如果把AngularJS网站项目放在包含中文字的目录中,会报以上的错. 解决 ...

  7. JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象

    本篇体验通过硬编码.工厂模式.构造函数来创建JavaScript对象. □ 通过硬编码创建JavaScript对象 当需要创建一个JavaScript对象时,我们可能这样写: var person = ...

  8. Android 数据存储03之SQLite

    SQLite数据存储 Android 集成了 SQLite 数据库.它存储在 /data/data/< 项目文件夹 >/databases/ 下.Android 开发中使用 SQLite ...

  9. C#高级编程小结

    小结 这几章主要介绍了如何使用新的dynamic类型,还讨论了编译器在遇到dynamic类型时会做什么.还讨论了DLP,可以把它包含在简单的应用程序中.并通过Pythin使用DLR,执行Python脚 ...

  10. JavaScript 检查IP

    //---------------------------------------------------------- // 功能:检查IP // 参数: // strpart ip地址 // 返回 ...