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

巴特西

EasyMvc入门教程-基本控件说明（11）菜单导航

最新文章

热门文章