EF+MVC+Bootstrap 项目实践 Day8
继续完成首页
一、上方导航栏
把bootstrap的几个下拉按钮效果都试了一下,感觉还可以。
<div class="btn-group "> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> @CookieHelper.UserName<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">修改密码</a></li> <li><a href="#">退出系统</a></li> </ul> </div>
二、左侧菜单栏
源码效果:
具体菜单是循环取出的,可折叠。
1、复制一些固定的内容先把大体效果做出来
左侧菜单是固定的,不是按数据生成的。左边右边分别是float,可以随窗口大小变化。找不到bootstrap的布局调用方式,怎么没有像easyui那样,有个整体布局的写法
2、折叠效果
一开始用collapse,配合button感觉虽然比较美观,但应该还是用bootstrap自带的Accordion example示例这种折叠效果。
直接复制过来改一改
本想动态展现左侧菜单数据的,一时搞不懂,只好跳过先学其它的。
三、客户管理
先学这个页面是因为它有我想学的三个地方:查询、分页、表单,这三个都是非常关键的。先把基本框架搭起来
1、Enum对应
public enum EnumAgeGroup { [EnumTitle("无", IsDisplay = false)] None = 0, [EnumTitle("30以下")] Below30 = 1, [EnumTitle("31-35")] From31To35 = 2, [EnumTitle("36-40")] From36To40 = 3, [EnumTitle("41-45")] From41To45 = 4, [EnumTitle("46-50")] From46To50 = 5, [EnumTitle("50以上")] Above50 = 6 } /// <summary> /// 客户类型 /// </summary> public enum EnumCategory { [EnumTitle("无", IsDisplay = false)] None = 0, [EnumTitle("单身")] Single = 1, [EnumTitle("已婚无小孩")] Married = 2, [EnumTitle("已婚有小孩")] MarriedButChild = 3, [EnumTitle("三代同堂")] ExtendedFamily = 4, [EnumTitle("其他结构")] Others = 5 }
参照源码,使用一些Enum进行对应,另有EnumHelp公共类进行封装
2、相应文件创建
@Html.ActionLink("客户管理", "Index", new {Area = "Crm", Controller = "Customer"})
一句跳转页面折腾了半小时。。。
3、菜单导航
<div class="container-fluid"> <div class="span12" id="navigation"> <h4 class="page-title"> <span>标题</span> <small>介绍</small> </h4> <ul class="breadcrumb"> <li> <i class="icon-home"></i> <span>首页</span> <i class="icon-angle-right"></i> </li> <li> <span>菜单组</span> <i class="icon-angle-right"></i> </li> <li><span>菜单</span></li> </ul> </div> @RenderBody() </div>
源码中菜单导航复制过来就是得到默认的示例值,不知在哪修改成相应的具体点击菜单?
====================
通过关键字查找,原来有个js,处理左侧菜单的点击,把相应的路径取出来显示
另也封装了全选、删除、主题色