选项卡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. seajs引入jquery

    seajs 2.2.1在config文件中preload一次jquery,就可以在整个项目中使用jquery.如下: seajs.on('exec', function(module) { if (m ...

  2. android adb常用指令

    介绍一个更详细的介绍ADB的: https://github.com/mzlogin/awesome-adb/blob/master/README.md ----------------------- ...

  3. PHP 与 Redis 入门教程

    Redis 官方推荐的 PHP 客户端是 Predis 和 phpredis. 前者是完全使用 PHP 代码实现的原生客户端,而后者则是使用 C 语言编写的 PHP 扩展.在功能上两者区别并不大,就性 ...

  4. VMSAv8-64 translation table format descriptors

    通常情况下,一个 descriptor 可能是以下的几种 entry: 非法或者异常的 entry. Table entry, 指向 next-level translation table. Blo ...

  5. 【bzoj4066】简单题 KD-tree

    题目描述 你有一个N*N的棋盘,每个格子内有一个整数,初始时的时候全部为0,现在需要维护两种操作: 命令 参数限制 内容 1 x y A 1<=x,y<=N,A是正整数 将格子x,y里的数 ...

  6. BZOJ 4827 [Shoi2017]分手是祝愿 ——期望DP

    显然,考虑当前状态最少需要几步,直接贪心即可. 显然我们只需要考虑消掉这几个就好了. 然后发现,关系式找出来很简单,是$f(i) f(i+1) f(i-1)$之间的. 但是计算的时候并不好算. 所以把 ...

  7. 求职之路(拿到百度、美团、趋势科技、华为offer)

    求职之路(拿到百度.美团.趋势科技.华为offer) 版权所有:无缰之马chhuach(CSDN和博客源),转载请注明出处.CSDN地址http://blog.csdn.net/chhuach2005 ...

  8. FTB操作

    一些参考案例下面是一些常用的ftp操作文件的方法 案列1 using System; using System.Collections.Generic; using System.Text; usin ...

  9. easyUI 接收Spring Mvc中@ResponseBody中文乱码解决

    接触springMVC不够深入,乱码困扰我到深夜,特此留下记忆: @responsebody默认滴是ISO-8859-1 Controller注解参数 @ResponseBody 标注后返回Strin ...

  10. vue基础教程

    1.执行npm install 2.安装stylus,(npm install之后node_module已经有了stylus,但还是要再安装一次) npm install --save-dev sty ...