JqueryEasyUI教程

第一章EasyUI中弹出框dialog的使用
为div标签加上class="easyui-dialog"即可使用
一、引入文件介绍
jquery.min.js:jquery核心文件,不再支持IE9以下文件;
jquery.easyui.min.js:easyui核心文件;
easyui-lang-zh_CN.js:EasyUI中文提示信息
easyui.css:EasyUI核心UI文件CSS
icon.css:EasyUI图标文件
二、Parser解析器,Parser解析器是专门解析渲染各种UI组件的
//关闭自动解析功能,界面组件不渲染,放在$(function() {})外
$.parser.auto = false;
//解析所有 UI
$.parser.parse();
//解析指定的 UI
$.parser.parse(‘#box‘);
PS:使用指定 UI 解析,必须要设置父类容器才可以解析到。比如:
<div id="box">
<div class="easyui-dialog" title="标题" style="width:400px;height:200px;">
<span>内容部分</span>
</div>
</div>
//回调函数,UI组件解析完毕后执行,放在$(function () {})外
$.parser.onComplete = function () {
alert(‘UI 组件解析完毕!‘);
};

第二章Draggable(拖动)组件
为div标签加上class="easyui-draggable"即可使用
1.例子
html:
<div id="box" style="width:400px;height:200px;background:red">
内容部分
</div>
js:
$(function () {
$(‘#box‘).draggable({
revert:true
});
});
2.属性
使用方法:以键值对方式写在draggable({属性:值})里面
revert:默认值为false,设置true时,拖动停止时又回到原位置
如:
$(‘#box‘).draggable({
revert:true
});
3.事件
使用方法:以键值对方式写在draggable({属性:值})里面,值为一个方法,如:
onBeforeDrag: function (e) {
alert(‘拖动前触发‘+e);//e为参数
}
4.方法
使用方法:写在draggable以外,即写在DOM加载里面
//禁止拖动
$(‘#box‘).draggable(‘disable‘);
//允许拖放
$(‘#box‘).draggable(‘enable‘);
//返回属性对象
var tt = $(‘#box‘).draggable(‘options‘);
PS:我们可以使用$.fn.draggable.defaults 重写默认值对象,写在draggable以外
$.fn.draggable.defaults.cursor = ‘text‘;

第三章Resizable(调整大小)组件
为div标签加上class="easyui-resizable"即可使用
1.属性:以键值对方式写在resizable({属性:值})里面
js写法:
$(‘#box‘).resizable({
maxWidth:200,
maxHeight:200
});
2.事件:
使用方法:以键值对方式写在resizable({属性:值})里面,值为一个方法,如:
onStartResize: function (e) {
alert(‘开始改变大小时!‘);
}
3.方法
使用方法:写在resizable以外,即写在DOM加载里面
//返回属性对象
console.log($(‘#box‘).resizable(‘options‘));
//禁止调整
$(‘#box‘).resizable(‘disable‘);
//启用放置
$(‘#box‘).resizable(‘enable‘);
PS:我们可以使用$.fn.resizable.defaults 重写默认值对象。
$.fn.resizable.defaults.disabled = true;

第四章ProgressBar(进度条)组件
为div标签加上class="easyui-progressbar"即可使用
<div id="box" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
1.属性:以键值对方式写在progressbar({属性:值})里面
$(‘#box‘).progressbar({
value: 70,
width:300
});
2.事件:以键值对方式写在progressbar({属性:值})里面
动画示例:
onChange newValue,oldValue //在值更改的时候触发
$(‘#box‘).progressbar({
value: 30,
width: 300,
onChange: function (newValue,oldValue) {
console.log(‘新:‘+newValue+‘,旧:‘+oldValue);
}
});
setInterval(function () {
$(‘#box‘).progressbar(‘setValue‘,
$(‘#box‘).progressbar(‘getValue‘) + 10);
}, 200);

//设置新值
setTimeout(function () {
$(‘#box‘).progressbar(‘setValue‘,70);
}, 1000);

第五章Panel(面板)组件
为div标签加上class="easyui-panel"和data-options="closable:true"即可使用,如:
<div id="box" class="easyui-panel" data-options="closable:true" title="我的面板" style="width:500px;">
<p>内容区域</p>
</div>
js使用方法:
$(‘#box‘).panel({
width: 500,
height:300,
closable: true,
title:‘面板‘,
iconCls:‘icon-search‘ //图标
});

第六章Tabs(选项卡)组件,此组件依赖于panel和LinkButton组件
为div标签加上class="easyui-tabs"即可使用,如:
<div id="box" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1">
tab1
</div>
<div title="Tab2" data-options="closable:true">
tab2
</div>
<div title="Tab3"
data-options="iconCls:‘icon-reload‘,closable:true">
tab3
</div>
</div>
js加载方式:
1.属性
$(‘#box‘).tabs({
fit:true
});
2.事件和方法类似上面

时间: 2024-10-31 03:13:21

JqueryEasyUI教程的相关文章

【吐血推荐】牛人收集的163个Javascript学习教程pdf电子书资源合集

不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf 26.02 MB   5天驾驭JQuery教程.pdf 1.08 MB   ACCP软件开发初级程序员-使用Javascript增强交互效果-北大青鸟.pdf 51.70 MB   Ajax+PHP程序设计实战详解.pdf 84.29 MB   Ajax实战中文版.pdf 2.48 MB   Aj

Windows Git+TortoiseGit简易使用教程

转载自 http://blog.csdn.net/jarelzhou/article/details/8256139 官方教程:http://tortoisegit.org/docs/tortoisegit/(英文版) 为什么选择Git 效率 很多人有一种习惯吧,什么软件都要最新的,最好的.其实吧,软件就是工具,生产力工具,为的是提高我们的生产力.如果现有的工具已经可以满足生产力要求了,就没有必要换了.生产效率高低应当是选择工具的第一位. 历史 开源世界的版本控制系统,经历了这么几代: 第一代,

微信公众号中添加外部链接地址的图文教程

2017-9-18,长沙,有点闷,有点热. 本教程教大家如何在微信公众号中,添加外部的链接,网络有很多教程,但由于表述不太清楚,出个教程吧.最终实现在微信后台管理平台"原文链接"处插入外部链接,用户点击发布好的图文文章底部左下角的"阅读原文",就可以跳转到您添加的外部链接页面中去. 第1步. 使用微信公众管理帐号登陆微信管理后台 > 素材管理 > 图文消息 >  新建图文消息或者编辑文章都可以,如下图所示: 第2步. 之后,将页面向下拉,看到底部&

win2003从组策略关闭端口(445/135/137/138/139/3389等)教程

一些恶劣的病毒会从某些端口入侵计算机,因此关闭某些用不到的而又具有高风险的端口就显得很有必要,是服务器管理员要做的基本的安全防范.本文将介绍win2003系统在组策略关闭某一个端口的教程,文章以关闭445端口为例. 首先要说明的是,此方法不仅仅适用于win2003,也适用于win7,且操作方法完全相同,所以win7用户也可以按照本文教程操作. 1.打开组策略编辑器 按组合键WIN+R打开运行窗口,然后输入gpedit.msc,按回车键,即可进入组策略编辑器. 2.创建 IP 安全策略 展开选项"

微信小程序实例教程(一)

序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取微信小程序的 AppID 首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并为你创建好一个帐号.注意不可直接使用服务号或订阅号的 AppID. 利用提供的帐号,登录https

jQueryEasyUI Messager基本使用

jQueryEasyUI Messager基本使用 转载于:http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html 一.jQueryEasyUI下载地址 http://www.jeasyui.com/ 二.jQueryEasyUI Messager基本使用 1.$.messager.alert(title, msg, icon, fn)1>.基本用法 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

SQL Server2005安装材料及教程编制

首发:https://www.douban.com/note/579628972/ 系统为 win10SQL Server 安装材料下载 链接:http://p删除an.baidu.com/s/1中文miQ1ZQg 密码:pszf挂不补,可到bdsola.com搜索下载 1.安装教程(幸运E版):http://jingyan.baidu.com/article/acf728fd1a30d0f8e510a380.html 注意:当你的电脑是多核的时候可能会出现安装错误   2.此时推荐教程:htt

mac数据恢复软件EasyRecovery使用教程

mac数据恢复软件EasyRecovery使用教程 文件丢失是非常让人郁闷的!因为没有备份所以很多重要的东西都没有办法找回!小编为大家准备了EasyRecovery,这款数据恢复软件费非常好用,可以将您丢失的数据找回.小编还特意为大家准备了数据恢复软件EasyRecovery使用教程,下面就和小编一起来看看具体如何使用吧! <ignore_js_op> 数据恢复软件EasyRecovery使用教程介绍:第一步:我们需要在Mac中安装好EasyRecovery for Mac,然后启动EasyR

mac苹果电脑上Mathtype软件的安装教程

对于数学学习来将,Mathtype是一款非常不错的工具,在这里您可以方便快捷的计算出公式的结果,只需要将方程式填写进去就能出来结果.小编为大家准备了Mathtype安装教程,安装的过程是非常简单的,安装好了之后会让您的工作变得更加轻松,还能提升工作的效率哦! Mathtype安装教程介绍:第一步:打开下载的Mathtype文件 第二步:点击左边的安装文件,会得到提示,下图所示: 第三步:选择好,然后会在弹出提示窗口,点击继续,如下图所示: 第四步:因为暂时只有英文版的,所以选择英文版,点击继续安