zoukankan      html  css  js  c++  java
  • EasyMvc入门教程基本控件说明(11)菜单导航

    基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的?

    似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码:

    @{
        var data = new List<MenuItem>()
        {
            new MenuItem() {Id = "1", Text = "主页", Url = "http://zwc.cn"},
            new MenuItem() {Id = "2", Text = "文章管理"},
            new MenuItem() {Id = "3", ParentId = "2", Text = "文章删除"}
        };
    }
    <br><br><br>
    @Html.Q().Menu().SourceItems(data)
    

      怎么样,是不是还是一如既往的简单?准备数据,调用EasyMvc的Menu控件。。

    不过,有点细节需要交代下:大家注意到Id和ParentId没:如果是一级菜单,ParentId是不需要赋值的;对于二级菜单,那么就需要将一级菜单的某个Id值赋给二级菜单的ParentId了,详见上面代码的ParentId赋值情况。

    继续往下讲,我们可以给菜单加上图标,以提供些档次,上代码:

    @{
        var data = new List<MenuItem>()
        {
            new MenuItem() {Id = "1", Text = Html.Q().Ico().Type(EasyMvcHelper.IcoType.Home).ColorGray() + "主页", Url = "http://zwc.cn"},
            new MenuItem() {Id = "2", Text =  Html.Q().Ico().Type(EasyMvcHelper.IcoType.Document).ColorGray() + "文章管理"},
            new MenuItem() {Id = "3", ParentId = "2", Text =Html.Q().Ico().Type(EasyMvcHelper.IcoType.Del1).ColorPrimary() +  "文章删除"}
        };
    }
    <br><br><br>
    @Html.Q().Menu().SourceItems(data)
    

      效果截图如下:

    大家看到没:菜单和按钮运用图标的方法是不是一样的?:)

    考虑到很多时候存在竖直方向的菜单,EasyMvc也提供了如下风格的菜单,请查看:

    • 竖直菜单

    效果图:

    实现代码如下:

    @{
        var data = new List<MenuItem>()
        {
            new MenuItem() {Id = "1", Text = "主页", Url = "http://zwc.cn"},
            new MenuItem() {Id = "2", Text = "文章管理"},
            new MenuItem() {Id = "3", ParentId = "2", Text = "文章删除"}
        };
    }
    <br><br><br>
    @Html.Q().Menu().SourceItems(data).AsVerticalSide()
    

      

    • 左侧边菜单

    效果图:

    代码实现如下:

    @{
        var data = new List<MenuItem>()
        {
            new MenuItem() {Id = "1", Text = "主页", Url = "http://zwc.cn"},
            new MenuItem() {Id = "2", Text = "文章管理"},
            new MenuItem() {Id = "3", ParentId = "2", Text = "文章删除"}
        };
    }
    <br><br><br>
    @Html.Q().Menu().SourceItems(data).AsLeftSide()
    

      


    总结:菜单导航和图片轮播导航基本是前端网站开发必备的,对了还有一个叫Banner的,基本这三个完成后,前端网页就搞定了一大半(不好意思,说的是中小型网站。。)希望后续这些都能帮到大家。

    更多使用示例请浏览在线示例:http://core.zwc.cn

  • 相关阅读:
    阿里知识图谱首次曝光:每天千万级拦截量,亿级别全量智能审核
    LSTM简介以及数学推导(FULL BPTT)
    深度学习算法索引(持续更新)
    学界 | Yann LeCun新作,中日韩文本分类到底要用哪种编码?
    Android 常见内存泄漏的解决方式
    集成支付宝支付
    【4.29安恒杯】writeup
    sdut 3-7 类的友元函数的应用
    Linux下libsvm的安装及简单练习
    iOS 使用腾讯地图显示用户位置注意事项
  • 原文地址:https://www.cnblogs.com/chinasoft/p/8303317.html
Copyright © 2011-2022 走看看