UI学习笔记---EasyUI panel插件使用---03
UI学习笔记---EasyUI panel插件使用---03
UI学习笔记---EasyUI panel插件使用---03
1.panel简单小例子
-------------------
2.可以自己做一些小例子放到自己的icon.css中,加载进来用
3.用的时候先加载进来5个常用的js和css文件
4.一些panel的属性可以查看api
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!-- 解决乱码问题,设置编码charset=UTF-8" -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset='utf-8'></script>
<script type="text/javascript" src="jquery-easyui-1.2.6/jquery.easyui.min.js" charset='utf-8'></script>
<!-- 这里导入css,只需要导入themes中的easyui.css这里包含了easyui的所有的css -->
<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/default/easyui.css" type="text/css"></link>
<!-- 导入完上面的内容就可以利用easyui了 -->
<!-- 下面再导入图片的css文件 icon.css-->
<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/icon.css" type="text/css"></link>
<!-- 这个是时候easyui是英文的,这时候要用中文的需要引入locale中的 -->
<script type="text/javascript" src="jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js" charset='utf-8'></script>
<!-- 下面先介绍dialog实例 -->
<!--1.先写一个script-->
<script type="text/javascript" charset='utf-8'>
$(function(){
$('#dd').dialog({
//也可以从这里定义组件的属性
title:'testtitle'
})
});
</script>
</head>
<!-- 这里onload是在全部页面加载完之后才执行的οnlοad='' -->
<body οnlοad=''>
<!--这里-->
<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"
iconCls="icon-save" closable="true"
collapsible="true" minimizable="true" maximizable=true>
<p>panel content.</p>
<p>panel content.</p>
</div>
</body>
</html>
----------------------------------------
4.看一些常用的属性:
id string The id attribute of this panel. null
title string The title text to display in panel header. null
iconCls string A CSS class to display a 16x16 icon in panel. null
width number Set the panel width. auto
height number Set the panel height. auto
left number Set the panel left position. null
top number Set the panel top position. null
cls string Add a CSS class to the panel. null
headerCls string Add a CSS class to the panel header. null
bodyCls string Add a CSS class to the panel body. null
style object Add a custom specification style to the panel. {}
fit boolean When true to set the panel size fit it's parent container. false
border boolean Defines if to show panel border. true
doSize boolean If set to true,the panel will be resize and do layout when created. true
noheader boolean If set to true, the panel header will not be created. false
content string The panel body content. null
collapsible //这个属性是定义一个折叠按钮,默认是false.boolean Defines if to show collapsible button. false
minimizable //最小化boolean Defines if to show minimizable button. false
maximizable //最大化boolean Defines if to show maximizable button. false
closable boolean Defines if to show closable button. false
tools array,selector Custom tools, possible values:
1) an array, each element contains iconCls and handler properties.
2) a selector that indicating the tools
[]
collapsed boolean Defines if the panel is collapsed at initialization. false
minimized boolean Defines if the panel is minimized at initialization. false
maximized boolean Defines if the panel is maximized at initialization. false
closed boolean Defines if the panel is closed at initialization. false
href string A URL to load remote data and then display in the panel. null
cache boolean True to cache the panel content that loaded from href. true
loadingMessage string When loading remote data show a message in the panel. Loading��
extractor function Defines how to extract the content from ajax response, return extracted data. extractor: function(data){
var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
var matches = pattern.exec(data);
if (matches){
return matches[1]; // only extract body content
} else {
return data;
}
}
-----------------------------------------------------
5. <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"
iconCls="icon-save" closable="true"
collapsible="true"//显示折叠按钮
minimizable="true" //最小化按钮
maximizable=true> //最大化
closed="true"//让panel刚刚开始的时候display是true
<p>panel content.</p>
<p>panel content.</p>
</div>
-------------------------------
6.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!-- 解决乱码问题,设置编码charset=UTF-8" -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset='utf-8'></script>
<script type="text/javascript" src="jquery-easyui-1.2.6/jquery.easyui.min.js" charset='utf-8'></script>
<!-- 这里导入css,只需要导入themes中的easyui.css这里包含了easyui的所有的css -->
<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/default/easyui.css" type="text/css"></link>
<!-- 导入完上面的内容就可以利用easyui了 -->
<!-- 下面再导入图片的css文件 icon.css-->
<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/icon.css" type="text/css"></link>
<!-- 这个是时候easyui是英文的,这时候要用中文的需要引入locale中的 -->
<script type="text/javascript" src="jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js" charset='utf-8'></script>
<!-- 下面先介绍dialog实例 -->
<!--1.先写一个script-->
<script type="text/javascript" charset='utf-8'>
$(function(){
$('#dd').dialog({
//也可以从这里定义组件的属性
title:'testtitle'
})
});
</script>
</head>
<!-- 这里onload是在全部页面加载完之后才执行的οnlοad='' -->
<body οnlοad=''>
<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"
iconCls="icon-save"
closable="true"
collapsible="true"
minimizable="true"
maximizable=true
closed="true"
>
<p>panel content.</p>
<p>panel content.</p>
</div>
//第一个按钮打开这个panel
<input type="button" value="open" οnclick="$(p).panel('open')"/>
//第二个按钮关闭这个panel
<input type="button" value="close" οnclick="$(p).panel('close')"/>
//第三个按钮在内存中销毁这个panel
<input type="button" value="close" οnclick="$(p).panel('destroy')"/>
</body>
</html>
UI学习笔记---EasyUI panel插件使用---03相关推荐
- Ui学习笔记---EasyUI的EasyLoader组件源码分析
Ui学习笔记---EasyUI的EasyLoader组件源码分析 技术qq交流群:JavaDream:251572072 1.问题1:为什么只使用了dialog却加载了那么多的js http: ...
- Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用
Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用 技术qq交流群:CreDream:251572072 1.使用之前导入文件: 这里用jquery-easyui-1.2.6 ...
- Ui学习笔记---EasyUI的介绍
Ui学习笔记---EasyUI的介绍 -------------------------- 1.组织: a.EasyUI官方:http://www.jeasyui.com EasyUI是一 ...
- Apache Nutch 1.3 学习笔记十（插件机制分析）
1. 一些对象说明 PluginRepository:这是一个用于存储所有插件描述对象(PluginDescriptor),插件扩展点(ExtensionPoint)和被激活的插件. PluginDe ...
- easyui学习笔记4—panel的实现
这篇看看easyui是怎么实现panel的,就是类似一个容器,里面可以装具体内容或者其他的easyui控件. 1.这里先看看引用的资源文件 <link rel="stylesheet& ...
- 基于AngularJS的Onsen UI --Onsen UI学习笔记
AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...
- webpack学习笔记 (三) webpack-dev-server插件和HotModuleReplacementPlugin插件使用
webpack-dev-server插件 webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务. we ...
- 基于AngularJS的Onsen UI --Onsen UI学习笔记
AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...
- springmvc学习笔记--mybatis--使用插件自动生成实体和mapper
由于表对象在开发过程中会增删字段,有时候需要重新生成实体和对应的mapper,这时候可以通过mybatis的插件的生成. 优点是快速简洁,缺点同样很明显:覆盖.因此,通常是在第一次搭建框架的时候使用, ...
最新文章
- IBM IMM默认ID 及修改默认IP 方法
- 【C语言】宏offsetof的模拟实现 （计算结构体中某变量相对于首地址的偏移）
- Android 模拟Uart 串口通信
- VS2005与Device通过ActiveSync连接异常的常见原因
- 洛谷UVA1328,POJ1961-Period【KMP,字符串】
- xpath helper小工具的安装
- 奥斯卡“最佳国际电影”奖，《哪吒之魔童降世》申请出战！
- Nodejs获取MySQL数据_nodejs同步调用获取mysql数据时遇到的大坑
- python读取mysql以html形式输出_python从mysql数据库提取出来的数据怎么在html里显示...
- 擦地机器人毕业设计_救援机器人毕业设计
- 在写spring项目的时候，有时候需要写ApplicationContext，有时候不要写ApplicationContext
- stm32 薄膜键盘原理_stm32F4----薄膜4*4矩阵键盘读取（七）
- Windows系统下输入法变为繁体字
- DDR3的配置及仿真教程
- 解决黑苹果无法自动更新的问题，
- ps5和switch哪个好
- 什么时候应该在ECMAScript 6中使用Arrow函数？
- Linux几种检测rootkit隐藏进程的方法
- 这个弹丸小国，靠移民收割不少国人
- 浏览器使常用快捷键——收藏