【Salesforce】TabPanelが動かない

【Salesforce】TabPanelが動かない

Visualforceでタブを作成する際、「apex:tabPanel」を使用します。

しかし、jQueryと一緒に使うと干渉して動かなくなってしまうようです。

さすが、ゼイの人が解決していました。

http://blog.livedoor.jp/volvic_beer/archives/52381418.html

jQueryで干渉したらjQuery.noConflict()ですよねって感じらしいです。

一応ソースです。

<apex:page>

  <!-- TabPanel -->
  <apex:tabPanel id="TabPanel" switchType="client" selectedTab="Tab1" tabClass="activeTab" inactiveTabClass="inactiveTab">

    <apex:tab label="タブ1" name="Tab1" id="Tab1" style="font-size:larger" >
      
      <apex:pageBlock>
      
        <apex:pageBlockSection>
          
          <apex:pageBlocksectionItem>
              
            <apex:outputText>タブ1</apex:outputText>

          </apex:pageBlocksectionItem>
          
        </apex:pageBlockSection>
      
      </apex:pageBlock>
      
    </apex:tab>

    <apex:tab label="タブ2" name="Tab2" id="Tab2" style="font-size:larger" >
    </apex:tab>

    <apex:tab label="タブ3" name="Tab3" id="Tab3" style="font-size:larger" >
    </apex:tab>

    <apex:tab label="タブ4" name="Tab4" id="Tab4" style="font-size:larger" >
    </apex:tab>

    <apex:tab label="タブ5" name="Tab5" id="Tab5" style="font-size:larger" >
    </apex:tab>

  </apex:tabPanel>
  <!-- TabPanel -->
      
<apex:includeScript value="{!URLFOR($Resource.jQuery)}" />

<script>
$(document).ready(function(){

    $j = jQuery.noConflict();
});
</script>
</apex:page>

読み込んだらjQueryのnoConflict()を呼んで干渉を回避しています。

割と一般的な技術なのですが、こういうのを知らないことが多かったりします。

修行が足りませんね。