jQuery easyUI pannel 用法记录
主要实现了easyUI中1 panel的打开，关闭，resize。 2 通过按钮动态新建panel。
<!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=gb2312" />
<title>Panel Practise</title>
<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<style>
.panel{display:inline;float:left
}body{overflow:auto; }
</style><script type="text/javascript" >// fit 为true 时， width 和 height 失去效果// move 不好用
$(function(){$("#pannel").panel({title:"测试panel",width:300,height:300,fit:false,border:true,noheader:false,collapsible:true,minimizable:true,maximizable:true,closable:true,collapsed:false,iconCls:"icon-ok",tools:[{iconCls:'icon-add',handler:function(){alert('add')}},{iconCls:'icon-edit',handler:function(){alert('edit')}}],onBeforeOpen:function(){alert("onBeforeOpen");},onOpen:function(){alert("onOpen");},onBeforeClose:function(){alert("onBeforeClose");},onClose:function(){alert("onClose");}});$("#openpanel").bind("click", openPanel);$("#closepanel").bind("click", closePanel);$("#movepanel").bind("click", movePanel);$("#resizepanel").bind("click", resizePanel);$("#newpanel").bind("click", newPanel);});function openPanel(){console.log("openPanel");$("#pannel").panel('open');}function closePanel(){console.log("closePanel");$("#pannel").panel('close');} function movePanel(){console.log("movePanel");$("#pannel").panel('move',{left:100, top:100});}function resizePanel(){console.log("resizePanel");$("#pannel").panel('resize',{height:100, width:100});} function newPanel(){console.log("new");var index = $(".panel").size();var p_id = "pannel" + index;var html = "<div id='"+ p_id +"'></div>"console.log(html);$(".panel:last").after(html)$("#"+p_id).panel({title:"测试panel",width:300,height:300,content: p_id});}</script>
</head><body>
<div style="display:block">
<input id="openpanel" type="button" value="打开" />
<input id="closepanel" type="button" value="关闭" />
<input id="movepanel" type="button" value="移动" />
<input id="resizepanel" type="button" value="resize" />
<input id="newpanel" type="button" value="新建" />
</div><div id="pannel" style="width:300px; height:300px;" > abc
</div></body>
</html>
转载于:https://www.cnblogs.com/Eastsong/p/3595764.html
jQuery easyUI pannel 用法记录相关推荐
- java提示框easyui风格_[Java教程]jQuery EasyUI 提示框(Messager)用法
[Java教程]jQuery EasyUI 提示框(Messager)用法 0 2013-10-10 19:00:06 jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的 ...
- jQuery EasyUI 提示框(Messager)用法
jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的HTML代码,只需要按照<jQuery EasyUI框架使用文档>包含必要文件后,在$(function() ...
- jquery+easyui开发、培训文档
目 录 1.... Accordion(可折叠标签)......................................................................... ...
- 网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?
简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它 ...
- jquery easyui中文培训文档
目 录 1.... Accordion(可折叠标签)......................................................................... ...
- JQuery EasyUI的常用组件
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...
- jQuery EasyUI DataGrid 分页 FOR ASP.NET
源代码: 前台(html): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- JQuery EasyUI学习框架
前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...
- 富有客户端技术之——jQuery EasyUI
在B/S开发中页面制作涉及HTML.CSS.javascript等技术,我们随掌握相关技术,但实际开发中页面美化特别是样式设计一直困扰着我们.怎样更好.更快的设计美观.专业.时代性的页面呢?JQuer ...
最新文章
- 阿里巴巴副总裁司罗：达摩院如何搭建NLP技术体系？
- ThinkPHP导入第三方类库Vendor
- Java并发编程实战系列15之原子遍历与非阻塞同步机制(Atomic Variables and Non-blocking Synchronization)...
- 随便写点时间相关的模块
- linux计算机硬件信息,计算机linux查看硬件信息命令.doc
- python安装好了怎么打不开机_安装后无法启动MySQL怎么办
- 固态硬盘Ghost安装Windows 10无法引导的问题
- 云水画中人，独立一江秋
- abstract class和interface有什么区别
- iPhone 13 Pro原型机曝光：全新玫瑰金配色，女性首选
- 语言阿克曼函数_函数式的动态规划
- 关于阵列卡的配置参数Cache Policy(缓存策略)
- easyui tree json php,easyui tree json
- 毕业论文的6中降重方法
- Ruby之父松本行弘：编程是可以干一辈子的
- windows出于安全原因某些设置由系统管理员管理解决方法
- Android 图片与屏幕坐标点
- convolution backbone network——Deep Pyramidal Residual Networks
- 【JavaEE】网络基本概念与协议分层手术刀剖析
- 周易六十四卦——泽天夬卦