jQuery EasyUI入门

什么是jQuery EasyUI?

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

jQuery EasyUI的特点

1、基于jquery用户界面插件的集合

2、为一些当前用于交互的js应用提供必要的功能

3、EasyUI支持两种渲染方式分别为javascript方式(如:$(‘#p‘).panel({...}))和html标记方式(如:class="easyui-panel")

4、支持HTML5(通过data-options属性)

5、开发产品时可节省时间和资源

6、简单,但很强大

7、支持扩展,可根据自己的需求扩展控件

8、目前各项不足正以版本递增的方式不断完善

9、源代码加密,商业版付费

jQuery EasyUI浏览器兼容性

jQuery EasyUI1.3.5自带的jQuery版本为2.0,不再支持IE6,7,8这三款浏览器。

jQuery EasyUI示例

1. 在官网下载最新的版本包并解压;

2. 在网页中至少引入下面文件:

<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

3. 完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Dialog - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Basic Dialog</h2>
    <p>Click below button to open or close dialog.</p>
    <div style="margin:20px 0;">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$(‘#dlg‘).dialog(‘open‘)">Open</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$(‘#dlg‘).dialog(‘close‘)">Close</a>
    </div>
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:‘icon-save‘" style="width:400px;height:200px;padding:10px">
        The dialog content.
    </div>
</body>
</html>

备注信息

jQuery EasyUI官网:http://www.jeasyui.com/

jQuery EasyUI学习网站:

EasyUI学习班:http://www.jeasyuicn.com/

EasyUI中文社区:http://bbs.jeasyuicn.com/

jQuery EasyUI中文网:http://www.jeasyui.net/tutorial/

RUNOOB:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html

北风网:ibeifeng.com/

瓢城Web俱乐部:http://www.ycku.com/

时间: 2024-10-06 05:43:49

jQuery EasyUI入门的相关文章

jQuery EasyUI入门视频教程【20讲】

jQuery EasyUI入门视频教程[20讲] jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.非职业讲师孙宇讲授,全20讲.

第 1 章 jQuery EasyUI 入门

学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下载及运行 jQuery EasyUI 在正式了解 jQuery EasyUI 之前,我们先了解一下什么是 jQuery EasyUI.它的学习条件.市场上的同类产品.所支持的浏览器等.然后配置运行 jQuery EasyUI. 一.什么是 jQuery EasyUI jQuery EasyUI 是一

01 jquery easyui 入门示例

第一步 引入所需样式和JS文件 <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=

jQuery EasyUI 入门简介

对于前端开发者来说,在开发过程中应用"框架"这一工具,可以极大的缩短开发时间,提高开发效率.今天我们就开介绍一款常用的框架--jQuery EasyUI. 那什么是jQuery EasyUI呢? jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签.然后就可以

JQuery EasyUI入门视频教程

下载地址:百度网盘下载 课程目录( G  I4 H5M  I   第01课(大概介绍一下easyui,和组织的地址,官方网站等)   第02课(介绍easyloader组件和easyui怎样使用)   第03课(parser组件panel组件)   第04课(通过用户登录来演示dialog.ajax的使用,serialize方法的使用,前后台怎样交互等)4 L( N& Z7 J; j( B6 V   第05课(讲解easyui的form控件.validatebox控件.怎样跟后台交互)   第0

easyui 入门指南

所有easyui组件都有,属性,方法,事件,用户可以简单的对其扩展. 属性 属性定义在 jQuery.fn.{plugin}.defaults中.例如, 对话框组件[dialog]的属性定义在jQuery.fn.dialog.defaults. 事件事件(回调函数)也定义在jQuery.fn.{plugin}.defaults. 方法调用方法语法: $('selector').plugin('method', parameter);相信$('selector')中的'selector'大家只要使

网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它嵌入到网页的任何位置. 基础用法: <div id="p" class="easyui-panel" title="面板-标题" data-options="iconCls:'icon-save',closable:true,coll

jQuery EasyUI的使用入门

jQuery EasyUI不是什么太高级的东西,就是用jQuery写了很多方法.定义了很多属性,通过调用这些方法.属性,可以达到一些特定的效果,然后我们再根据具体需求微调就好了.至少需要导入两个样式表和两个js文件: <link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/default/easyui.css" /> <link type=&

Jquery EasyUI的添加,修改,删除,查询等基本操作介绍

http://www.jb51.net/article/42016.htm 初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套前台控件,于是在网上找了一些参考示例.写了一些基本的增删改查功能,算是对该控件的基本入门.后续有时间继续深入学习. 在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后的页面 1.列表展示 2.新