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是在全部页面加载完之后才执行的onload='' -->
<body onload=''>
<!--这里-->
<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是在全部页面加载完之后才执行的onload='' -->
<body onload=''>
<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" onclick="$(p).panel('open')"/>
//第二个按钮关闭这个panel
<input type="button" value="close" onclick="$(p).panel('close')"/>
//第三个按钮在内存中销毁这个panel
<input type="button" value="close" onclick="$(p).panel('destroy')"/>
</body>
</html>