jQuery EasyUI 简介
2024-10-20 13:47:36
简介
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可以很快的实现一个带有数据交互功能的面板
最新文章
- vmware 安装 macos
- fastdfs 安装配置
- LR连接oracle数据库-lr_db_connect
- subplot demo
- JS函数创建的具体过程
- Jquery note
- spring 切面 前置后置通知 环绕通知demo
- PreparedStatement是如何大幅度提高性能的
- Linux本地无法登录,远程却可以登录
- thinkphp连接mysql5.5版本数据库
- CentOS添加磁盘分区
- 使用Map标签指定点击区域时的兼容性问题
- js 实现数据结构 -- 链表
- Android ANR(应用无响应)解决分析【转】
- tcp timestamps
- 字符、字符串和文本的处理之String类型
- codeforces 1141G Privatization of Roads in Treeland
- TreeSet的自然排序(自定义对象 compareTo方法)
- python input 与raw_input函数的区别
- 让黑白的SecureCRT彩色起来