页面布局

发布时间:2017-3-23 8:26:46 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"页面布局 ",主要涉及到页面布局 方面的内容,对于页面布局 感兴趣的同学可以参考一下。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>OA传统布局</title>
    <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <style type="text/css">
        .txt {
        font-size:20px;
        color:blue;
        font-weight:bolder;
        float:left;
        margin-left:30px;
        margin-top:15px;
             }
        .txt1 {
        font-size:14px;
        float:right;
         margin-top:15px;
         margin-right:20px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            bindEvent();
        });
        function bindEvent() {
            $(".detailLink123").click(function () {
                var title = $(this).text();
                var url = $(this).attr('url');
                var isExt = $('#tt').tabs('exists', title);//判断页签是否存在
                if (isExt) {
                    $('#tt').tabs('select', title);
                    return;
                }
                $('#tt').tabs('add', {
                    title: title,
                    content: createContetn(url),
                    closable: true
                });

            });
        }
        function createContetn(url) {
            var str = '<iframe src="'+url+'" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>';
            return str;
        }
    </script>
</head>
<body class="easyui-layout">
    <!---------顶部布局--------------->
    <div data-options="region:'north',border:false" style="height:73px;background:#B3DFDA;padding:10px; overflow:hidden;background-image:url('/Content/Images/bg3.png')">
        <img src="/Content/Images/logo.gif" style="float:left" />
        <span class="txt">传智播客OA系统</span>
        <span class="txt1">欢迎 @ViewData["userName"] 登录</span>

    </div>
      <!---------顶部布局--------------->


    <!--------------左侧布局-------------------->
    <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:3px;">
        <div class="easyui-accordion" style="width:auto;height:auto;">
        <div title="用户管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:5px;">
            <a href="javascript:void(0)" class="detailLink123" url="/UserInfo/Index">用户管理</a>
        </div>
        <div title="角色管理" data-options="iconCls:'icon-help'" style="padding:5px;">
            <a href="javascript:void(0)" class="detailLink123" url="/RoleInfo/Index">角色管理</a>    
        </div>
    
    </div>

    </div>
    <!------------------左侧布局结束----------------------->



    <div data-options="region:'south',border:false" style="height:20px;background:#A9FACD;padding:5px; overflow:hidden; text-align:center">版权&copy;itcast.cn</div>


     <!--------------中间布局-------------------->
    <div data-options="region:'center',title:'Center'">

        <div class="easyui-tabs" style="width:700px;height:250px" fit="true" id="tt">
        <div title="用户管理" style="padding:10px">
        <iframe src="/UserInfo/Index" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>
        </div>
        <div title="My Documents" style="padding:10px">
            <ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
        </div>
        <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
            This is the help content.
        </div>
    </div>



        
    </div>
       <!--------------中间结束-------------------->
</body>

</html>
View Code

采用ligerui布局WEBQQ模式布局,将lib文件夹加入项目(采用ligerui布局、WEBQQ)结合布局系统

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>OA管理系统</title>
    <link href="~/Content/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" />
    <link href="~/Content/lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Content/lib/ligerUI/js/ligerui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#layout1").ligerLayout({
                allowTopResize: false,
                topHeight:65
            });
        });
    </script>
    <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: 20px;
            color: blue;
            font-weight: bolder;
            float: left;
            margin-top: 15px;
            margin-left: 30px;
        }

        .l-dialog-content {
            overflow-y: hidden;
        }
    </style>
</head>
<body style="overflow: hidden; background: url(/Content/lib/images/applebg.jpg) no-repeat  center center;">


    <div id="layout1">

        <div position="center" title="标题" style="background: url(/Content/lib/images/applebg.jpg) no-repeat  center center;">
            <div id="winlinks">
                <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">传智播客OA系统</span>
            <span style="float:right;font-size:14px;margin-top:15px;margin-right:20px">欢迎 @ViewData["userName"] 登录 &nbsp;&nbsp;<a href="/Login/Logout">退出</a></span>

        </div>

    </div>



</body>
<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: 650, url: url, width: 750, 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: '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-70;
        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, 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(); //页面加载时创建任务栏
    //校验登录用户的菜单权限
    $.getJSON("/Home/GetMenus", {}, function (data) {
        links = data;
        linksInit();
        onResize();
    });


</script>
</html>
View Code

上一篇:c# 基础
下一篇:Java豆瓣电影爬虫——小爬虫成长记(附源码)

相关文章

关键词: 页面布局

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款