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

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

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

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

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

重要

パススルー属性を <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 ではサポートされていません。

Visualforce 開発者ガイド

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

関連項目: