什么是jQueryEasyUI？

JqueryUI是一组基于jQuery的UI插件集合

学习jQueryEasyUI的条件？

必须掌握Jquery的基本语法知识

jQueryEasyUI的特点？

1、支持HTML5

2、支持拓展，可以根据自己的需要拓展控件

3、源代码加密，商业版付费

其他的同类型产品？

1、国产的DWZ插件

2、独立的ExtJs插件

一个简单的Demo?

通过一个简单的Demo来熟悉EasyUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

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

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

<script type="text/javascript" src="easyUI/locale/easyui-lang-zh_CN.js"></script>

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

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

</head>

<body>

<h2>Basic Calendar</h2>

    <p>Click to select date.</p>

    <div style="margin:20px 0"></div>

    <div class="easyui-calendar" style="width:250px;height:250px;"></div>

</body>

</html>

从上面的例子中可以看出使用EasyUI必须引入一些文件

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

//引入jquery核心库

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

//引入jquery UI核心库

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

//引入EasyUI中文提示信息

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

//引入EasyUI核心UI文件CSS

<linke rel="stylesheet" type="text/css" href="easyui/thems/icon.css" />

//引入EasyUI图标文件

如果有自己的JS文件的话，那么要引入自己定义的JS文件

JqueryEasyUI中文API文档下载地址

加载UI组件的方法

1、使用class方式加载

命名的方法为easyui-方法名

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

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

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

<script type="text/javascript" src="easyUI/locale/easyui-lang-zh_CN.js"></script>

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

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

</head>

<body>

    <div id="box" class="easyui-dialog" style="width:400px;height:200px">内容部分</div>

</body>

</html>

2、使用JS调用加载

先创建一个JS文件，命名为Demo.js

$(function(){

    $("#box").dialog();

})

创建一个HTML文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

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

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

<script type="text/javascript" src="easyUI/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript" src="Demo.js"></script>

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

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

</head>

<body>

    <div id="box" title="leslieDemo" style="width:400px;height:200px">内容部分</div>

</body>

</html>

使用easyload.js文件智能加载

在网速较慢的情况下可以使用，但是不建议使用，而且语法会稍微有些不同，你的难度会提高了

 Parser解析器

Parser解析器是专门解析渲染各种UI组件

Parser属性

$.parser.auto=true 说明：定义是否自动解析EasyUI组件

$.parser.auto=false 关闭自动解析功能

这个方法不能在$(function(){})中存在

Parser方法

$.parser.parse 传参：空或者JQ选择器 说明：解析指定的UI组件

例如：

$.parser.parse() //解析全部的UI组件

$.parser.onComplete 传参：回调函数 说明：解析完毕后执行

onComplete的使用

$.parser.onComplete=function(){

    alert('UI解析完毕');

};

PS:使用指定UI解析，必须设置父类容器才可以解析到，也就是说必须有子类的存在 比如：

上面的弹窗效果应该这样设置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

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

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

<script type="text/javascript" src="easyUI/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript" src="Demo.js"></script>

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

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

</head>

<body>

    <div id="box" >

    <div title="leslieDemo" style="width:400px;height:200px">内容部分</div>

</div>

</body>

</html>

其他的一些基本的介绍详见：jQuery Easy UI  帮助手册

JqueryEasyUI教程入门篇的更多相关文章

  1. [转]JqueryEasyUI教程入门篇

    什么是jQueryEasyUI? JqueryUI是一组基于jQuery的UI插件集合 学习jQueryEasyUI的条件? 必须掌握Jquery的基本语法知识 jQueryEasyUI的特点? 1. ...

  2. CE修改器使用教程 [入门篇]

    Cheat Engine 一般简称CE,是一个开放源代码的作弊软件,其功能包括:内存扫描.十六进制编辑器.调试工具,Cheat Engine 自身附带了外挂制作工具,可以用它直接生成外挂工具,CE可以 ...

  3. [STemWin教程入门篇]第二期：emWin5.xx的详细移植步骤

    转自:http://bbs.armfly.com/read.php?tid=1545 重要说明:(0)由于这个移植教程是去年过年的时候做的,用的是5.16,这就不再做个5.20的移植了,方法是一样的. ...

  4. [STemWin教程入门篇] 第一期：emWin介绍

    转自:http://bbs.armfly.com/read.php?tid=1544 SEGGER公司介绍 了解emWin之前,先了解一下SEGGER这家公司,了解生产商才能对emWin有更加全面的认 ...

  5. OpenCV学习教程入门篇&lt;一、介绍&gt;

    OpenCV,是Inter公司开发的免费开源专门因为图像处理和机器视觉的C/C++库,英文全称是Open Source Computer Vision. 1. 可视化语言Matlab与OpenCV都能 ...

  6. shell教程<入门篇>

    由于我平时的工作环境是linux,所以无可避免的经常使用命令行模式和shell脚本,而且有些命令行每天都要输好多遍,比如ssh登录之类的,所以干脆把平时常用的命令都写成脚本文件,所以特意开了一个she ...

  7. 转：jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

    阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...

  8. SQLAlchemy 教程 —— 基础入门篇

    SQLAlchemy 教程 -- 基础入门篇 一.课程简介 1.1 实验内容 本课程带领大家使用 SQLAlchemy 连接 MySQL 数据库,创建一个博客应用所需要的数据表,并介绍了使用 SQLA ...

  9. Android Studio2.0 教程从入门到精通Windows版 - 入门篇

    http://www.open-open.com/lib/view/open1468121363300.html 本文转自:深度开源(open-open.com)原文标题:Android Studio ...

随机推荐

  1. 烂泥：LVM学习之LVM基础

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 有关LVM的好处我就不在此多介绍了,有空的话自己可以去百度百科中看看.我们在此之进行LVM的相关操作,以及命令的学习. 要想使系统支持LVM,我们必须安 ...

  2. 华硕飞行堡垒zx50安装Ubunutu折腾记

    今年8月入手了华硕zx50,配置不错,作为一个合格的Linux爱好者,没买来一台电脑肯定得装上Linux编个程序什么的吧,,可恶的是,笔记本安装Linux系统往往比较麻烦,必须折腾很久才安装上,我手上 ...

  3. USACO section1.1 Broken Necklace

    /* ID: vincent63 LANG: C TASK: beads */ #include <stdio.h> #include<stdlib.h> #include&l ...

  4. cni 添加网络 流程分析

    cnitool: Add or remove network interfaces from a network namespace cnitool add <net> <netns ...

  5. 【Android Demo】悬浮窗体实现

    突然对悬浮窗体感兴趣,查资料做了个小Demo,效果是点击按钮后,关闭当前Activity,显示悬浮窗口,窗口可以拖动,双击后消失.效果图如下: 它的使用原理很简单,就是借用了WindowManager ...

  6. HDU 4122 Alice's mooncake shop --RMQ

    题意: 一个月饼店做月饼,总营业时间m小时,只能在整点做月饼,可以做无限个,不过在不同的时间做月饼的话每个月饼的花费是不一样的,假设即为cost[i],再给n个订单,即为在某个时间要多少个月饼,时间从 ...

  7. HDU 4793 Collision --解方程

    题意: 给一个圆盘,圆心为(0,0),半径为Rm, 然后给一个圆形区域,圆心同此圆盘,半径为R(R>Rm),一枚硬币(圆形),圆心为(x,y),半径为r,一定在圆形区域外面,速度向量为(vx,v ...

  8. xshell5 启动显示 mfc110.dll msvcp110.dll 未找到问题 解决办法

    1. 安装 Visual C++ Redistributable for Visual Studio 2012 x86版本 注意: 一定要安装x86版本.(xshell5是32位的程序) 微软的官方下 ...

  9. Android 手势识别类 ( 二 ) GestureDetector 源码浅析

    前言:Android 关于手势的操作提供两种形式:一种是针对用户手指在屏幕上划出的动作而进行移动的检测,这些手势的检测通过android提供的监听器来实现:另一种是用 户手指在屏幕上滑动而形成一定的不 ...

  10. 关于表格前面checkbox复选框不打勾的问题

    当点击左边的树节点的时候,让右边的表格自动选中相应的行,但是选中的行前面如果有checkbox,可能复选框虽然选中了但是不打上勾,解决方案,将遍历表格数据那段代码用延时器包裹一下.