<html>
<head>
<title>面板</title>
<link rel="stylesheet" type="text/css" href="H:/jQuery EasyUI/jquery-easyui-1.5.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="H:/jQuery EasyUI/jquery-easyui-1.5.3/themes/icon.css"/>
<script type="text/javascript" src="H:/jQuery EasyUI/jquery-easyui-1.5.3/jquery.min.js"></script>
<script type="text/javascript" src="H:/jQuery EasyUI/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<script>
$(function (){
$('#panel').panel({
/*
href string:一个URL加载远程数据,然后显示在面板
高德天气服务
http://restapi.amap.com/v3/weather/weatherInfo?key=4aa728e05f91faabe805b633e5c631f3&city=深圳
*/
href:'http://restapi.amap.com/v3/weather/weatherInfo?key=4aa728e05f91faabe805b633e5c631f3&city=深圳'
,width:500
,height:200
,title: '面板显示运程加载的数据(JSON格式)'
,tools: [{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
/*fit boolean:设置为true时,面板的大小将铺满它所在的容器(浏览器)*/
,fit:false
/*border boolean ture:设置是否显示面板的边框*/
,border:true
/*noheader boolean false:是否不创建面板头部*/
,noheader:false
,content:'<button>按钮</button>'
/*collapsible boolean false:控制面板是否可折叠*/
,collapsible:true
/*closable boolean false:定义是否显示关闭按钮*/
,closable:true
/*
onLoad none:远程数据被载入时触发
onBeforeOpen none:在控制面板被打开之前触发,返回false将停止打开
onOpen none:在控制面板被打开之后触发
onBeforeClose none:在控制面板被关闭之前触发,返回false将取消关闭
*/
,onLoad:function(){
alert("运程数据载入成功!");
}
});
})
</script>
</head>
<body>
<div id="panel" style="padding:10px;"></div>
</body>
</html>
EasyUI 控制面板
最新推荐文章于 2020-10-13 17:44:20 发布