この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Visualforce 開発者ガイド

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Visualforce コンポーネントのカスタム HTML 属性の設定

任意の属性を多くの Visualforce コンポーネントに追加し、表示される HTML に「パススルー」することができます。たとえば、Visualforce と jQuery Mobile、AngularJS、Knockout などの JavaScript フレームワークを併用するとき、data-* またはその他の属性をフレームワーク関数を有効化するフックとして使用する場合に、この機能は便利です。また、placeholder 「ゴースト」テキスト、pattern クライアント側検証、title ヘルプテキスト属性などの HTML5 機能の使いやすさを向上させるためにも使用できます。
パススルー属性を <apex:outputPanel> コンポーネントなどに追加するには、属性に「html-」のプレフィックスを付け、通常どおりに属性値を設定します。
1<apex:page showHeader="false" standardStylesheets="false" doctype="html-5.0">
2
3    <apex:outputPanel layout="block" html-data-role="panel" html-data-id="menu">
4        <apex:insert name="menu"/>    
5    </apex:outputPanel>
6
7    <apex:outputPanel layout="block" html-data-role="panel" html-data-id="main">
8        <apex:insert name="main"/>    
9    </apex:outputPanel>
10
11</apex:page>
これにより、次のような HTML 出力が作成されます。
1<!DOCTYPE HTML>
2<html>
3<head> ... </head>
4<div id="..." data-id="menu" data-role="panel">
5    <!-- contents of menu -->
6</div>
7
8<div id="..." data-id="main" data-role="panel">
9    <!-- contents of main -->
10</div>
11</html>
「html-」で始まる属性はすべて、「html-」を削除して、表示される HTML にパススルーされます。

コンポーネントの組み込みの属性と競合するパススルー属性を使用すると、コンパイルエラーが発生します。

メモ

パススルー属性は、次の Visualforce コンポーネントでサポートされています。
  • <apex:column>
  • <apex:commandButton>
  • <apex:commandLink>
  • <apex:component>
  • <apex:dataTable>
  • <apex:form>
  • <apex:iframe>
  • <apex:image>
  • <apex:includeScript>
  • <apex:input>
  • <apex:inputCheckbox>
  • <apex:inputField>
  • <apex:inputHidden>
  • <apex:inputSecret>
  • <apex:inputText>
  • <apex:inputTextarea>
  • <apex:messages>
  • <apex:outputField>
  • <apex:outputLabel>
  • <apex:outputLink>
  • <apex:outputPanel>
  • <apex:outputText>
  • <apex:page>
  • <apex:pageBlock>
  • <apex:pageBlockButtons>
  • <apex:pageBlockSection>
  • <apex:pageBlockSectionItem>
  • <apex:pageBlockTable>
  • <apex:panelBar>
  • <apex:panelBarItem>
  • <apex:panelGrid>
  • <apex:sectionHeader>
  • <apex:selectCheckboxes>
  • <apex:selectList>
  • <apex:selectOption>
  • <apex:selectOptions>
  • <apex:selectRadio>
  • <apex:stylesheet>
  • <apex:tab>
  • <apex:tabPanel>
表示された HTML へのパススルー属性の追加場所など、個々のコンポーネントについての詳細は、「標準のコンポーネントの参照」を参照してください。
パススルー属性をサポートするコンポーネントを使用して生成できない HTML マークアップを作成するには、Visualforce タグと静的 HTML を組み合わせます。たとえば、jQuery Mobile の listview を作成するには、<apex:repeat> タグと必要な HTML タグを組み合わせます。
1<ul data-role="listview" data-inset="true" data-filter="true">
2    <apex:repeat value="{! someListOfItems}" var="item">
3        <li><a href="#">{! item.Name}</a></li>
4    </apex:repeat>
5</ul>

パススルー属性は、動的 Visualforce ではサポートされていません。