Visualforce <apex:tabPanel> と ｊQuery との衝突の解消

salesforce.com の Visualforce でタブ表示をする <apex:tabPanel> は、ｊQuery と相性が悪いようです。ｊQuery を読み込んでいるページで <apex:tabPanel> を使うと、タブの移動ができなくなります。

この問題は ｊQuery の衝突回避メソッドで解決できました。

<apex:page>
<apex:includeScript value=”{!URLFOR($Resource.jquery, ‘jquery_min.js’)}”/>

<script type=”text/javascript”>
var j$ = jQuery.noConflict();

//残りのJSコードは $ の代わりに j$ の表記で書く
</script>

<apex:tabPanel switchType=”client” selectedTab=”name1″ id=”theTabPanel”>
<apex:tab label=”One” name=”name1″ id=”tabOne”>content for tab one</apex:tab>
<apex:tab label=”Two” name=”name2″ id=”tabTwo”>content for tab two</apex:tab>
</apex:tabPanel>

</apex:page>