salesforce 零基础学习(六十一)apex:component简单使用以及图片轮转播放的实现

有的时候,我们项目有可能有类似需求:做一个简单的图像轮转播放功能,不同的VF页面调用可以显示不同的图片以及不同的图片描述。这种情况,如果在每个页面单独处理相关的图像轮转播放则显得代码特别冗余,此种情况下适合使用apex:component实现,将图像轮转的功能做成一个组件,图像的URL以及图像的描述信息可以作为参数传递进来,不同的VF可以放置不同的图像 URLS 和描述信息。

一.apex:component简单用法介绍:

apex:component作为预定义的组件通常需要VF页面进行相关传值操作实现其自身的特定功能,所以apex:attribute标签作为参数传递必不可少。(详情看page的PDF)

apex:attribute主要有一下几个属性:

  name:定义属性的名称,相关VF页面需要对此名称进行value赋值;

  description:定义属性的描述;

  type:定义attribute的属性类型,传递的类型如下图所示

二.图片轮转播放的实现:

项目实现的功能为通过page页面传递过来的多个图片以及多个图片的描述,通过component组件实现图片轮播,并且图片描述显示在当前图片上。

通过上述需求,我们可以看出来,需要在component定义两个属性,一个是图片URL的数组,一个是图片描述的数组。

项目位置放在git上:https://github.com/zhangyueqidlmu/picture_carousel

 将static resource目录下的static resource.zip放到salesforce中static resource中并命名为pictureCarousel

 将代码中相关component,controller和page复制到环境中,其中controller的URL为图片的URL,根据自己存储图片的位置更改相关的URL。

效果展示:

https://github.com/zhangyueqidlmu/picture_carousel/raw/master/a.avi

总结:此篇主要通过apex:component实现图片轮转播放功能,篇中有错误地方欢迎指出,有问题欢迎留言。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云商业智能分析团队的专栏

图表的标签显示设置

图表标签设置是编辑报告中常见的操作,这里说一下图表标签设置的常见问题。图表标签显示设置具有一定的通用性。

1041
来自专栏小狼的世界

Silverlight学习笔记:改变控件的样式

Silverlight的控件都具有MS为我们赋予的默认样式,虽然这个样式也不怎么难看,但任何产品都很少用这个默认的样式去做最后的呈现,所以我们就需要对其进行修改...

621
来自专栏Django中文社区

Django 博客使用 Markdown 自动生成文章目录

我们的 Django 博客使用了 Markdown 来为文章提供排版支持。Markdown 在渲染内容的同时还可以自动提取整个内容的目录结构,本文将教你如何使用...

5529
来自专栏Python Web学习记录及整理

HTML学习记录及整理

<!DOCTYPE ”此文仅为个人学习的知识梳理,权威且更详细的内容请查阅w3school。“>

4068
来自专栏计算机编程

SNS项目笔记<八>--Slides显示大图

在浏览大图的时候,我们总有些长图进行查看,在查看的过程中,我们难以一次性查看全部内容,于是我们想,如果在slides里面技能横滑切换,又能竖滑滚动查看就好了。这...

662
来自专栏hrscy

怎样在 Unity 中创建 UI

在现在每一个软件应用中,用户界面(UI)都是核心的特征。游戏也没有抛弃这一规则。有非常多的游戏都使用 UI 来显示一些信息,比如生命值,技能,地图,武器的弹药,...

702
来自专栏Django中文社区

Markdown 自动生成文章目录

我们的之前在博客中使用了 Markdown 来为文章提供排版支持。Markdown 在渲染内容的同时还可以自动提取整个内容的目录结构,现在我们来使用 Markd...

3266
来自专栏深度学习与计算机视觉

OpenCV ImageWatch插件安装与使用说明

在使用OpenCV时,如果我们想看到一个图片的处理效果,只能把它显示出来,而插入断点调试也只能看到Mat类型变量中的一些信息,看不到图片效果。而ImageWat...

1917
来自专栏小狼的世界

CHROME对CSS的解析

最近完成的一个项目需要做对Chrome的支持,在这个过程中发现了一个Chrome对于Css解析与FF、IE等的区别,在这里总结一下。

692
来自专栏GreenLeaves

JavaScript之向文档中添加元素和内容的方法

一、非DOM方法添加 1、document.write() <html xmlns="http://www.w3.org/1999/xhtml"> <head>...

1617

扫码关注云+社区