简介

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。

特点：

①easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。

②easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。

③使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。

④HTML 网页的完整框架。

⑤easyui 节省了开发产品的时间和规模。

⑥easyui 非常简单，但是功能非常强大。

当然在使用 EasyUI之前我们需要导入一些必须的css和js文件

<head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css">

        <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">

        <script type="text/javascript" src="easyUI/jquery.min.js"></script>

        <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script>

        <link rel="stylesheet" type="text/css" href="easyUI/locale/easyui-lang-zh_CN.js"/>

        <style type="text/css">

        </style>

    </head>

这样下面我们就可以使用我们的EasyUI了

首先，我们来创建一个简单的面板

<div id="p" class="easyui-panel" title="My Panel"

        style="width:500px;height:150px;padding:10px;background:#fafafa;"

        data-options="iconCls:'icon-save',closable:true,

                collapsible:true,minimizable:true,maximizable:true">

    <p>panel content.</p>

    <p>panel content.</p>

</div>

这样一个简单的可以折叠的面板就创建好了

接下来我们通过简单的js代码来实现面板上的几个工具栏

<div id="p" style="padding:10px;">

    <p>panel content.</p>

    <p>panel content.</p>

</div>    

$('#p').panel({

  width:500,

  height:150,

  title: 'My Panel',

  tools: [{

    iconCls:'icon-add',

    handler:function(){alert('new')}

  },{

    iconCls:'icon-save',

    handler:function(){alert('save')}

  }]

});

注：几个常用属性

iconCls：这是EasyUI自带的图标，通过该属性可以使用EasyUI为我们提供的各种类型的图标

width、height：用来设置面板的宽和高

tools：使用这个属性我们可以自定义的使用各种工具

面板如下：

同时当加载成功的时候让我们通过ajax加载面板内容并显示一些消息。

$('#p').panel({

    href:'content_url.php',

    onLoad:function(){

        alert('loaded successfully');

    }

});

这样，我们通过EasyUI可以很快的实现一个带有数据交互功能的面板

jQuery EasyUI 简介的更多相关文章

  1. jQuery EasyUI简介

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

  2. [JQuery EasyUI系列]简介

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

  3. jQuery EasyUI 入门简介

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

  4. Jquery EasyUI封装简化操作

    //confirm function Confirm(msg, control) { $.messager.confirm('确认', msg, function (r) { if (r) { eva ...

  5. jQuery easyUI框架中经常出现的问题

    相信开发者对于我们jquery来说都不会陌生吧,jquery为我们的开发提供了很多各式各样的库,满足各种开发的需求,其中我们知道的有轻量级的,但是也有一些基于富客服端的一些重量级库,顾名思义,当我们在 ...

  6. [转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo

    热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...

  7. jQuery EasyUI 详解

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

  8. 开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo（转）

    热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...

  9. JQuery EasyUI学习笔记

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html  简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用 ...

随机推荐

  1. atitit.atiOrm.js v2 q61 版本新特性.docx

    atitit.atiOrm.js v2 q61 版本新特性.docx 1. V1新特性如下1 1.1. V2规划,直接生成sql在js端1 2. Orm设计框架图1 2.1. atiOrm.js的原理 ...

  2. 基于Verilog语言的FIR滤波【程序和理解】

    一直想找一个简单.清晰.明了的fir滤波器的设计,终于找到了一个可以应用的,和大家分享一下,有助于FPGA新手入门. 1.说道fir滤波器,滤波系数肯定是最重要的,因为后面程序中涉及到滤波系数问题,所 ...

  3. C++父子类继承时的隐藏、覆盖、重载

    存在父子类继承关系时,若有同名成员函数同时存在,会发生隐藏.覆盖和重载这几种情况.对于初学者也比较容易混淆,为此,我整理了一下我的个人看法,仅供参考.希望对大家理解有帮助,也欢迎指正. 1.父子类继承 ...

  4. 0051 MyBatis关联映射--多对多关系

    用户与订单时一对多关系,再加上商品信息的话,订单与商品之间就是多对多关系了 DROP DATABASE IF EXISTS testdb; USE testdb; /*用户表,记录用户信息:用户与订单 ...

  5. 基于部标Jt/T809协议和Java Netty框架构建Gps位置监控平台

    现在地方上由于运输车辆的GPS数据都分散在地方上已有的各种企业平台上面,不利于大数据的分析和智能应用,而开发智能的基于大数据的Gps监控平台,往往需要和各种第三方的部标GPS监控平台对接,获取到第三方 ...

  6. Unix系统编程（四）creat系统调用

    我好疑惑啊,creat系统调用为啥没有以e结尾呢?搞得我每次都怀疑我敲错了. 在早期的UNIX实现中,open只有两个参数,无法创建新文件,而是使用creat系统调用创建并打开一个新文件. int c ...

  7. Jquery Deferred 详解

    近期由于公司项目主要由我来负责前端,所以打算优化一下代码.在jquery 里面有个Deferred的对象.为了研究这个也看了不少资料,其中阮一峰的博客写的很详细,这里转载一下. 一.什么是deferr ...

  8. 目录视图摘要视图订阅 基于Extjs开发不允许为空的文本框提示及相应的验证错误提示(转)

    原文地址:http://blog.csdn.net/kunoy/article/details/8007585 本文主要解决问题: 1.区分哪些文本框不允许为空,很多网站都采用在文本框后加*号,ext ...

  9. php调用C代码的方法详解和zend_parse_parameters函数详解

    php调用C代码的方法详解 在php程序中需要用到C代码,应该是下面两种情况: 1 已有C代码,在php程序中想直接用 2 由于php的性能问题,需要用C来实现部分功能   针对第一种情况,最合适的方 ...

  10. cocos html5 资讯

    1.visual assistx    vs 插件  http://www.cr173.com/soft/32656.html 2. Box2D物理引擎 3. csdnhttp://www.csdn. ...