1.静态资源简介

静态资源允许上传可以在 Visualforce 页面中引用的内容。资源可以归档（例如 .zip 和 .jar 文件）、图像(images)、样式表(stylesheets)、JavaScript 和其他文件。
静态资源由 Lightning 平台管理和分发，该平台充当文件的内容分发网络 (CDN)。自动处理缓存和分发。

静态资源使用 $Resource 全局变量进行引用，该变量可由 Visualforce 直接使用，或用作 URLFOR() 等函数的参数。

以下方法将$Resource 添加到页面：

• 添加JavaScript 文件：、
  
• 添加CSS 样式表：
• 添加图形文件：

创建并上载压缩的静态资源

2.创建并上传静态资源

1. 从 http://jquery.com/download/ 下载当前版本的 jQuery JavaScript 库。
2. 从设置中，在“快速查找”方框中输入“静态资源”，然后选择静态资源，最后单击新建。
3. 输入 jQuery 作为名称。
4. 单击选择文件，然后选择下载的 jQuery JavaScript 文件。创建简单的静态资源

有了 jQuery 的静态资源版本，可以通过在表达式中引用的方式以在 Visualforce 页面中使用 jQuery，例如 {! $Resource.jQuery }。

3.在 Visualforce 页面中添加静态资源(JavaScript 例)

使用 $Resource 全局变量和点记法来引用独立的静态资源。

    
    "{! $Resource.jQuery }"/>
    
    
    
    
"message">

预览结果：

4.创建并上传压缩的静态资源

1. 从 http://jquerymobile.com/download/ 下载当前版本的 jQuery Mobile JavaScript 库。
2. 打开 zip 文件并删除 /demos/ 目录及其内容。
3. 压缩文件夹并将其命名为 jquery.zip。
4. 从设置中，在“快速查找”方框中输入“静态资源”，然后选择静态资源，最后单击新建。
5. 输入 jQueryMobile 作为名称。
6. 单击选择文件，然后选择 jquery.zip 文件

5.在 Visualforce 页面中添加压缩的静态资源

URLFOR() 函数可以将压缩静态资源的引用以及其中项目的相对路径组合起来，以创建一个 URL，该 URL 可以与引用静态资源的 Visualforce 组件一起使用。

例如，URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png') 返回压缩静态资源中特定图形资产的 URL，该 URL 可供  组件使用。

可以为  和  组件的 JavaScript 及样式表文件构建类似的 URL。

示例1：

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
    
    <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%">
        
        <h3>Imagesh3>
        <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>
    
    <h3>Background Images on Buttonsh3>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">actionbutton>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-star">starbutton>
    div>
apex:page>

示例2：

Resources

• Using Static Resources
• Referencing a Static Resource in Visualforce Markup
• Styling Visualforce Pages
• Using JavaScript in Visualforce Pages
• $Resource
• Instantly reloading Visualforce static resources