基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理


Posted in Javascript onMay 12, 2016

大家对Bootstrap框架知识了解多少

Bootstrap是一个前端的技术框架,很多平台都可以采用,JAVA/PHP/.NET都可以用来做前端界面,整合JQuery可以实现非常丰富的界面效果,目前也有很多Bootstrap的插件能够提供给大家使用,但是在国内很多基于Bootstrap的介绍很多还是停留在教学的基础上,介绍Bootstrap的各种基础知识和简单的使用;本文希望以基于C#的MVC实际项目的基础上,对Bootstrap开发框架进行全面的案例介绍,以实际项目的代码和效果截图进行讲解,力求详尽、直观为大家介绍这方面的经验和心得。

1、基于Metronic的Bootstrap开发框架总览

Metronic是一个国外的基于HTML、JS等技术的Bootstrap开发框架整合,整合了很多Bootstrap的前端技术和插件的使用,是一个非常不错的技术框架。本文以这个为基础,结合我对MVC的Web框架的研究,整合了基于MVC的Bootstrap开发框架,使之能够符合实际项目的结构需要的实际项目。

以下是我整体性项目的总的效果图。

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

启动菜单区的内容,动态从数据库里面获取,系统顶栏放置一些信息展示,以及提供用户对个人数据快速处理,如查看个人信息、注销、锁屏等操作,内容区域则主要是可视化展示的数据,可以通过树列表控件、表格控件进行展示,一般数据还有增删改查、以及分页的需要,因此需要整合各种功能的处理。另外,用户的数据,除了查询展示外,还需要有导入、导出等相关操作,这些是常规性的数据处理功能。确定好这些规则和界面效果后,我们可以通过代码生成工具进行生成,快速生成这些Web项目的界面效果了。

2、Bootstrap开发框架菜单展示

整个框架涉及了很多内容,包括常规Bootstrap的各种CSS特性的使用,以及菜单栏、Bootstrap图标管理、系统顶栏、树形控件JSTree、Portlet容器、Modal对话框、Tab控件、、下拉列表Select2、复选框iCheck、多文本编辑控件summernote、文件及图片上传展示fileinput、提示控件bootstrap-toastr和sweetalert、数值调整控件touchspin、视频播放展示控件video-player等等,这些特性在整体性的解决方案里面都有设计,集合这些优秀的插件,能够为我们的框架提供更强大的功能和丰富的界面体验。

本节继续回到框架的开始部分,菜单的处理和展示。一般为了管理方便,菜单分为三级,选中的菜单和别的菜单样式有所区分,菜单可以折叠最小化,效果如下所示。

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

在Bootstrap,构建菜单是一个相对比较容易的事情,主要是利用了UL和LI,通过样式的处理,就可以实现了菜单的布局设置了,代码如下所示。

<ul class="page-sidebar-menu page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
          <li class="start" id="1">
            <a href="/Home/index">
              <i class="icon-home"></i>
              <span class="title">首页</span>
              <span class="selected"></span>
              <span class="arrow open"></span>
            </a>
          </li>
          <li id="2">
            <a href="javascript:;">
              <i class="icon-basket"></i>
              <span class="title">行业动态</span>
              <span class="selected"></span>
              <span class="arrow open"></span>
            </a>
            <ul class="sub-menu">
              <li class="heading" style="font-size:14px;color:yellow">
                <i class="icon-home"></i>
                行业动态
              </li>
              <li>
                <a href="#">
                  <i class="icon-home"></i>
                  <span class="badge badge-danger">4</span>
                  政策法规
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon-basket"></i>
                  <span class="badge badge-warning">4</span>
                  通知公告
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon-tag"></i>
                  <span class="badge badge-success">4</span>
                  动态信息
                </a>
              </li>
            </ul>
          </li>
        </ul>

但是,我们一般的菜单是动态变化的,也就是需要从数据库里面获取,并设置到前端显示,这样我们就需要在MVC的控制器里面,输出菜单的内容,然后绑定到前端的界面上,实现菜单数据的动态化,同时这也是权限控制的基础处理。

在基类里面,我们可以在用户登陆后,获取菜单的数据放到ViewBag对象里面。

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

具体代码如下所示,先判断用户是否登陆,如果登陆,则获取用户的菜单数据,存在ViewBag里面待用。

/// <summary>
    /// 重写基类在Action执行之前的处理
    /// </summary>
    /// <param name="filterContext">重写方法的参数</param>
    protected override void OnActionExecuting(ActionExecutingContext filterContext)
    {
      base.OnActionExecuting(filterContext);
      //得到用户登录的信息
      CurrentUser = Session["UserInfo"] as UserInfo;
      if (CurrentUser == null)
      {
        Response.Redirect("/Login/Index");//如果用户为空跳转到登录界面
      }
      else
      {
        //设置授权属性,然后赋值给ViewBag保存
        ConvertAuthorizedInfo();
        ViewBag.AuthorizeKey = AuthorizeKey;
        //登录信息统一设置
        ViewBag.FullName = CurrentUser.FullName;
        ViewBag.Name = CurrentUser.Name;
        ViewBag.MenuString = GetMenuString();
        //ViewBag.MenuString = GetMenuStringCache(); //使用缓存,隔一段时间更新
      }
    }

