Salesforce 静的リソースの Visualforce ページへの追加方法

環境
Visualfoce
jQuery 3.7.0

構文
1.<apex:includeScript value ="{! $Resource.jQuery }" />
$Resource グローバル変数とドット表記を使用して、スタンドアロン静的リソースを参照します。
ドット表記を使用して <apex:includeScript> (JavaScript ファイルの場合)、<apex:stylesheet> (CSS スタイルシートの場合)、
<apex:image> (画像ファイルの場合) タグでこの変数とリソース名を結合し、ページに追加します。
2.jQuert(“#id名").html(xxx)
指定id要素にhmtlコードを表示します。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<apex:page>
<!-- 静的リソースをページに追加 <head> -->
<apex:includeScript value="{! $Resource.jQuery }"/>
<!-- jQueryサンプルのテスト -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#msg").html("Hello from jQuery! study skill in arkgame.com");
});
</script>
<!--jQuery メッセージが表示 -->
<h1 id="msg"></h1>
</apex:page>
<apex:page> <!-- 静的リソースをページに追加 <head> --> <apex:includeScript value="{! $Resource.jQuery }"/> <!-- jQueryサンプルのテスト --> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function() { jQuery("#msg").html("Hello from jQuery! study skill in arkgame.com"); }); </script> <!--jQuery メッセージが表示 --> <h1 id="msg"></h1> </apex:page>
<apex:page>
    <!-- 静的リソースをページに追加 <head> -->
    <apex:includeScript value="{! $Resource.jQuery }"/>
    <!-- jQueryサンプルのテスト -->
    <script type="text/javascript">
        jQuery.noConflict();
        jQuery(document).ready(function() {
            jQuery("#msg").html("Hello from jQuery! study skill in arkgame.com");
        });
    </script>
    <!--jQuery メッセージが表示 -->
    <h1 id="msg"></h1>
</apex:page>

 

Salesforce

Posted by arkgame