什么是easyui

jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有 一些简单的html标签。

jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,validatebox,window等等。

目录说明

一、快速入门

1.1搭建easyui环境

我们需要引入3个基本的文件

<link href="jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" />
    <link href="jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" />
    <script src="jquery-easyui-1.3.4/jquery.min.js"></script>
    <script src="jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
    <script src="jquery-easyui-1.3.4/jquery.easyui.min.js"></script>

1.2Hello World

我们在写easyui 的js代码的时候也需要在dom树生成后,也就

是说我们需要写$(function(){})这个方法

l   easyui版Hello World

$(function () {

$.messager.alert("hello word", "欢迎光临");//hello word 为标题,欢迎光临为内容

});

1.3如何写easyui - html方式

通过配置元素的属性的方式来写easyui的ui插件,如下面的代码,我们配置

一个panel(面板) ,首先必须配置calss为"easyui-panel",如果需要加一个

标题我们则需要些title属性即可,想给这个面板添加一个图标,我们只需

要配置 iconCls属性即可,easyui本身就提供了一套icon的css,我们在页

面里面引入"themes/icon.css"即可使用easyui给我们定义的css

<div style="width:300px;height:500px" class="easyui-panel"

title="第一个面板" iconCls="icon-save" collapsible="true">

</div>

1.4 data-options属性

我们在写 "iconCls"这种属性的时候编辑器会提示错误,easyui提供data-options属性给我来写组件的配置如下面代码

<div style="width: 300px; height: 500px" class="easyui-panel"

title="第一个面板" data-options="iconCls:'icon-save',collapsible:true">

</div>

1.5如何写easyui - js方式

使用配置的方式创建以easyui的panel组件。代码如下

$("#myDiv").panel({

title: "js方式的panel",

width: 300,

height: 500,

collapsible: true

});

jquery easy ui 1.3.4 快速入门(1)的更多相关文章

  1. Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  3. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  4. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...

  5. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  6. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  7. JQuery Easy Ui (Tree树)详解(转)

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

  8. jQuery Easy UI LinkButton(button)包

    LinkButton(button)包,easyui其中一个基本组成部分 演示样例: <!DOCTYPE html> <html> <head> <title ...

  9. jQuery Easy UI Tooptip(提示框)组件

    我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...

随机推荐

  1. What to call your Academic Event

  2. 15个Linux Wget下载实例终极指南

    15个Linux Wget下载实例终极指南 Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到 ...

  3. VS2013配置Caffe卷积神经网络工具(64位Windows 7)——准备依赖库

    VS2013配置Caffe卷积神经网络工具(64位Windows 7)--准备依赖库 2014年4月的时候自己在公司就将Caffe移植到Windows系统了,今年自己换了台电脑,想在家里也随便跑跑,本 ...

  4. SQL2005删除复制数据库的发布与订阅的方法(转载)

    SQL2005删除复制数据库的发布与订阅的方法 --在测试环境中恢复从正式数据库服务器 上备份下来的bak文件后,正式环境里数据库复制的发布.订阅也被带进来了,结果恢复的数据库无法更改表结构,直接删除 ...

  5. UIGestureRecognizer ios手势识别温习

    1.UIGestureRecognizer介绍 手势识别在iOS上非常重要,手势操作移动设备的重要特征,极大的增加了移动设备使用便捷性. iOS系统在3.2以后,为方便开发这使用一些常用的手势,提供了 ...

  6. delphi基本语法

    本文参考自<delphi2010语法手册> 1. 工程文件结构 源文件联系着unit单元,delphi主模块源文件格式为.dpr,其他模块为.pas,一个完整程序由一个.dpr和若干.pa ...

  7. PHP初学者必须掌握的10个知识点

    这里总结了PHP初学者容易感到困惑的10个问题,供大家参考.1.页面之间无法传递变量get,post,session在最新的php版本中自动全局变量是关闭的,所以要从上一页面取得提交过来得变量要使用1 ...

  8. Servlet的生命周期及filter,servletRequest和servletResponse

    序,Web应用中,Servlet和Filter是很重要的两个概念,一定要理解透彻. 一.Servlet类 继承自HttpServlet,HttpServlet是一个抽象类,主要包含的方法有init,s ...

  9. 将DataTable导出为Excel C#

    /// <summary> /// 导出Excel /// </summary> /// <param name="dt">DataTable& ...

  10. 把 表拷贝到test测试数据库

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) bundle exec rake db:schema:load RAILS_ENV=test   注 ...