EasyMvc入门教程-基本控件说明(13)选项卡导航
选项卡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)选项卡导航的更多相关文章
- EasyMvc入门教程-基本控件说明(8)提醒导航
提醒导航顾名思义就是提醒大家注意某些文字了..请看下面的例子: 实现代码如下: @Html.Q().BlockRemind().Text("我可以作为提醒使用") 有的同学会说:这 ...
- EasyMvc入门教程-基本控件说明(11)菜单导航
基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的? 似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码: @{ var data = new List<Men ...
- 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 ...
随机推荐
- IOS开发学习笔记027-UITableView 使用模型对象
1.模型对象 2.单组数据的显示 1.模型对象 继续优化上一个程序 上一次用到字典,但是坏处多多.这里将这些数据封装到类中. 这就是MVC中得模型,模型就是数据的显示结构 新建一个类,添加几个属性和一 ...
- [oldboy-django][2深入django]初始Form组件
http://www.cnblogs.com/wupeiqi/articles/6144178.html 1 初始Form组件 # Form验证(初始Form组件验证) - 问题: - 无法记住上次提 ...
- [python][django 1.10中文文档]
https://docs.djangoproject.com/en/1.10/ 官方文档,点我下载 推荐一个翻译django 1.8.2的网址: 推荐一个翻译django 1.10的博客:(着重推荐 ...
- java课堂 笔记
- pip更新产生的问题及其解决方法?
运行 pip3 install --upgrade pip 发生错误: from pip import main ImportError: cannot import name 'main' 将以下代 ...
- MySql数据库 - 2.启动与关闭
MySql服务的启动: 右键计算机 - 管理 - 服务和应用程序 - 服务 - 右键 MySQL80 可以启动/停止MySQL(也可以点击属性 改变启动类型:手动/自动). 自动启动状态下,每次打开计 ...
- mybatis 从数据库查询的信息不完整解决办法
List<Product> products = productService.getProductListWithPage(productQuery); 今天碰到一个很奇怪的现象,上面的 ...
- T-SQL还有个内置方法NULLIF()
declare @cypic varchar if (NULLIF(@cypic, '') IS NOT NULL) begin print 1 end else begin print 2 end ...
- Mongoose 参考手册
转自:https://cnodejs.org/topic/548e54d157fd3ae46b233502 Mongoose 是什么? 一般我们不直接用MongoDB的函数来操作MongoDB数据库 ...
- html执行.NET函数 html操作数据库 html与ashx结合
原文发布时间为:2009-09-30 -- 来源于本人的百度文章 [由搬家工具导入] html页面执行.NET函数 html与ashx的结合 1、添加一般应用程序Handler.ashx <%@ ...