上下布局:/ligerui/Source/index.htm----功能列表----布局----最小宽度----/Source/demos/layout/layoutMinWidth.htm----查看源代码----复制所需的CSS、JS文件。。。。。。。。。
WebQQ布局:/ligerui/Source/index.htm----应用场景----模拟Window桌面----查看源代码----复制所需的CSS、JS文件。。。。。。。。。
@{
Layout = null; //MVC中的view视图。
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" /> <!--ligerUI插件的CSS文件-->
<link href="~/Content/lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Content/lib/ligerUI/js/ligerui.min.js"></script> <!--ligerUI插件的JS文件-->
<style type="text/css">
.l-case-title {
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
}
body, html {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
#winlinks {
position: absolute;
left: 20px;
top: 20px;
width: 100%;
}
#winlinks ul {
position: relative;
}
#winlinks li {
width: 70px;
cursor: pointer;
height: 80px;
position: absolute;
z-index: 101;
list-style: none;
text-align: center;
}
#winlinks li img {
width: 36px;
height: 36px;
}
#winlinks li span {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
border-radius: 10px 10px 10px 10px;
display: block;
font-size: 12px;
margin-top: 1px;
color: White;
line-height: 18px;
text-align: center;
}
#winlinks li.l-over div.bg {
display: block;
}
#winlinks li div.bg {
display: none;
position: absolute;
top: -2px;
left: -2px;
z-index: 0;
width: 75px;
height: 64px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #000;
opacity: 0.1;
filter: alpha(opacity=10);
}
.l-taskbar-task-icon {
top: 3px;
left: 6px;
background-image: none;
}
.l-taskbar-task-content {
margin-left: 30px;
}
.l-taskbar-task-icon img {
width: 22px;
height: 22px;
}
.txt {
font-size:25px;
color:blue;
font-weight:bold;
float:left;
margin-top:15px;
margin-left:200px;
}
</style>
<!--上下布局的JS代码-->
<script type="text/javascript">
$(function () {
$("#layout1").ligerLayout({
minLeftWidth: 80,
minRightWidth: 80,
allowTopResize: false,
topHeight:75
});
});
</script>
</head>
<body style="overflow: hidden; background: url(/Content/lib/images/applebg.jpg) no-repeat center center;">
<div id="layout1"> <!--上下布局-->
<div position="center" title="标题" style="overflow: hidden; background: url(/Content/lib/images/applebg.jpg) no-repeat center center;"> <!--上下布局的中间部分-->
<div id="winlinks"> <!--WebQQ布局放在上下布局的中间部分-->
<ul>
</ul>
</div>
</div>
<div position="top" style="background-image:url('/Content/Images/bg3.png')">
<img src="/Content/Images/logo.gif" style="float:left" /> <!--上下布局的上部-->
<span class="txt">XXX协同办公系统</span>
</div>
</div>
<div style="display: none;"></div>
</body>
<!--WebQQ布局的JS代码-->
<script type="text/javascript">
var LINKWIDTH = 90, LINKHEIGHT = 90, TASKBARHEIGHT = 43;
var winlinksul = $("#winlinks ul");
function f_open(url, title, icon) {
var win = $.ligerDialog.open(
{
height: 600, url: url, width: 780, showMax: true, showToggle: true, showMin: true, isResize: true, modal: false, title: title, slide: false, buttons: [
{
text: '确定', onclick: function (item, Dialog, index) {
win.hide();
}
}
]
});
var task = jQuery.ligerui.win.tasks[win.id];
if (task) {
$(".l-taskbar-task-icon:first", task).html('<img src="' + icon + '" />');
}
return win;
}
var links = [
{ icon: '/Content/lib/images/3DSMAX.png', title: '用户管理', url: '/UserInfo/Index' },
{ icon: '/Content/lib/images/3DSMAX.png', title: '角色管理', url: '/RoleInfo/Index' },
{ icon: '/Content/lib/images/3DSMAX.png', title: '权限管理', url: '/ActionInfo/Index' },
//{ icon: '/Content/lib/images/Program Files Folder.png', title: '固定列', url: '../grid/frozen/frozengrid.htm' },
//{ icon: 'images/Program Files Folder.png', title: '可拖动', url: '../base/drag.htm' },
//{ icon: 'images/Alien Folder.png', title: '树', url: '../tree/draggable.htm' },
//{ icon: 'images/Xp-G5 006.png', title: '下拉框', url: '../comboBox/comboBoxGrid.htm' },
//{ icon: 'images/Xp-G5 006.png', title: '下拉框', url: '../comboBox/comboBoxGrid.htm' },
//{ icon: 'images/Alien Folder.png', title: 'layout', url: '../layout/layoutFullHeight.htm' },
// { icon: 'images/Alien Folder.png', title: 'menu', url: '../menu/menubar.htm' },
// { icon: 'images/Xp-G5 006.png', title: 'tab', url: '../tab/tabHtml.htm' },
// { icon: 'images/3DSMAX.png', title: '分组', url: '../grid/groupable/checkbox.htm' }
];
function onResize() {
var linksHeight = $(window).height() - TASKBARHEIGHT-80;
var winlinks = $("#winlinks");
winlinks.height(linksHeight);
var colMaxNumber = parseInt(linksHeight / LINKHEIGHT);//一列最多显示几个快捷方式
for (var i = 0, l = links.length; i < l; i++) {
var link = links[i];
var jlink = $("li[linkindex=" + i + "]", winlinks);
var top = (i % colMaxNumber) * LINKHEIGHT;
var left = parseInt(i / colMaxNumber) * LINKWIDTH;
if (isNaN(top) || isNaN(left)) continue;
jlink.css({ top: top, left: left });
}
}
function linksInit() {
for (var i = 0, l = links.length; i < l; i++) {
var link = links[i];
var jlink;
var jlink = $("<li></li>");
jlink.attr("linkindex", i);
jlink.append("<img src='" + link.icon + "' />");
jlink.append("<span>" + link.title + "</span>");
jlink.append("<div class='bg'></div>");
jlink.hover(function () {
$(this).addClass("l-over");
}, function () {
$(this).removeClass("l-over");
}).click(function () {
var linkindex = $(this).attr("linkindex");
var link = links[linkindex];
f_open(link.url, link.title, link.icon);
});
jlink.appendTo(winlinksul);
}
}
$(window).resize(onResize);
$.ligerui.win.removeTaskbar = function () { }; //不允许移除
$.ligerui.win.createTaskbar(); //页面加载时创建任务栏
linksInit();
onResize();
</script>
</html>