李炎恢_PHP_jQuery EasyUI[009] ~ Panel(面板)組件
李炎恢_PHP_jQuery EasyUI[009] ~ Panel(面板)組件
參考資料: https://github.com/jash-git/jash-WebSI
GITHUB: https://github.com/jash-git/richie_jQuery_EasyUI
My code:
$(function () {
$('#box').panel({
//id : 'pox',
title : '面板',
width : 500,
height : 150,
iconCls : 'icon-search',
//left : 100,
//top : 100,
cls : 'a',
headerCls : 'b',
bodyCls : 'c',
style : {
'min-height' : '200px',
},
//fit : true,
//border : false,
//doSize : false,
//noheader : true,
//content : '修改了',
collapsible : true,
minimizable : true,
maximizable : true,
closable : true,
//tools : '#tt',
tools : [{
iconCls : 'icon-help',
handler : function () {
alert('help');
},
},{
}],
//collapsed : true,
//minimized : true,
//maximized : true,
//closed : true,
href : 'content.php',
loadingMessage : '加载中...',
extractor : function (data) {
return data.substring(0,3);
}
});
//$('#box').panel('panel').css('position', 'absolute');
});
<?php sleep(3); echo 123123; ?>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="../../easyui_15/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui_15/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../easyui_15/locale/easyui-lang-zh_TW.js" ></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="../../easyui_15/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../easyui_15/themes/icon.css" />
</head>
<body>
<!--
<div class="easyui-panel" data-options="closable:true" title="面板" style="width:500px;">
<p>内容区域</p>
</div>
-->
<div id="box">
<p>内容区域</p>
</div>
<div id="tt">
<a class="icon-add" onclick="javascript:alert('add')"></a>
<a class="icon-edit" onclick="javascript:alert('edit')"></a>
<a class="icon-cut" onclick="javascript:alert('cut')"></a>
</div>
</body>
</html>
PDF:
執行結果:
