MVC搭建项目后台UI框架威尼斯人6799.com

目录

  1. ASP.NET
    MVC搭建项目后台UI框架—1、后台主框架
  2. ASP.NET
    MVC搭建项目后台UI框架—2、菜单特效
  3. ASP.NET
    MVC搭建项目后台UI框架—3、面板折叠和实行
  4. ASP.NET
    MVC搭建项目后台UI框架—4、tab多页签帮助
  5. ASP.NET
    MVC搭建项目后台UI框架—5、德姆o演示Controller和View的交互
  6. ASP.NET
    MVC搭建项目后台UI框架—6、客户管理(加多、修改、查询、分页)
  7. ASP.NET
    MVC搭建项目后台UI框架—7、总结报表
  8. ASP.NET
    MVC搭建项目后台UI框架—8、将View中甄选的数目行中的部分数据传入到Controller中
  9. ASP.NET
    MVC搭建项目后台UI框架—9、服务器端排序

在点击左侧菜单中的选项时,小编盼望有Extjs、EasyUI等中近乎的tab页签成效,因为那样能够支撑三个页面包车型地铁浏览,不经常候大家大概要求同时开荒多个页面,假设不选拔页签,那么每便要翻开有些页面都要去重新调用并刷新,假设在网速慢或许该分界面加载很耗费时间的情况下,简直会让人奔溃。因为自己又不想引进整个ExtJs等的内容。束手就禽的,就想开了去互连网找这种ui插件。找到了许多,可是小编觉着CleverTabs相比相符自个儿这一个类型。效果如下:

威尼斯人6799.com 1

目录

  1. ASP.NET
    MVC搭建项目后台UI框架—1、后台主框架
  2. ASP.NET
    MVC搭建项目后台UI框架—2、菜单特效
  3. ASP.NET
    MVC搭建项目后台UI框架—3、面板折叠和拓展
  4. 威尼斯人6799.com,ASP.NET
    MVC搭建项目后台UI框架—4、tab多页签援助
  5. ASP.NET
    MVC搭建项目后台UI框架—5、德姆o演示Controller和View的互相
  6. ASP.NET
    MVC搭建项目后台UI框架—6、客户保管(加多、修改、查询、分页)
  7. ASP.NET
    MVC搭建项目后台UI框架—7、总括报表
  8. ASP.NET
    MVC搭建项目后台UI框架—8、将View中甄选的多寡行中的片段数据传入到Controller中
  9. ASP.NET
    MVC搭建项目后台UI框架—9、服务器端排序

上一节早已加多好了菜单特效,这一节,我们来增加面板的折叠和展开功用,效果图如下:

威尼斯人6799.com 2威尼斯人6799.com 3

思路:自个儿在Right视图中增多了叁个div,在这么些div中存放一张图片,通过对那张图纸的点击,来调整Left视图的潜伏和呈现。说白了,这里其实正是修改主框架Index视图中frameset的
cols属性。

目录

  1. ASP.NET
    MVC搭建项目后台UI框架—1、后台主框架
  2. ASP.NET
    MVC搭建项目后台UI框架—2、菜单特效
  3. ASP.NET
    MVC搭建项目后台UI框架—3、面板折叠和拓展
  4. ASP.NET
    MVC搭建项目后台UI框架—4、tab多页签支持
  5. ASP.NET
    MVC搭建项目后台UI框架—5、德姆o演示Controller和View的相互
  6. ASP.NET
    MVC搭建项目后台UI框架—6、客户管理(加多、修改、查询、分页)
  7. ASP.NET
    MVC搭建项目后台UI框架—7、总结报表
  8. ASP.NET
    MVC搭建项目后台UI框架—8、将View中选取的数据行中的一对数据传入到Controller中
  9. ASP.NET
    MVC搭建项目后台UI框架—9、服务器端排序

上一篇,已经把方方面面项目标层面给搭建好了,可是还不曾别的js效果落实。这一节,我就来讲下有关菜单的特效完结。笔者供给的功力如下:

威尼斯人6799.com 4威尼斯人6799.com 5威尼斯人6799.com 6威尼斯人6799.com 7

须求总括:

  • 点击最上端菜单模块,左边显示分化模块上边包车型地铁菜单列表
  • 点击左侧菜单选项,展开上边包车型大巴子菜单,并折叠其余菜单模块,菜单Logo折叠呈现为+,张开彰显为-。

1、先看下Top视图中代码:

威尼斯人6799.com 8威尼斯人6799.com 9

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta charset="utf-8" />
    <link href="~/Content/sharestyle.css" rel="stylesheet" />
    <style type="text/css">
        .hightCss
        {
            color: yellow;
        }
        body
        {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div class="index_header">
        <div class="index_headertop">
            <div class="index_logo"><a href="#">
                <img src="index_logo.png"></a></div>
            <div class="lgstatus">
                欢迎您,@ViewBag.UserName<i><em>20</em></i>可用余额:¥@ViewBag.AvailableBalance&nbsp;&nbsp;&nbsp;
      <input type="submit" value="在线充值" class="btsty2">
            </div>
        </div>
        <div class="clear"></div>
        <div class="index_headerbot">
            <div class="nav_list">
                <ul>
                    <li><a href="#">业务管理</a>
                        <div class="nav_out" style="display: none;">
                            <i></i>
                            <p><a href="#">订单管理</a></p>
                            <p><a href="#">提单管理</a></p>
                            <p><a href="#">身份证管理</a></p>
                        </div>
                    </li>
                    <li class="slctd"><a href="#">财务管理</a>
                        <div class="nav_out" style="display: none;">
                            <i></i>
                            <p><a href="#">财务流水</a></p>
                            <p><a href="#">提单对账</a></p>
                            <p><a href="#">运单对账</a></p>
                            <p><a href="#">异常费用对账</a></p>
                            <p><a href="#">充值记录</a></p>
                        </div>
                    </li>
                    <li><a href="#">系统管理</a>
                        <div class="nav_out" style="display: none;">
                            <i></i>
                            <p><a href="#">基本信息管理</a></p>
                            <p><a href="#">认证管理</a></p>
                            <p><a href="#">修改密码</a></p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="fucnbx"><a href="#"><i class="ilChannel"></i>运单打印客户端下载</a> <a href="#"><i class="i2"></i>API文档</a> <a href="#"><i class="i3"></i>退出</a> </div>
        </div>
    </div>
</body>
</html>

View Code

2、在Top视图的head中加多如下js:

    <script src="~/Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
       //控制Left视图中菜单模块的显示
        function showLeftList(divId) {
            self.parent.frames["leftFrame"].showDivMenu(divId);
        }
        //菜单点击高亮显示
        $(function () {
            $(".nav_list ul li a").click(function () {
                //$(".nav_list ul li a").css("color", "#ceebff");
                //$(this).css("color", "yellow");
                $(".nav_list ul li a").css("background-color", "");
                $(".nav_list ul li a").css("color", "#ceebff");
                $(this).css("background-color", "#66d354");
                $(this).css("color", "white");
            });
        });
    </script>

3、在Top视图中,菜单项增多js方法showLeftList,这么些艺术中传播了三个参数,这么些参数正是Left视图中菜单层的id。

 <li><a href="#" onclick="showLeftList('divOrder')">业务管理</a>
 <li class="slctd"><a href="#" onclick="showLeftList('divFinancial')">财务管理</a>
 <li><a href="#" onclick="showLeftList('divSysManage')">系统管理</a>

4、查看Left视图代码,注意id的命名,因为那提到到js的调用:

威尼斯人6799.com 10威尼斯人6799.com 11

<body>
 <div class="leftbar" id="divOrder">
  <dl>
    <dt class="head2" id="dt_ulOrder" onclick='ShowMenuList("ulOrder")'>订单管理</dt>
    <ul class="box_n" id="ulOrder">
      <li><a href="#">批量新建订单</a></li>
      <li><a href="#">手工新建订单</a></li>
      <li><a class="nav_sub" href="#">订单草稿(3)</a></li>
      <li><a href="#">已确认订单(3)</a></li>
      <li><a href="#">待发货订单(3)</a></li>
      <li><a href="#">已发货订单(0)</a></li>
      <li><a href="#">订单回收站(0)</a></li>
      <li><a href="#">退件(0)</a></li>
      <li><a href="#">批量修改订单</a></li>
    </ul>
  </dl>
  <dl>
    <dt class="head1" id="dt_ulLading" onclick='ShowMenuList("ulLading")'>提单管理</dt>
    <ul class="box_n" id="ulLading" style="display:none;" >
      <li><a href="#">创建托盘</a></li>
      <li><a href="#">未交货托盘(6)</a></li>
      <li><a href="#">已交货托盘</a></li>
      <li><a href="#">创建交货单</a></li>
      <li><a href="#">交货单列表</a></li>
      <li><a href="#">待预扣提单(3)</a></li>
      <li><a href="#">已预扣提单</a></li>
    </ul>
  </dl>
  <dl>
    <dt class="head1" id="dt_ulIdentityCard" onclick='ShowMenuList("ulIdentityCard")'>身份证管理</dt>
    <ul class="box_n" id="ulIdentityCard" style="display:none;" >
      <li><a href="#">待验证身份证(3)</a></li>
      <li><a href="#">无需验证身份证(3)</a></li>
      <li><a href="#">已验证身份证(3)</a></li>
    </ul>
  </dl>
</div>
 <div class="leftbar" id="divSysManage"></div>
     <div class="leftbar" id="divFinancial">
        <dl>
            <dt id="dt_ulChannel" class="head2" onclick='ShowMenuList("ulChannel")'>渠道费用管理</dt>
            <ul class="box_n" id="ulChannel">
                <li><a href="#" onclick="goNewPage('a.html','渠道分类');">渠道分类</a></li>
                <li><a target="mainFrame" id="channelManage" onclick="goNewPage('/Channel/Index','渠道管理');">渠道管理</a></li>
                <li><a href="#">分区管理</a></li>
                <li><a href="#">价格管理</a></li>
            </ul>
        </dl>
        <dl>
            <dt id="dt_ulFinancial" class="head1" onclick='ShowMenuList("ulFinancial")'>财务管理</dt>
            <ul class="box_n" id="ulFinancial" style="display: none;">
                <li><a href="#">财务流水</a></li>
                <li><a href="#">提单对账</a></li>
                <li><a href="#">运单对账</a></li>
                <li><a href="#">异常费用对账</a></li>
                <li><a href="#">充值记录</a></li>
            </ul>
        </dl>
    </div>
</body>

View Code

5、Left视图中head部分增加如下js:

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        //显示菜单下面的选项
        function ShowMenuList(id) {
            var objectobj = document.getElementById(id);
            var dtObj = document.getElementById("dt_" + id);
            if (objectobj.style.display == "none") {
                objectobj.style.display = "";
                dtObj.setAttribute("class", "head2");
                //其它菜单折叠
                $(dtObj).parent().parent().find("dt").not(dtObj).attr("class", "head1"); //折叠
                $(objectobj).parent().parent().find("ul").not(objectobj).css("display", "none"); //隐藏菜单子项
            }
            else {
                objectobj.style.display = "none";
                dtObj.setAttribute("class", "head1");
            }
        }
        //控制菜单模块的显示和隐藏
        function showDivMenu(divId) {
            $("#" + divId).css("visibility", "visible");
            $("#" + divId).siblings("div").css("visibility", "hidden");
        }
        $(function () {
            $(".box_n li a").click(function () {
                $(".box_n li a").removeClass("nav_sub");
                $(this).addClass("nav_sub");
            });
        });
        function goNewPage(url,name) {
            self.parent.frames["mainFrame"].addTab(url,name);
        }
    </script>

 至此,菜单特效,大家就曾经增加上去了,你能够按F5运作看下效果。

框架中用到的js和css:CssJsImg源码

Action

1、修改Right视图,增加如下js引用:

    <link href="~/Lib/CleverTabs/context/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.3.min.js"></script>
    <script src="~/Lib/CleverTabs/scripts/jquery-ui.js"></script>
    <script src="~/Lib/CleverTabs/scripts/jquery.cleverTabs.js"></script>
    <script src="~/Lib/CleverTabs/scripts/jquery.contextMenu.js"></script>

2、添加js方法:

   <script type="text/javascript">
           var tabs;
           $(function () {
               var h = $(document).height()-35;
               $("#tabs").height(h); //关于这里我要说明一下,如果不设置高度的话,它默认并不是发100%占满屏幕的,所以我这里使用了计算的方式,初始化界面高度
               tabs = $('#tabs').cleverTabs();
               $(window).bind('resize', function () {
                   tabs.resizePanelContainer();
               });

               tabs.add({
                   url: 'http://www.cnblogs.com/jiekzou/',
                   label: '我的博客',
                   //开启Tab后是否锁定(不允许关闭,默认: false)
                   lock: false
               });
               $('input[type="button"]').button();

           });
           function addTab(url,name) {
               tabs.add({
                   url: url,
                   label: name
               });
           }</script>

3、修改Right视图中body主体:

<body>
     <div class="sidebar fleft"><div class="btn" id="divFolding"></div></div>
    <div id="tabs" style="overflow:hidden; padding-top:0px; height:400px;">
        <ul>
        </ul>
    </div>
    </body>

4、在Left视图中,增多如下js方法:Left中的菜单点击时调用Right视图中的加多页签方法addTab

        function goNewPage(url,name) {
            self.parent.frames["mainFrame"].addTab(url,name);
        }

修改Left视图中菜单的调用方法

  <li><a target=”mainFrame” id=”channelManage”
onclick=”goNewPage(‘/Channel/Index’,’路子管理’);”>门路管理</a></li>

5、F5运转,你将见到如下效果:

威尼斯人6799.com 12

框架中用到的js和css、Img:CssJsImg源码

千帆竞发操作

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(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源码

相关文章