EasyMvc入门教程-基本控件说明(10)图片轮播导航
图片轮播导航大家一定很常见,尤其是中小型建站系统的必备神器。。:)
先上图上例子,看效果如下:
实现代码如下:
@{
var data = new List<PhotoPlayerItem>()
{
new PhotoPlayerItem()
{
Title = "公司产品一",
Src = "http://zwc.cn/images/up_images/5.jpg",
Href = "http://zwc.cn"
},
new PhotoPlayerItem()
{
Title = "公司产品二",
Src = "http://zwc.cn/images/up_images/5.jpg",
Href = "http://zwc.cn"
}
};
}
@Html.Q().PhotoPlayer().SourceItems(data)
看到没有,基本就是折叠面板的代码“骨骼”搬过来的。。准备数据,调用EasyMvc的PtotoPlayer组件。。。是不是还是很简单呢?如果不简单请告诉我,一定修改。。:)
小技巧:Href一般是链接地址用的,有经验的同学可能会在这里写上一段Javascript语句啥的实现奇淫技巧。。小范围内解决某个问题建议使用,但不建议大范围内使用哦。
本着简单的原则,本模块不再单独增加click事件:)
总结:图片轮播导航同样比较简单,从本文可知:EasyMvc不仅是后台框架,同样,也考虑了前端网站的使用需求,所以,下次公司网站开发类似的模块,尽量用EasyMvc吧 :)
更多使用示例请浏览在线示例:http://core.zwc.cn
EasyMvc入门教程-基本控件说明(10)图片轮播导航的更多相关文章
- EasyMvc入门教程-基本控件说明(11)菜单导航
基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的? 似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码: @{ var data = new List<Men ...
- EasyMvc入门教程-基本控件说明(8)提醒导航
提醒导航顾名思义就是提醒大家注意某些文字了..请看下面的例子: 实现代码如下: @Html.Q().BlockRemind().Text("我可以作为提醒使用") 有的同学会说:这 ...
- EasyMvc入门教程-基本控件说明(13)选项卡导航
选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...
- EasyMvc入门教程-基本控件说明(12)栏目导航
栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<N ...
- EasyMvc入门教程-基本控件说明(9)引言导航
休息片刻后,继续开工... 这次我们继续学习引言导航,引言导航主要用于知识点的开始,起到知识点导航的作用.直接例子: 实现代码如下: @Html.Q().BlockRef().Title(" ...
- 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( ...
随机推荐
- Google Optimize 安装使用教程
Google Optimize 介绍 打开链接 https://optimize.google.com/optimize/signup/ 填入电邮地址后等待注册邀请 Google Optimize是什 ...
- Leetcode 491.递增子序列
递增子序列 给定一个整型数组, 你的任务是找到所有该数组的递增子序列,递增子序列的长度至少是2. 示例: 输入: [4, 6, 7, 7] 输出: [[4, 6], [4, 7], [4, 6, 7] ...
- maven学习(十)——maven生命周期以及插件
一.生命周期 1.何为生命周期? Maven生命周期就是为了对所有的构建过程进行抽象和统一,包括项目清理,初始化,编译,打包,测试,部署等几乎所有构建步骤 2.Maven三大生命周期 Maven有三套 ...
- Sentinel系统监控Redis主从节点
author:JevonWei 版权声明:原创作品 blog:http://119.23.52.191/ --- 构建Sentinel监控Redis的主节点架构 拓扑结构结构 拓扑环境 master ...
- 如何将RobotFramework中case的执行结果上传到TestLink中。
公司的需求是: 用RobotFrameworjk框架执行case,用Testlink管理case和测试任务.需要持续统计每个版本的测试结果. 我觉得用Jenkins+Robot也行,Testlink+ ...
- MFC设置对话框背景和边框颜色
对于对话框,只需要重载默认的消息处理函数就行了: // 重载默认的消息处理函数,主要处理WM_MOVE WM_PAINT WM_NCPAINT WM_NCACTIVATE WM_NOTIFY这// 几 ...
- BZOJ 3513: [MUTC2013]idiots
3513: [MUTC2013]idiots Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 476 Solved: 162[Submit][Stat ...
- javascript实现htmlEncode与htmlDecode
原文发布时间为:2011-04-19 -- 来源于本人的百度文章 [由搬家工具导入] htmlencode with javascript function htmlEncode(html) { ...
- 告别 MongoDB 2.x 拥抱 3.x 版本的5大理由(转)
据不完全统计,目前还有很多同学在生产环境使用着 MongoDB 2.x 版本的服务,偶尔也会听到一些抱怨,但有些抱怨其实很没道理,因为抱怨的问题在最新版本的MongoDB里已经解决了,你缺的只是一次版 ...
- nginx报404的可能错误
1.转移地址写错,如root E:software_setup\ftpfile,而你实际的目录地址(比如test.jpg)在ftpfile文件夹里面的img文件夹下,如果直接找ftpfile\test ...