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

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

任意の属性を多くの Visualforce コンポーネントに追加し、表示される HTML に「パススルー」することができます。たとえば、Visualforce と jQuery Mobile、AngularJS、Knockout などの JavaScript フレームワークを併用するとき、data-* またはその他の属性をフレームワーク関数を有効化するフックとして使用する場合に、この機能は便利です。

パススルー属性は、placeholder「ゴースト」テキスト、pattern クライアント側検証、title ヘルプテキスト属性などの HTML5 機能の使いやすさを向上させるためにも使用できます。

HTML5 機能の動作は Visualforce ではなくユーザのブラウザによって決まり、ブラウザによって大幅に異なります。これらの機能を使用する場合は、サポート予定のすべてのブラウザとデバイスで早目に頻繁にテストしてください。

重要

パススルー属性を <apex:outputPanel> コンポーネントなどに追加するには、属性に「html-」のプレフィックスを付け、通常どおりに属性値を設定します。

これにより、次のような 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 タグを組み合わせます。

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

Visualforce 開発者ガイド

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