<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Portal - jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="default/easyui.css">
<style type="text/css">
.title{
font-size:16px;
font-weight:bold;
padding:20px 10px;
background:#eee;
overflow:hidden;
border-bottom:1px solid #ccc;
}
.t-list{
padding:5px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery.portal.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
var panels;
var portal;
var myHeight = 200;
$(function () {
panels = [{
id: 'p1',
title: '时钟',
//height: myHeight,
//width: myWidth,
collapsible: true,
closable:true,
content: document.getElementById("portal_1").innerHTML
}, {
id: 'p2',
title: '今日提醒',
//height: myHeight,
//width: myWidth,
collapsible: true,
closable: true,
content: document.getElementById("portal_2").innerHTML
}, {
id: 'p3',
title: '内部公告',
// height: myHeight,
// width: myWidth,
collapsible: true,
closable: true,
content: document.getElementById("portal_3").innerHTML
}, {
id: 'p4',
title: '今日提醒二',
// height: myHeight,
// width: myWidth,
collapsible: true,
closable: true,
content: document.getElementById("portal_4").innerHTML
}];
//监听portal状态改变事件、每次改变位置、获取当前改变后的位置状态、保存在cookie
portal = $('#portal').portal({
border: false,
fit: true,
onStateChange: function () {
$.cookie('portal_paenl_states', getPanelsLoaction(), {
expires: 7
});
}
});
//在一起的用，分割，不在一起的用：分割
var local = 'p1,p2:p3:p4';
if ($.cookie("portal_paenl_states")) {
local = $.cookie("portal_paenl_states");
}
function getPanelById(id) {
for (var i = 0; i < panels.length; i++) {
if (panels[i].id == id) {
return panels[i];
}
}
return undefined;
}
//渲染panel
function renderPanel() {
var cols = local.split(":");
for (var i = 0; i < cols.length; i++) {
var rows = cols[i].split(",");
for (var j = 0; j < rows.length; j++) {
var op = getPanelById(rows[j]);
var p = $('<div/>').attr('id', op.id).appendTo('body');
p.panel(op);
portal.portal('add', {
panel: p,
columnIndex: i
});
}
}
}
renderPanel();
portal.portal('resize');
//获取当前位置状态
function getPanelsLoaction() {
var locals = [];
var cols = local.split(":").length;
for (var i = 0; i < cols; i++) {
var temp = [];
var pl = portal.portal("getPanels", i);
for (var j = 0; j < pl.length; j++) {
temp.push(pl[j].attr("id"));
}
locals.push(temp.join(","));
}
return locals.join(':');
}
});
function remove() {
$('#portal').portal('remove', $('#pgrid'));
$('#portal').portal('resize');
}
</script>
</head>
<body class="easyui-layout">
<div region="center" border="false">
<div id="portal">
<div style="width: 30%;">
</div>
<div style="width: 40%;">
</div>
<div style="width: 30%;">
</div>
</div>
</div>
<div id="portal_1">
<div title="时钟" style="text-align: center; background: #f3eeaf; height: 150px; padding: 5px;"
closable="true">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="100" height="100">
<param name="movie" value="http://www.respectsoft.com/onlineclock/analog.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="http://www.respectsoft.com/onlineclock/analog.swf" width="100" height="100"
quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</div>
</div>
<div id="portal_2">
<div style="padding: 15px;">
<div style="height: 32px">
<span class="infoFont">等待录入票号的订单</span>
<div class="marginW10px">
</div>
<label id="lblOrderCount" runat="server" onclick="WaitInputTickets()" style="float: left;
font-size: 14px; line-height: 30px; text-align: right; cursor: pointer; color: #006BB9;">
</label>
<div class="marginW50px">
</div>
<div class="btn_mainBox" onmouseover="this.className='btn_mainBoxHover'" onmouseout="this.className='btn_mainBox'">
<asp:Button ID="btnSearch" CssClass="btn_main" runat="server" Text="刷 新" OnClick="btnSearch_Click" />
</div>
</div>
</div>
</div>
<div id="portal_3">
<ul>
<li>关于吉祥航空暑期新开航线的通知(修改版)</li>
<li>关于吉祥航空暑期新开航线的通知(修改版)</li>
<li>关于吉祥航空暑期新开航线的通知(修改版)</li>
<li>关于吉祥航空暑期新开航线的通知(修改版)</li>
<li>关于吉祥航空暑期新开航线的通知(修改版)</li>
<li>关于吉祥航空暑期新开航线的通知(修改版)</li>
<li>关于吉祥航空暑期新开航线的通知(修改版)</li>
<li>关于吉祥航空暑期新开航线的通知(修改版)</li>
<li>关于吉祥航空暑期新开航线的通知(修改版)</li>
<li>关于吉祥航空暑期新开航线的通知(修改版)</li>
</ul>
</div>
<div id="portal_4">
<img height="160" src="http://upload.51ttu.com/BannerUpload/130425102206.jpg" width="100%"></img>
</div>
</body>
</html>
DashBoard效果的.rar （15个子文件） 
仿谷歌DashBoard效果的 
portal.css 493B jquery.min.js 81KB jquery.portal.js 8KB datagrid_data.json 1KB
不记录位置portal.html 4KB portal可记位置的模版.html 8KB default images 
searchbox_button.png 813B slider_handle.png 863B panel_tools.png 852B menu_arrows.png 160B Thumbs.db 9KB
loading.gif 2KB easyui.css 9KB jquery.cookie.js 4KB jquery.easyui.min.js 302KB
- 1
- 2
- 3
- 4
- 5
- 6
前往页