3

私は車輪を回転させ、しばらくの間答えを探していたので、投稿したいと思いました.

単純な JQuery タブを visualforce ページに追加しようとしていますが、jquery と jquery ui が読み込まれていることを確認しました。私は過去にこれを行ったことがありますが、「落とし穴」があったことを思い出せません。何か案は？

これが私の簡単なコードです：

<code>
<apex:page standardController="Account" showHeader="false" sidebar="false" standardStylesheets="false" doctype="html-5.0" cache="false">
<head>
</head><apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"/>
</head>
<body>

    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
      </ul>       
      <div id="tabs-1">
        <p>Content for tabs-1</p>
      </div>
      <div id="tabs-2">
        <p>Content for tabs-2</p>
      </div>
      <div id="tabs-3">
        <p>Content for tabs-3</p>
      </div>      
    </div>

</body>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function() {
        jQuery( "#tabs" ).tabs();
    });
</script>
</apex:page>
</code>
4

1 に答える 1

2

jQuery参照を更新する必要があるかもしれません。含めたミックスは機能していないようです。

jQuery1.6.4およびjQueryUI1.8.7でを使用すると、すべてのタブのコンテンツがすべてのタブに表示されます。

デモ-参照を使用すると、タブには常にすべてのコンテンツが表示されます

代わりに、 jQueryUIDEMOページで使用されている参照を使用してみてください。

http://code.jquery.com/jquery-1.8.3.js  
http://code.jquery.com/ui/1.9.2/jquery-ui.js  
http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css

DEMO -DEMOからの参照を処理するタブ

デモからのHTML：

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>

    </li>
    <li><a href="#tabs-2">Proin dolor</a>

    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>

    </li>
  </ul>
  <div id="tabs-1">
    <p>Content for tabs-1</p>
  </div>
  <div id="tabs-2">
    <p>Content for tabs-2</p>
  </div>
  <div id="tabs-3">
    <p>Content for tabs-3</p>
  </div>
</div>

脚本

jQuery.noConflict();
jQuery(document).ready(function () {
  jQuery("#tabs").tabs();
});
于 2013-01-11T21:49:41.647 に答える