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)菜单导航的更多相关文章
- EasyMvc入门教程-基本控件说明(8)提醒导航
提醒导航顾名思义就是提醒大家注意某些文字了..请看下面的例子: 实现代码如下: @Html.Q().BlockRemind().Text("我可以作为提醒使用") 有的同学会说:这 ...
- EasyMvc入门教程-基本控件说明(13)选项卡导航
选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...
- EasyMvc入门教程-图形控件说明(21)线形图+柱状图+饼形图
本章将介绍一些基本但常用的图形:线型图,柱状图和饼形图. 以上三种图形对于的数据都是键值对数组,请参考第一个例子: @{ var data = new List<LineItem>(); ...
- EasyMvc入门教程-基本控件说明(1)按钮
按钮是我们最常用的控件之一了,先看下我们提供的按钮风格: 不同颜色的: 实现代码: @Html.Q().Button().Text("Danger").ColorDanger() ...
- EasyMvc入门教程-基本控件说明(4)折叠面板
折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的: 把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子: @{ var data ...
- EasyMvc入门教程-基本控件说明(6)进度条
进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样..:) 进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子: @Html.Q().Progress().Value( ...
- EasyMvc入门教程-基本控件说明(12)栏目导航
栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<N ...
- EasyMvc入门教程-基本控件说明(9)引言导航
休息片刻后,继续开工... 这次我们继续学习引言导航,引言导航主要用于知识点的开始,起到知识点导航的作用.直接例子: 实现代码如下: @Html.Q().BlockRef().Title(" ...
- EasyMvc入门教程-基本控件说明(2)定时器
我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...
随机推荐
- python - web自动化测试 - 元素操作 - 等待
# -*- coding:utf-8 -*- ''' @project: web学习 @author: Jimmy @file: wait.py @ide: PyCharm Community Edi ...
- CentOS 7使用dnf安装Memcached以及启动、停止、开机启动等设置
1.安装Memcached dnf install memcached 根据提示完成安装 2.启动Memcached 输入以下命令: service memcached start 输出以下内容: R ...
- 编写高性能React组件-传值篇
很多人在写React组件的时候没有太在意React组件的性能,使得React做了很多不必要的render,现在我就说说该怎么来编写搞性能的React组件. 首先我们来看一下下面两个组件 import ...
- zookeeper 集群
集群步骤: 1.安装zookeeper 2.修改zookeeper配置文件 3.创建myid文件 安装zookeeper:查看安装步骤 修改zookeeper配置文件:在zoo.cfg中添加配置 se ...
- nyoj 题目20 吝啬的国度
吝啬的国度 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市, ...
- REDIS基础笔记
Redis基础笔记 资源链接 简介 简介 安装 五种数据类型及相应命令 1. 字符串类型 2. 散列类型 3. 列表类型 4. 集合类型 5. 有序集合 其他 事务 SORT 生存时间 任务队列 发布 ...
- Java给各个方法记录执行时间
Java给各个方法记录执行时间 long startTime = System.currentTimeMillis();...//要测试时间的方法LoggerFactory.getLogger(Bas ...
- sql server 韩文查询匹配失败
在SQL Server 中查询韩文信息时,没有匹配到对应的信息,检查程序后发现字段类型是nvarchar类型的没有问题, 打开存储过程后找到问题了:原来是拼接后的查询语句存储在一个varchar变量中 ...
- [SCOI2007][bzoj1070] 修车 [费用流]
题面 传送门 思路 我们考虑某个工人修车的从前到后序列如下: ${W_1,W_2,W_3,...,W_n}$ 那么,对于这n辆车的车主而言,他们等候的总时间为: $\sum_{i=1}^{n}W_i\ ...
- Linux系统——常见的系统调用
本文列出了大部分常见的Linux系统调用,并附有简要中文说明. 以下是Linux系统调用的一个列表,包含了大部分常用系统调用和由系统调用派生出的的函数.这可能是你在互联网上所能看到的唯一一篇中文注释的 ...