其中,GetMenuString函数就是对菜单的组装处理。数据库中菜单的信息是一个树形结构,如下所示。

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

我们可以根据数据库的菜单信息,构建一部分界面用到的HTML代码。

#region 定义的格式模板
      // javascript:;
      // {0}?tid={1}
      var firstTemplate = @"
      <li id='{3}'>
        <a href='{0}'>
          <i class='{1}'></i>
          <span class='title'>{2}</span>
          <span class='selected'></span>
          <span class='arrow open'></span>
        </a>";
      var secondTemplate = @"
        <li class='heading' style='font-size:14px;color:yellow'>
          <i class='{0}'></i>
          {1}
        </li>";
      var thirdTemplate = @"
        <li id='{3}'>
          <a href='{0}'>
            <i class='{1}'></i>
            {2}
          </a>
        </li>";
      var firstTemplateEnd = "</li>";
      var secondTemplateStart = "<ul class='sub-menu'>";
      var secondTemplateEnd = "</ul>"; 
      #endregion

例如三级菜单就可以通过代码进行生成。

//三级
            icon = subNodeInfo.WebIcon;
            //tid 为顶级分类id,sid 为第三级菜单id
            tmpUrl = string.Format("{0}{1}tid={2}&sid={3}", subNodeInfo.Url, GetUrlJoiner(subNodeInfo.Url), info.ID, subNodeInfo.ID);
            url = (!string.IsNullOrEmpty(subNodeInfo.Url) && subNodeInfo.Url.Trim() != "#") ? tmpUrl : "javascript:;";
            sb = sb.AppendFormat(thirdTemplate, url, icon, subNodeInfo.Name, subNodeInfo.ID);

当然,如果想提高并发量,可以减少菜单的频繁检索,把这部分数据放到MemeryCache里面,如下处理即可。

public string GetMenuStringCache()
    {
      string itemValue = MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache", delegate()
        {
          return GetMenuString();
        },
        null, DateTime.Now.AddMinutes(5) //5分钟以后过期,重新获取
      );
      return itemValue;
    }

3、布局页面的使用

同时,我们为了提高页面的重用,一般情况下,是把每个页面相同部分的内容抽离出来,放到总的布局页面上,这样处理内容区域外,其他部分全部是继承自布局视图页面的内容了,我们的动态菜单部分,也是在布局视图里面的一部分内容。

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

上图的_Layout.cshtml就是基于C#的MVC总的布局视图页面。这样,我们在这个页面里面,设定了菜单的展示内容,以及留出主页面内容的部分,以及脚本的部分展示,就可以了。

菜单的展示代码如下所示:

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

布局页面留出的页面展示Section如下所示。

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

由于Bootstrap一般把JS文件放到最后加载,因此我们在布局页面保留部分必备的Jquery等脚本外,还需要把脚本部分内容放到页面底部进行加载,并且我们脚本加载可以利用MVC的Bundles技术进行压缩整合处理。关于这方面技术,可以参考我之前的文章介绍《基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码》。

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

这样,我们在各个子页面的视图里面,引入布局视图页面后,只需要编写个性化展示内容的部分即可,具体代码如下所示。

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

然后在页面底部,包含所需部分的脚本代码即可,这样在页面生成后,就会依据布局页面设置好的顺序块,进行合理的展示,并且是把所有部分内容进行整合了。

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

4、页面编辑工具Sublime Text的使用

我前面截图,很多是VS环境里面的,不过一般我们编辑视图页面的时候,都是采用Sublime Text这个强大的编辑工具的,丰富的插件、智能语法提示等,会让你用了之后爱不释手,是编辑视图页面非常快速的利器,强烈推荐使用。

VS一般我们用来做文件管理,以及编译等处理就可以了。

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

以上内容是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理的相关知识,希望对大家有所帮助,如果大家想了解更多资讯敬请关注三水点靠木网站!

Javascript 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
js跑步算法的实现代码
Dec 04 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 #Javascript
Bootstrap3制作图片轮播效果
May 12 #Javascript
JS创建事件的三种方法(实例代码)
May 12 #Javascript
jQuery判断checkbox选中状态
May 12 #Javascript
Bootstrap3制作自己的导航栏
May 12 #Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 #Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 #Javascript
You might like
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
Python获取linux主机ip的简单实现方法
2016/04/18 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
python实现大学人员管理系统
2019/10/25 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
市场部管理制度
2014/02/02 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书