0

Visualforce ページで jQuery から Treeview を試していましたが、何らかの理由で機能しません。

関連するコードは次のとおりです。

          <apex:outputPanel id="invisibleSection" layout="block" styleClass="invisibleSectionClass">
          <script type="text/javascript">
          $("#browser").treeview();
           document.write('hi');
                $(document).ready(function() {
                        $("#navigation").treeview({
                        persist: "location",
                        collapsed: false,
                        animated: "medium"
                         });
                });

          </script>
          <ul id="browser" class="filetree">
            <li><span class="folder">Folder 1</span>
                <ul>
                    <li><span class="file">Item 1.1</span></li>
                </ul>
            </li>
            <li><span class="folder">Folder 2</span>
                <ul>
                    <li><span class="folder">Subfolder 2.1</span>
                        <ul id="folder21">
                            <li><span class="file">File 2.1.1</span></li>
                            <li><span class="file">File 2.1.2</span></li>
                        </ul>
                    </li>
                    <li><span class="file">File 2.2</span></li>
                </ul>
            </li>
            <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
                <ul>
                    <li><span class="file">File 3.1</span></li>
                </ul>
            </li>
            <li><span class="file">File 4</span></li>
        </ul>

document.write('hi');javascriptセクションが呼び出されていて、印刷されているかどうかを確認するために、を入れました。したがって、他の何かが間違っていると思います。Treeview(zip ファイル) を静的リソースとして含めました。

では、これが機能しないために何が間違っているのでしょうか。

<apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.cookie.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.js')}"/>

<apex:stylesheet value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.css')}" />

以下のジョンの提案に基づいて更新します。

  $(document).load(function () {

             $("#browser").treeview();

             $("#navigation").treeview({
                        persist: "location",
                        collapsed: false,
                        animated: "medium"
                         });

            });
4

1 に答える 1

1

一見すると、script タグを UL タグの下に移動する必要があるように見えます。これはインライン スクリプト タグであるため、スクリプトが実行される時点で、DOM は UL ID「browser」を認識していない可能性があります。$("#browser").treeview();document.load メソッドの内部を移動することさえ あります。これにより、ページのレンダリングが完了し、DOM が確立された後にコードが呼び出されるようになります。

于 2012-08-23T01:49:48.447 に答える