折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的:

把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子:

@{
var data = new List<CollapsibleItem>()
{
new CollapsibleItem() {Title = "标题一", Text = "内容一"},
new CollapsibleItem() {Title = "标题二", Text = "内容二"},
new CollapsibleItem() {Title = "标题三", Text = "内容三"}
};
}
@Html.Q().Colla().SourceItems(data)

  代码似乎和时间线的那个实现很相似。。。发现什么了吗?意味着某个场合下,时间线控件和折叠面板的转换会很容易实现。。:)


总结:折叠面板的使用就简单介绍到这里,我相信你一定会觉得So easy,希望你能一直保持这种简单自信的心态 :)

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

EasyMvc入门教程-基本控件说明(4)折叠面板的更多相关文章

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

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

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

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

  3. EasyMvc入门教程-基本控件说明(13)选项卡导航

    选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...

  4. EasyMvc入门教程-图形控件说明(21)线形图+柱状图+饼形图

    本章将介绍一些基本但常用的图形:线型图,柱状图和饼形图. 以上三种图形对于的数据都是键值对数组,请参考第一个例子: @{ var data = new List<LineItem>(); ...

  5. EasyMvc入门教程-基本控件说明(1)按钮

    按钮是我们最常用的控件之一了,先看下我们提供的按钮风格: 不同颜色的: 实现代码: @Html.Q().Button().Text("Danger").ColorDanger() ...

  6. EasyMvc入门教程-基本控件说明(6)进度条

    进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样..:) 进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子: @Html.Q().Progress().Value( ...

  7. EasyMvc入门教程-基本控件说明(12)栏目导航

    栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<N ...

  8. EasyMvc入门教程-基本控件说明(10)图片轮播导航

    图片轮播导航大家一定很常见,尤其是中小型建站系统的必备神器..:) 先上图上例子,看效果如下: 实现代码如下: @{ var data = new List<PhotoPlayerItem> ...

  9. EasyMvc入门教程-基本控件说明(2)定时器

    我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...

随机推荐

  1. 构建乘积数组--java

    题目:给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不能使 ...

  2. selenium webdriver——元素定位

    元素定位: >>WebDriver提供了八种元素定位方法,在Python语言中,所对应的方法如下: >>id属性定位:有唯一性 find_element_by_id(" ...

  3. post方式的数据抓取

    public static String sendPost(String url, String param) {        PrintWriter out = null;        Buff ...

  4. Sum of Squares of the Occurrence Counts解题报告(后缀自动机+LinkCutTree+线段树思想)

    题目描述 给定字符串\(S(|S|\le10^5)\),对其每个前缀求出如下的统计量: 对该字符串中的所有子串,统计其出现的次数,求其平方和. Sample Input: aaa Sample Out ...

  5. C++ Essentials 之 lower_bound 和 upper_bound 的比较函数格式不同

    第一次注意到这个问题. cppreference 上的条目: lower_bound upper_bound C++17 草案 N4659 lower_bound template<class ...

  6. Hive 01 概述、安装配置

    概述 数据仓库:是一个面向主题的.集成的.不可更新的.随时间不变化的数据集合,它用于支持企业或组织的决策分析处理. 数据仓库的结构和建立过程: 数据源 数据存储及管理 ETL Extract 提取 T ...

  7. bzoj4030【HEOI2015】小L的白日梦

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=4030 sol  :orz Yousiki http://www.cnblogs.com/you ...

  8. Codeforces Round #320 (Div. 2) [Bayan Thanks-Round] D 数学+(前缀 后缀 预处理)

    D. "Or" Game time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  9. Python之面向对象:方法

    一.类的三种方法 1.实例方法 def func(self): 由对象调用:至少一个self参数:执行普通方法时,自动将调用该方法的对象赋值给self: 只能通过实例调用   2.静态方法 @stat ...

  10. ajax跨域两个方法

    1在后端转换,调用API. ajax瀑布流: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...