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

似乎是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)菜单导航的更多相关文章

  1. EasyMvc入门教程-基本控件说明(8)提醒导航

    提醒导航顾名思义就是提醒大家注意某些文字了..请看下面的例子: 实现代码如下: @Html.Q().BlockRemind().Text("我可以作为提醒使用") 有的同学会说:这 ...

  2. EasyMvc入门教程-基本控件说明(13)选项卡导航

    选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...

  3. EasyMvc入门教程-图形控件说明(21)线形图+柱状图+饼形图

    本章将介绍一些基本但常用的图形:线型图,柱状图和饼形图. 以上三种图形对于的数据都是键值对数组,请参考第一个例子: @{ var data = new List<LineItem>(); ...

  4. EasyMvc入门教程-基本控件说明(1)按钮

    按钮是我们最常用的控件之一了,先看下我们提供的按钮风格: 不同颜色的: 实现代码: @Html.Q().Button().Text("Danger").ColorDanger() ...

  5. EasyMvc入门教程-基本控件说明(4)折叠面板

    折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的: 把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子: @{ var data ...

  6. EasyMvc入门教程-基本控件说明(6)进度条

    进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样..:) 进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子: @Html.Q().Progress().Value( ...

  7. EasyMvc入门教程-基本控件说明(12)栏目导航

    栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<N ...

  8. EasyMvc入门教程-基本控件说明(9)引言导航

    休息片刻后,继续开工... 这次我们继续学习引言导航,引言导航主要用于知识点的开始,起到知识点导航的作用.直接例子: 实现代码如下: @Html.Q().BlockRef().Title(" ...

  9. EasyMvc入门教程-基本控件说明(2)定时器

    我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...

随机推荐

  1. python - web自动化测试 - 元素操作 - 等待

    # -*- coding:utf-8 -*- ''' @project: web学习 @author: Jimmy @file: wait.py @ide: PyCharm Community Edi ...

  2. CentOS 7使用dnf安装Memcached以及启动、停止、开机启动等设置

    1.安装Memcached dnf install memcached 根据提示完成安装 2.启动Memcached 输入以下命令: service memcached start 输出以下内容: R ...

  3. 编写高性能React组件-传值篇

    很多人在写React组件的时候没有太在意React组件的性能,使得React做了很多不必要的render,现在我就说说该怎么来编写搞性能的React组件. 首先我们来看一下下面两个组件 import ...

  4. zookeeper 集群

    集群步骤: 1.安装zookeeper 2.修改zookeeper配置文件 3.创建myid文件 安装zookeeper:查看安装步骤 修改zookeeper配置文件:在zoo.cfg中添加配置 se ...

  5. nyoj 题目20 吝啬的国度

    吝啬的国度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市, ...

  6. REDIS基础笔记

    Redis基础笔记 资源链接 简介 简介 安装 五种数据类型及相应命令 1. 字符串类型 2. 散列类型 3. 列表类型 4. 集合类型 5. 有序集合 其他 事务 SORT 生存时间 任务队列 发布 ...

  7. Java给各个方法记录执行时间

    Java给各个方法记录执行时间 long startTime = System.currentTimeMillis();...//要测试时间的方法LoggerFactory.getLogger(Bas ...

  8. sql server 韩文查询匹配失败

    在SQL Server 中查询韩文信息时,没有匹配到对应的信息,检查程序后发现字段类型是nvarchar类型的没有问题, 打开存储过程后找到问题了:原来是拼接后的查询语句存储在一个varchar变量中 ...

  9. [SCOI2007][bzoj1070] 修车 [费用流]

    题面 传送门 思路 我们考虑某个工人修车的从前到后序列如下: ${W_1,W_2,W_3,...,W_n}$ 那么,对于这n辆车的车主而言,他们等候的总时间为: $\sum_{i=1}^{n}W_i\ ...

  10. Linux系统——常见的系统调用

    本文列出了大部分常见的Linux系统调用,并附有简要中文说明. 以下是Linux系统调用的一个列表,包含了大部分常用系统调用和由系统调用派生出的的函数.这可能是你在互联网上所能看到的唯一一篇中文注释的 ...