Easyui 基础布局和静态菜单栏

来源：互联网发布：iphone怎么投屏到mac 编辑：程序博客网时间：2024/06/18 04:23

说明：使用easyui 的基础布局，将界面划分为几个不同的页面。

上一篇说了，如何在mvc 中引用esayui ,MVC为类，写一个简单的服务型主页面。

步骤：

1.创建一个控制器：如图：

2.添加视图：如图：

3.代码：

控制层：

//
        // GET: /Home/
        /// <summary>
        /// 主页
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {

            return View();
        }

视图代码：

@{
    ViewBag.Title = "Easyui demo管理系统";
    Layout = "~/Views/_Layout1.cshtml";
}

<div data-options="region:'north'" style="height: 30px;
        background: url(/asset/images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%;
        line-height: 20px;color: #fff; font-family: Verdana, 微软雅黑,黑体">
    <span style="float:right; padding-right:20px;" class="head">
        当前时间：  <i id="bgclock"></i>   
    </span>

    <span style="padding-left:10px; font-size: 16px; ">
        <img src="/asset/images/blocks.gif" width="20" height="20" />
        Easyui demo管理系统统--@ViewBag.message
    </span>
</div>

<div data-options="region:'south'" style="height: 27px; background: #D2E0F2;">
    <div style="text-align: center; color: #15428B; margin: 0px; padding: 0px; line-height: 23px; font-weight: bold;">Copyright © XXXX版权所有 </div>
</div>
<div id="div_left" data-options="region:'west'" title="导航菜单" style="width:180px;">

</div>
<div id="mainPanle" data-options="region:'center'">
    <div id="tabs" class="easyui-tabs" data-options="fit:true,border:false">
        <div title="欢迎使用" style="padding:20px;overflow:hidden;" id="home">
            <h1>Welcome</h1>
        </div>
    </div>
</div>

js代码：

$(function () {
    InitLeftMenu();
    clockon();
});

//创建一个菜单对象（在实际开发的过程中，菜单栏应该由后台生成）
var _menus = {
    "menus": [
              {
                  "menuid": "1", "icon": "icon-sys", "menuname": "标题一",
                  "menus": [
                          { "menuname": "菜单一", "icon": "icon-nav", "url": "/House/add" },
                          { "menuname": "菜单二", "icon": "icon-addUser", "url": "/House/SelectHouse" },
                          { "menuname": "菜单三", "icon": "icon-users", "url": "/Area/Index" },
                          { "menuname": "菜单四", "icon": "icon-role", "url": "/WYGL/Index" },
                          { "menuname": "菜单五", "icon": "icon-set", "url": "/House/amend" },
                          { "menuname": "菜单六", "icon": "icon-set", "url": "/HJCX/Index" },
                          { "menuname": "菜单七", "icon": "icon-set", "url": "/MLSC/Index" }
                  ]
              }, {
                  "menuid": "8", "icon": "icon-sys", "menuname": "标题二",
                  "menus": [{ "menuname": "菜单一", "icon": "icon-nav", "url": "/SJSH/Index" },
                          { "menuname": "菜单二", "icon": "icon-nav", "url": "/SJSH/AuditPass" }
                  ]
              }, {
                  "menuid": "56", "icon": "icon-sys", "menuname": "标题三",
                  "menus": [{ "menuname": "菜单一", "icon": "icon-nav", "url": "/FWTJ/UpData" },
                          { "menuname": "菜单二", "icon": "icon-nav", "url": "/FWTJ/TimeTJ" },
                           { "menuname": "菜单三", "icon": "icon-nav", "url": "/FWTJ/LRTJ" }
                  ]
              }
    ]
};

//初始化左侧
function InitLeftMenu() {
    var s = '<div id="aa" class="easyui-accordion"><div title="Title3">hello</div></div>';
    $("#div_left").empty();
    var menulist = '<div id="aa" class="easyui-accordion">';
    $.each(_menus.menus, function (i, n) {
        menulist += '<div title="' + n.menuname + '" data-options="iconCls:\'' + n.icon + '\'" style="overflow:auto;">';
        menulist += '<ul>';
        $.each(n.menus, function (j, o) {
            menulist += '<li><div><a href="javascript:void(0);" title="' + o.url + '" ><span class="icon ' + o.icon + '" ></span>' + o.menuname + '</a></div></li> ';
        })
        menulist += '</ul></div>';
    })
    menulist += '</div>';
    //$("#aa").append(menulist);
    $("#div_left").append(menulist);
    //console.log(menulist);

    $('.easyui-accordion li a').click(function () {
        var tabTitle = $(this).text();
        var url = $(this).attr("title");
        addTab(tabTitle, url);
        $('.easyui-accordion li div').removeClass("selected");
        $(this).parent().addClass("selected");
    }).hover(function () {
        $(this).parent().addClass("hover");
    }, function () {
        $(this).parent().removeClass("hover");
    });
    $('#aa').accordion({
        border: false,
        fit: true
    });
}

function addTab(title, url, iconCls) {
    if ($('#tabs').tabs('exists', title)) {
        $('#tabs').tabs('select', title);
    } else {
        var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99.4%;"></iframe>';
        $('#tabs').tabs('add', {
            title: title,
            content: content,
            closable: true,
            fit: true

        });
    }
}

function clockon() {
    var now = new Date();
    var year = now.getFullYear(); //getFullYear getYear
    var month = now.getMonth();
    var date = now.getDate();
    var day = now.getDay();
    var hour = now.getHours();
    var minu = now.getMinutes();
    var sec = now.getSeconds();
    var week;
    month = month + 1;
    if (month < 10) month = "0" + month;
    if (date < 10) date = "0" + date;
    if (hour < 10) hour = "0" + hour;
    if (minu < 10) minu = "0" + minu;
    if (sec < 10) sec = "0" + sec;
    var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    week = arr_week[day];
    var time = "";
    time = year + "年" + month + "月" + date + "日" + " " + hour + ":" + minu + ":" + sec + " " + week;
    $("#bgclock").html(time);
    var timer = setTimeout("clockon()", 200);
}

运行结果：

0 0