选项卡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. Leetcode 553.最优除法

    最优除法 给定一组正整数,相邻的整数之间将会进行浮点除法操作.例如, [2,3,4] -> 2 / 3 / 4 . 但是,你可以在任意位置添加任意数目的括号,来改变算数的优先级.你需要找出怎么添 ...

  2. Flask-WebSocket案例

    实验1:实现初始的通信 客户端:用浏览器向服务端发送信息 服务端:首先接收浏览器发来的信息,并作出相应应答 第一步:需要导入模块: from flask import Flask,request fr ...

  3. .Net MVC删除图片

    还在学校,菜鸟级别,接触到的只是  /// <summary> /// 根据imageID删除图片 /// </summary> /// <returns>< ...

  4. 查看apache和nginx的负载和连接数情况

    1.查看apache当前并发访问数:netstat -an | grep ESTABLISHED | wc -l对比httpd.conf中MaxClients的数字差距多少. 2.查看有多少个进程数: ...

  5. Tomcat网站根目录的配置

    在</Host>前插入: <Host> … … <Context path="" docBase="E:\Users\Administrat ...

  6. HDU 5875 Function(RMQ-ST+二分)

    Function Time Limit: 7000/3500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Total ...

  7. [openjudge6043]哆啦A梦的时光机

    [openjudge6043]哆啦A梦的时光机 试题描述 哆啦A梦有一个神奇的道具:时光机.坐着它,大雄和他的伙伴们能穿越时空,回到过去或者去到未来. 有一天,大雄和他的伙伴们想穿越时空进行探险,可是 ...

  8. JavaScript 笔记(3) -- JSON

    JavaScript JSON (JavaScript Object Notation): 是一种轻量级的数据交换格式 JSON 是用于存储和传输数据的格式 JSON 通常用于服务端向网页传递数据 J ...

  9. HDOJ-1671 Phone List

    Phone List Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Probl ...

  10. [agc014d] Black and White Tree(玄学树D)

    Description 有一颗n个点的树,刚开始每个点都没有颜色. Alice和Bob会轮流对这棵树的一个点涂色,Alice涂白,Bob涂黑,Alice先手. 若最后存在一个白点,使得这个白点所有相邻 ...