jQuery EasyUI 简介
简介
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 简介的更多相关文章
- jQuery EasyUI简介
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助we ...
- [JQuery EasyUI系列]简介
一.jQuery EasyUI是一个基于jQuery的框架,继承了各种用户界面插件. 二.jQuery EasyUI框架提供了创建网页所需的一切,可以轻松建立站点. easyui是一个基于jQuery ...
- jQuery EasyUI 入门简介
对于前端开发者来说,在开发过程中应用“框架”这一工具,可以极大的缩短开发时间,提高开发效率.今天我们就开介绍一款常用的框架——jQuery EasyUI. 那什么是jQuery EasyUI呢? jQ ...
- Jquery EasyUI封装简化操作
//confirm function Confirm(msg, control) { $.messager.confirm('确认', msg, function (r) { if (r) { eva ...
- jQuery easyUI框架中经常出现的问题
相信开发者对于我们jquery来说都不会陌生吧,jquery为我们的开发提供了很多各式各样的库,满足各种开发的需求,其中我们知道的有轻量级的,但是也有一些基于富客服端的一些重量级库,顾名思义,当我们在 ...
- [转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo
热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...
- jQuery EasyUI 详解
EasyUI 简介 easyui 是一种基于 jQuery 的用户界面插件集合. easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能. 使用 easyui 你不需要写很多 ...
- 开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo(转)
热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...
- JQuery EasyUI学习笔记
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html 简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用 ...
随机推荐
- 点滴积累【other】---win2003 service pack2 IIS 无法复制CONVLOG.EXE CONVLOG.EX_(转载)
在安装的时候出现一个错误提示“安装程序无法复制文件CONVLOG.EX_”,上网找了下资料,说是在运行-中输入”esentutl /p %windir%/security/database/seced ...
- zepto,kissy前端框架实现跨域
三.jsonp的原理:带有src属性标签的跨域资源获取能力,在jsonp中通常使用<script>标签,因为<script>标签获取的跨域资源可以使用回调函数直接处理 json ...
- ToStringBuilder学习(三):readResolve()方法与序列化
在ToStringBuilder学习(一)中提到一个问题,即 readResolve方法是干啥的? 当时也没多想, 只是列在那里, 今天忙里偷闲地把搜点材料整理下这个问题. 原来这个方法跟对象的序列化 ...
- iptables常用规则:屏蔽IP地址、禁用ping、协议设置、NAT与转发、负载平衡、自定义链
iptables常用规则:屏蔽IP地址.禁用ping.协议设置.NAT与转发.负载平衡.自定义链 时间 -- :: IT社区推荐资讯 原文 http://itindex.net/detail/4772 ...
- 【问题记录】mybatis开启事务方法时,一级缓存可能引发的问题
首先,上代码: public void listMybatisModel() { List<MybatisModel> mybatisModels = mapper.listMybatis ...
- spring junit 部署两套测试方案
第一套方案: 1.初始化application:使用@ContextConfigurationr的classpath属性,如 @ContextConfiguration(locations = { & ...
- love2d教程33--window模块
--love的window模块比较简单,直接贴代码了function love.load() io.stdout:setvbuf("no") -- 设置io为无缓存模式 --获取显 ...
- Ubuntu/Mac彻底解决手机ADB识别问题
之前写过一篇同样解决手机识别问题的文章(http://www.cnblogs.com/benhero/p/4202967.html) ,不过今天在遇到特殊手机"魅族"!之前的解决方 ...
- 再来一个expect脚本
[root@jenkins scripts]# cat expect_test1205.sh #!/usr/bin/expect ################################### ...
- 【BZOJ】3397: [Usaco2009 Feb]Surround the Islands 环岛篱笆(tarjan)
http://www.lydsy.com/JudgeOnline/problem.php?id=3397 显然先tarjan缩点,然后从枚举每一个scc,然后向其它岛屿连费用最小的边,然后算最小的即可 ...