ASP.NET MVC搭建項目后台UI框架—3、面板折疊和展開

本文轉載自查看原文 2015-05-17 14:29 8753 ASP.NET MVC

開始操作

1、修改Right視圖，在右側添加一個div，設置float:left;，里面存放一個圖片按鈕，作為面板折疊和展開的開關。添加一個juqery方法，調用父框架Index視圖中的方法hideShowFrame，修改Index視圖中frameset的 cols屬性，從而控制界面的展示。

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="zh">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <style type="text/css">
        html, body
        {
            margin: 0px;
            font-family: Arial, Sans-Serif; /*font-size: 62.5%;*/
            font-size: 12px;
            height: 100%;
            padding: 2px 4px 4px 0px;
            overflow: hidden;
        }
    </style>
    <style type="text/css">
        .sidebar
        {
            width: 5px;
            height: 500px;
        }
            .sidebar .btn
            {
                width: 5px;
                height: 39px;
                background: url(/images/sidebar-on.gif);
                margin-top: 200px;
            }

                .sidebar .btn:hover
                {
                    background-position: 0 -39px;
                }

        .fleft
        {
            float: left;
        }
    </style>
    <script src="~/Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#divFolding").click(
                function () { self.parent.hideShowFrame(); }
                );
        });
    </script>

</head>
<body>
    <div class="sidebar fleft">
        <div class="btn" id="divFolding"></div>
    </div>
    <div class="rightcont">
        hello，world
    </div>
</body>
</html>

2、修改Index視圖，添加如下js：

    //折疊展開面板
        function hideShowFrame() {
            if (document.getElementById("middenFram").cols == "193,*") {
                document.getElementById("middenFram").cols = "0,*";
            }
            else {
                document.getElementById("middenFram").cols = "193,*"
            }
        }

我們看下Index視圖的主體部分：

<frameset rows="104,*,30" cols="*" frameborder="no" border="0" framespacing="0">@*頂部發104px，底部30px，中間部分自適應*@
  <frame src="Home/Top" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <frameset cols="193,*" frameborder="no" border="0" framespacing="0" id="middenFram">@*左側193px，右側自適應*@
    <frame src="Home/Left" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame"/>
    <frame src="Home/Right" name="mainFrame" id="mainFrame" title="mainFrame" />
  </frameset>
  <frame src="/Content/Bootom.html" name="topFrame" scrolling="No" noresize="noresize" id="bootomFrame" title="topFrame" />
</frameset>

3、F5運行，看效果。

框架中用到的js和css：CssJsImg源碼

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

ASP.NET MVC搭建項目后台UI框架—3、面板折疊和展開

目錄

開始操作

免責聲明！