Visualforce-8.静态资源(Static Resources)
1.静态资源简介
静态资源允许上传可以在 Visualforce 页面中引用的内容。资源可以归档(例如 .zip 和 .jar 文件)、图像(images)、样式表(stylesheets)、JavaScript 和其他文件。
静态资源由 Lightning 平台管理和分发,该平台充当文件的内容分发网络 (CDN)。自动处理缓存和分发。
静态资源使用 $Resource 全局变量进行引用,该变量可由 Visualforce 直接使用,或用作 URLFOR() 等函数的参数。
以下方法将$Resource 添加到页面:
- 添加JavaScript 文件:<apex:includeScript value="{! $Resource.jQuery }"/>、<apex:includeScript value="{! URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.js')}"/>
- 添加CSS 样式表:<apex:stylesheet value="{! URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.css')}"/>
- 添加图形文件:<apex:image alt="eye" title="eye" url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/eye-black.png')}"/>
创建并上载压缩的静态资源
2.创建并上传静态资源
- 从 http://jquery.com/download/ 下载当前版本的 jQuery JavaScript 库。
- 从设置中,在“快速查找”方框中输入“静态资源”,然后选择静态资源,最后单击新建。
- 输入 jQuery 作为名称。
- 单击选择文件,然后选择下载的 jQuery JavaScript 文件。创建简单的静态资源
有了 jQuery 的静态资源版本,可以通过在表达式中引用的方式以在 Visualforce 页面中使用 jQuery,例如 {! $Resource.jQuery }。
3.在 Visualforce 页面中添加静态资源(JavaScript 例)
使用 $Resource
全局变量和点记法来引用独立的静态资源。
<apex:page> <!-- Add the static resource to page's <head> --> <apex:includeScript value="{! $Resource.jQuery }"/> <!-- A short bit of jQuery to test it's there --> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function() { jQuery("#message").html("Hello from jQuery!"); }); </script> <!-- Where the jQuery message will appear --> <h1 id="message"></h1> </apex:page>
预览结果:
4.创建并上传压缩的静态资源
- 从 http://jquerymobile.com/download/ 下载当前版本的 jQuery Mobile JavaScript 库。
- 打开 zip 文件并删除 /demos/ 目录及其内容。
- 压缩文件夹并将其命名为 jquery.zip。
- 从设置中,在“快速查找”方框中输入“静态资源”,然后选择静态资源,最后单击新建。
- 输入 jQueryMobile 作为名称。
- 单击选择文件,然后选择 jquery.zip 文件
5.在 Visualforce 页面中添加压缩的静态资源
使用
$Resource
全局变量以及 URLFOR()
函数来引用压缩静态资源中的项目。URLFOR()
函数可以将压缩静态资源的引用以及其中项目的相对路径组合起来,以创建一个 URL,该 URL 可以与引用静态资源的 Visualforce 组件一起使用。
例如,URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png')
返回压缩静态资源中特定图形资产的 URL,该 URL 可供 <apex:image>
组件使用。
可以为 <apex:includeScript>
和 <apex:stylesheet>
组件的 JavaScript 及样式表文件构建类似的 URL。
示例1:
<apex:page showHeader="false" sidebar="false" standardStylesheets="false"> <!-- Add static resources to page's <head> --> <apex:stylesheet value="{! URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.css')}"/> <apex:includeScript value="{! $Resource.jQueryMobile }"/> <apex:includeScript value="{! URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.js')}"/> <div style="margin-left: auto; margin-right: auto; width: 50%"> <!-- Display images directly referenced in a static resource --> <h3>Images</h3> <p>A hidden message: <apex:image alt="eye" title="eye" url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/eye-black.png')}"/> <apex:image alt="heart" title="heart" url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/heart-black.png')}"/> <apex:image alt="cloud" title="cloud" url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/cloud-black.png')}"/> </p> <!-- Display images referenced by CSS styles, all from a static resource. --> <h3>Background Images on Buttons</h3> <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">action</button> <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-star">star</button> </div> </apex:page>
示例2:
<apex:page > <apex:image alt="cats" title="cats" url="{!URLFOR($Resource.vfimagetest, 'cats/kitten1.jpg')}"/> </apex:page>