图片轮播导航大家一定很常见,尤其是中小型建站系统的必备神器。。:)

先上图上例子,看效果如下:

实现代码如下:

@{
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)图片轮播导航的更多相关文章

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

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

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

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

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

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

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

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

  5. EasyMvc入门教程-基本控件说明(9)引言导航

    休息片刻后,继续开工... 这次我们继续学习引言导航,引言导航主要用于知识点的开始,起到知识点导航的作用.直接例子: 实现代码如下: @Html.Q().BlockRef().Title(" ...

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

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

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

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

  8. EasyMvc入门教程-基本控件说明(4)折叠面板

    折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的: 把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子: @{ var data ...

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

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

随机推荐

  1. IOS开发学习笔记031-代码实现微博界面

    微博界面如下 1.准备资源文件 新建一个plist文件,添加条目,root类型是array,子类型是Dictionary 2.更改父类,实现代理方法 接下来得实现过程如上一篇文章,改变父类为UITab ...

  2. Python+Selenium练习篇之7-利用name定位元素

    本文介绍如何通过节点中name的值来定位这个web元素.还是来看百度首页搜索输入框,通过name的值来定位. 相关脚本代码: # coding=utf-8 from selenium import w ...

  3. jsonp的原理及应用

    https://blog.csdn.net/u011897301/article/details/52679486

  4. 实战小项目之嵌入式linux图像采集与传输

    项目简介      本次编程实战主要是围绕嵌入式linux v4l2采集框架展开,包括以下几个部分: v4l2视频采集 IPU转码 framebuffer显示 自定义UDP简单协议进行传输 上位机软件 ...

  5. schema.xml属性概念

    # schema 定义逻辑库 checkSQLschema  当该值设置为 true 时,如果我们执行语句**select * from TESTDB.travelrecord;**则 MyCat 会 ...

  6. 服务器(centos7)用nginx挂出多个网站的配置

    前提: 装好环境的centos7系统(其他版本也行),装好ngnix: 推荐:http://www.cnblogs.com/alsy/p/5296244.html 把你的项目上传到服务器上(可以用Xf ...

  7. (Mac)centos 6.5安装 JDK+mysql

    为了把自己的网站放到外网,购买了阿里云的centos 6.5服务器,以下是安装 JDK 一.JDK安装: 方法一: 1.创建目录,命令行:(这里可以不加sudo) sudo mkdir /jdk 2. ...

  8. P1463 [HAOI2007]反素数

    题目描述 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数1,2,4,6 ...

  9. proteus仿真 引脚显示电平变化但不能显示波形

    proteus仿真 引脚显示电平变化但不能显示波形 原来是没有选择通道问题,proteus默认优先使用A通道才会显示波形,如果优先使用B,C,D通道,需要选择...

  10. 321. Create Maximum Number 解题方法详解

    321. Create Maximum Number 题目描述 Given two arrays of length m and n with digits 0-9 representing two ...