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可以很快的实现一个带有数据交互功能的面板

转载于:https://www.cnblogs.com/adaia/p/7078025.html

jQuery EasyUI 简介相关推荐

使用Jquery EasyUi常见问题解决方案
/** *清空指定表单中的内容,参数为目标form的id *注:在使用Jquery EasyUI的弹出窗口录入新增内容时,每次打开必须清空上次输入的历史 *数据,此时通常采用的方法是对每个输入组件进行 ...
Easyui简介、使用介绍即项目演
Easyui简介即项目演示 1.什么是Easyui 1.2.easyui的不足 1.3.easyUI带给我们的好处 2.Easyui使用介绍 2.1.下载easyui版本 2.2.下载Easyui ...
JQuery EasyUI的常用组件
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...
雷林鹏分享：jQuery EasyUI 数据网格 - 创建属性网格
jQuery EasyUI 数据网格 - 创建属性网格属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...
第二百二十节，jQuery EasyUI，Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
jQuery EasyUI DataGrid 分页 FOR ASP.NET
源代码: 前台(html): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
JQuery EasyUi之界面设计——前言与界面效果（一）
为什么80%的码农都做不了架构师?>>> 如果冯巩的开场白是"观众朋友们,我想死你们了",那么我的开场白是"最近一直很忙,很久没有发文了" ...
《jQuery EasyUI开发指南》——10.4　迭代开发
本节书摘来自异步社区<jQuery EasyUI开发指南>一书中的第10章,第10.4节,作者:王波著,更多章节内容可以访问云栖社区"异步社区"公众号查看 10.4 迭 ...
jQuery EasyUI使用教程之使用标记创建树形菜单
2019独角兽企业重金招聘Python工程师标准>>> jQuery EasyUI最新试用版下载请猛戳>> 一个树形菜单可以使用标记创建.easyui树形菜单也可以定义在 ...

jQuery EasyUI 简介

jQuery EasyUI 简介相关推荐

最新文章

热门文章