选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容。

先来一个基本的使用例子:代码如下:

@{
var data = new List<TabItem>()
{
new TabItem() {Title = "我是Tab 1", Text = "我是Tab 1的内容"},
new TabItem() {Title = "控件说明", Text = "控件的Text一般可以简单嵌入html"}
};
}
@Html.Q().Tab().SourceItems(data)

  效果截图如下:

我们同样为Tab导航准备了几种风格,看下面的例子:

实现的代码如下:

@{
var data = new List<TabItem>()
{
new TabItem() {Title = "我是Tab 1", Text = "我是Tab 1的内容"},
new TabItem() {Title = "控件说明", Text = "控件的Text一般可以简单嵌入html"}
};
}
@Html.Q().Tab().SourceItems(data)
@Html.Q().Tab().SourceItems(data).AsSimpleTab()
@Html.Q().Tab().SourceItems(data).AsCardTab()

  本着简单的原则,基本上使用选项卡导航不需要太多的前端知识了。:)


总结:选项卡导航的使用就简单介绍到这里,基本控件的使用至此就告一段落,后续将会是高级控件。

当然了,高级控件更多的是强调数据的交互性,难度嘛,相信我:EasyMvc还是会一如既往的保持简单。。。不够简单就改。。。

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

EasyMvc入门教程-基本控件说明(13)选项卡导航的更多相关文章

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

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

  2. EasyMvc入门教程-基本控件说明(11)菜单导航

    基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的? 似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码: @{ var data = new List<Men ...

  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. jquery实现轮播插件

    这几天用jquery写了两个轮播的插件,功能很简单.第一次尝试写插件,有很多不足的地方,代码如下: 注:图片链接请替换掉,配置信息必须加上图片width和height. <!DOCTYPE ht ...

  2. Leetcode 558.四叉树交集

    四叉树交集 四叉树是一种树数据,其中每个结点恰好有四个子结点:topLeft.topRight.bottomLeft 和 bottomRight.四叉树通常被用来划分一个二维空间,递归地将其细分为四个 ...

  3. 单元测试如何保证了易用的API

    一般而言TDD的好处是以输出为导向及早发现问题,以及方便重构(单元测试保证).我理解,还有一个比较重要的意义是: 客观上强制了程序员写出更加友好的接口 方便测试和联调. 问题 这里我以c++举例,需求 ...

  4. 【译】从现有的容器里创建新的Docker镜像

    如果你修改了一个容器的内容,你可以使用docker commit命令将现有的容器状态保存为一个镜像. 下面的例子展示了如何修改一个基于oraclelinux:6.6的容器使得其能够运行Apache H ...

  5. w3wp.exe占用cpu特别高

    w3wp.exe占用cpu特别高,百度了一下在任务管理器标记出PID可以看到进程号. 试了一下,发现一个xxx网站占用cpu特别高,然后就结束了下进程,再重启网站cpu一下子降下来. 很奇怪,还需要具 ...

  6. 第二篇:python基础_2

    本篇内容 数字 字符串 元祖 字典 列表 集合 for循环 二进制 字符编码 文件处理 一.数字 1.int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2 ...

  7. 【bzoj2406】矩阵 二分+有上下界可行流

    题目描述 输入 第一行两个数n.m,表示矩阵的大小. 接下来n行,每行m列,描述矩阵A. 最后一行两个数L,R. 输出 第一行,输出最小的答案: 样例输入 2 2 0 1 2 1 0 1 样例输出 1 ...

  8. chrome浏览器无法安装非应用商店插件的解决办法

    不久前,安装了一个非chrome应用商店的第三方应用,今天突然发现无法使用,打开chrome的扩展程序后,发现该插件以及被禁用,在网上查找了解决方法,设置“开发者模式”,修改了chrome的参数,仍然 ...

  9. Mail.Ru Cup 2018 Round 2 Problem C Lucky Days

    设在第 $x$ 天二人都 lucky,则有 $\DeclareMathOperator{\lcm}{lcm}$ $ x = y_a t_a + R_a $ $ x= y_b t_ b + R_b$ 约 ...

  10. nginx问题

    1.杀死nginx之后,找不到pid http://bbs.pxecn.com/thread-122116-1-1.html