EasyMvc入门教程-基本控件说明(11)菜单导航
2018-01-17 15:49
239 查看
基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的?
似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码:
怎么样,是不是还是一如既往的简单?准备数据,调用EasyMvc的Menu控件。。
不过,有点细节需要交代下:大家注意到Id和ParentId没:如果是一级菜单,ParentId是不需要赋值的;对于二级菜单,那么就需要将一级菜单的某个Id值赋给二级菜单的ParentId了,详见上面代码的ParentId赋值情况。
继续往下讲,我们可以给菜单加上图标,以提供些档次,上代码:
效果截图如下:
大家看到没:菜单和按钮运用图标的方法是不是一样的?:)
考虑到很多时候存在竖直方向的菜单,EasyMvc也提供了如下风格的菜单,请查看:
竖直菜单
效果图:
实现代码如下:
左侧边菜单
效果图:
代码实现如下:
总结:菜单导航和图片轮播导航基本是前端网站开发必备的,对了还有一个叫Banner的,基本这三个完成后,前端网页就搞定了一大半(不好意思,说的是中小型网站。。)希望后续这些都能帮到大家。
更多使用示例请浏览在线示例:http://core.zwc.cn
似乎是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入门教程-基本控件说明(8)提醒导航
- EasyMvc入门教程-基本控件说明(13)选项卡导航
- EasyMvc入门教程-基本控件说明(10)图片轮播导航
- EasyMvc入门教程-基本控件说明(7)文字块导航
- EasyMvc入门教程-基本控件说明(9)引言导航
- EasyMvc入门教程-基本控件说明(12)栏目导航
- EasyMvc入门教程-基本控件说明(6)进度条
- EasyMvc入门教程-基本控件说明(1)按钮
- EasyMvc入门教程-基本控件说明(4)折叠面板
- EasyMvc入门教程-基本控件说明(2)定时器
- EasyMvc入门教程-基本控件说明(5)小图标
- EasyMvc入门教程-基本控件说明(3)时间线
- EasyMvc入门教程-高级控件说明(15)方位布局控件
- EasyMvc入门教程-高级控件说明(19)表单控件
- EasyMvc入门教程-高级控件说明(14)列布局控件
- EasyMvc入门教程-高级控件说明(20)表格控件
- EasyMvc入门教程-图形控件说明(21)线形图+柱状图+饼形图
- EasyMvc入门教程-高级控件说明(16)信息框控件
- EasyMvc入门教程-高级控件说明(17)对话框控件
- EasyMvc入门教程-高级控件说明(18)弹出框控件