2009-09-02 22 views
6

私はこのように、jQueryのロード機能とは非同期にページをロードするよ:今jqueryの負荷の問題

<pre class="brush: java;"> 
    /** 
    * The HelloWorldApp class implements an application that 
    * simply prints "Hello World!" to standard output. 
    */ 
    class HelloWorldApp { 
     public static void main(String[] args) { 
     System.out.println("Hello World!"); // Display the string. 
     } 
    } 
</pre> 

SyntaxHighlighter.all(外部ページの

tree.click(function() { 
       if ($(this).hasClass("file")) { 
        tree.removeClass("selected"); 
        $(this).addClass("selected"); 
        content.load("content/"+this.id+".html"); 
        contentContainer.effect("highlight"); 
        SyntaxHighlighter.all(); 
       }       
      }); 

一つは、このようになります。 );上記のtree.click()関数を呼び出すと、preブロックをきれいな構文の強調表示でレンダリングする必要がありますが、jQuery load()関数を使用してpreブロックでファイルをロードすると、これは機能しません。

私は、プリブロックをメインファイルのコンテンツdivにハードコードすると動作しますが、

これまでの回答に感謝します。 コールバックの部分を理解していますが、ロード関数のコールバックでSyntaxHighlighter.all()コールを実装しましたが、まだ運がありません...

2つの完全なファイルは、サイズatm。

のindex.php:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>braindump</title> 
    <link type="text/css" href="css/style.css" rel="stylesheet" /> 
    <link type="text/css" href="css/jquery.treeview.css" rel="stylesheet" /> 
    <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="jquery/jquery-ui-1.7.2.custom.min.js"></script> 
    <script type="text/javascript" src="jquery/jquery.treeview.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter_2.0.320/scripts/shCore.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter_2.0.320/scripts/shBrushJava.js"></script> 
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.0.320/styles/shCore.css"/> 
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.0.320/styles/shThemeDefault.css"/> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var tree = $("#tree li"); 
      var contentContainer = $("#contentContainer"); 
      var content = $("#content"); 

      SyntaxHighlighter.config.clipboardSwf = 'syntaxhighlighter_2.0.320/scripts/clipboard.swf'; 
      SyntaxHighlighter.all(); 

      // Treeview 
      $("#tree").treeview({ 
       persist: "location", 
       collapsed: true 
      }); 

      tree.click(function() { 
       if ($(this).hasClass("file")) { 
        tree.removeClass("selected"); 
        $(this).addClass("selected"); 
        content.load("content/"+this.id+".html", function() { 
         contentContainer.effect("highlight"); 
         SyntaxHighlighter.all(); 
        }); 
       }       
      }); 

     }); 
    </script> 
</head> 
<body> 
    <div id="container"> 
     <div id="header"> 

     </div> 

     <div id="leftMenu" class="thinDottedBorder"> 
      <div class="min500px"></div> 
      <ul id="tree" class="filetree"> 
       <li> 
        <span class="folder selectable">Design Patterns</span> 
        <ul> 
         <li id="softwareengineering/designpatterns/decorator" class="file"><span class="file selectable">Decorator Pattern</span></li> 
         <li id="softwareengineering/designpatterns/visitor" class="file"><span class="file selectable">Visitor Pattern</span></li> 
         <li id="softwareengineering/designpatterns/chainofresponsibility" class="file"><span class="file selectable">Chain of Responsibility</span></li> 
        </ul> 
       </li> 
       <li> 
        <span class="folder selectable">Design Principles</span> 
        <ul> 
         <li></li> 
        </ul> 
       </li> 
      </ul> 
      <div class="clear"></div> 
     </div> 

     <div id="contentContainer" class="thinDottedBorder"> 
      <div class="min500px"></div> 
      <div id="content"> 
       <pre class="brush: java;"> 
/** 
* The HelloWorldApp class implements an application that 
* simply prints "Hello World!" to standard output. 
*/ 
class HelloWorldApp { 
    public static void main(String[] args) { 
     System.out.println("Hello World!"); // Display the string. 
    } 
} 
</pre> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </div> 
</body> 

およびその他のファイル:

<pre class="brush: java;"> 
/** 
* The HelloWorldApp class implements an application that 
* simply prints "Hello World!" to standard output. 
*/ 
class HelloWorldApp { 
    public static void main(String[] args) { 
     System.out.println("Hello World!"); // Display the string. 
    } 
    } 
</pre> 

最初にハードコードされた前のブロックはSyntaxHighlighter.all(で正しくレンダリングされることに注意してください)が、ロード関数のコールバックの関数は機能しません。

+0

馬鹿のように聞こえるの危険にさらされて、あなたはcontentContainer.efを意味しましたfect( "ハイライト");またはcontent.effect( "highlight"); – karim79

+0

コンテンツが読み込まれる前にハイライトを呼び出すことはできますか?例えばそれはコンテンツのコールバック負荷としてより良いでしょうか? – scunliffe

答えて

25

SyntaxHighlighter.allは、window.onloadイベントに関連付けられます。これは1回だけ発生します。

は、構文強調表示をするために、ページのロード後、代わりにhighlight機能を使用します。

content.load("content/"+this.id+".html", function() { 
    // this is executed after the content is injected to the DOM 
    contentContainer.effect("highlight"); 
    SyntaxHighlighter.highlight(); 
});

指が交差している作品は、そうでない場合はあなたには、いくつかの明示的な引数をチャックする必要がある場合があります(コードを見るに基づきます) ({}は、設定パラメータの空のセットで、Ajaxの負荷ハンドラから呼び出された場合thiscontentする場所):


    SyntaxHighlighter.highlight({}, this); 
+0

プッシュして申し訳ありません、私はちょうどSyntaxhighlighter.highlight()を試してみました。それはうまく動作します!ブラシjsが見つからないか何かがあると、警告が表示されます。このメッセージを無効にすることはできますか? –

+0

@searlea:あなたが私を救ってくれてありがとう、私は投票する!! – Devima

0

あなたは、負荷へのコールバックでそれを呼び出す必要があります:GET要求はバックグラウンドで実行されている間、それは楽しくステートメントを実行に沿って続くよう

content.load("content/"+this.id+".html",function() { 
    SyntaxHighlighter.all(); 
    }); 

loadは非同期です。