一个开源系统的架构分析（二）

主页面中的javascript分析

[code=language-javascript]
$(function () {
setInterval("getUser()", 30000);
$("#pageloading").height($(window).height());
//布局
$("#layout1").ligerLayout({ leftWidth: 190, rightWidth: 190, bottomHeight: 25, allowBottomResize: false, allowLeftResize: false, allowRightResize: false, height: '100%', onHeightChanged: f_heightChanged, isRightCollapse: true });
var height = $(".l-layout-center").height();
//Tab
tab = $("#framecenter").ligerTab({
height: height,
dblClickToClose: true,
showSwitch: true,       //显示切换窗口按钮
showSwitchInTab: true //切换窗口按钮显示在最后一项
});
//面板
accordion = $("#accordion1").ligerAccordion({ height: height - 25 });
accordion2 = $("#accordion2").ligerAccordion({ height: height - 25 });
f_according();
//时间日期
$('#jnkc').jclock({ withDate: true, withWeek: true });

initLayout();
$(window).resize(function () {
initLayout();
});
getsysinfo();       //取得系统信息
getuserinfo();      //更新登录用户信息及头像
toolbar();          //建立系统 Toolbar 图标
remind();           //显示根据时间变化的问候语
show_welcome();     //显示欢迎页面
$("#mainframe").attr("src", "personal/portal.aspx");
$("#tree1").ligerTree({
url: 'Sys_base.getUserTree.xhd?rnd=' + Math.random(),
idFieldName: 'id',
//parentIDFieldName: 'pid',
usericon: 'd_icon',
checkbox: false,
itemopen: false,
onError: function () { javascript: location.replace("login.aspx"); }
});
});

建立30s间隔的用户在线扫描

然后进行布局操作

设置tab标签样式

建立面板

显示时间

初始化布局内容

显示基础信息

加载欢迎页面

加载个人信息中心

加载菜单树，如果没有用户则调用登录页面

其中系统样式主要采用 liger 套件，LigerUI 是基于jQuery 的UI框架，其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。简单而又强大，致力于快速打造Web前端界面解决方案，可以应用于.net,jsp,php等等web服务器环境。

LigerUI有如下主要特点：

使用简单，轻量级

控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景

快速开发，使用LigerUI可以比传统开发减少极大的代码量

易扩展，包括默认参数、表单/表格编辑器、多语言支持等等

支持Java、.NET、PHP等web服务端

支持 IE6+、Chrome、FireFox等浏览器

开源，源码框架层次简单易懂。

系统采用了这一套件方便快捷的建立了一套企业级信息管理平台。