2012-02-20 53 views
0

下面是代碼:爲什麼Dijit不適合我?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/resources/dojo.css"> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css"> 

    <script type="text/javascript"> 
     dojo.require("dijit.layout.AccordionContainer"); 
    </script> 

    <script type="text/css"> 
     html, body { 
      width: 100%; 
      height: 100%; 
     } 
    </script> 
</head> 

<body class='claro'> 
    <div data-dojo-type="dijit.layout.AccordionContainer" style="width: 200px; height: 95%; margin: 0 auto;"> 
     <div data-dojo-type="dijit.layout.AccordionPane" title="pane #1">accordion pane #1</div> 
     <div data-dojo-type="dijit.layout.AccordionPane" title="pane #2">accordion pane #2</div> 
     <div data-dojo-type="dijit.layout.AccordionPane" title="pane #3">accordion pane #3</div> 
    </div> 
</body> 
</html> 

正是從道場的例子只是一個非常簡單的代碼。

當我在safari中運行它時,除了一些純文本外沒有任何東西出現。

當我在Chrome中運行它,會出現以下錯誤:

XMLHttpRequest cannot load http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/layout/AccordionContainer.js. Origin null is not allowed by Access-Control-Allow-Origin. 

Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101    dojo.js:15 

什麼問題?

+0

可能的重複http://stackoverflow.com/questions/5396527/error-origin-null-is-not-allowed-by-access-control-allow-origin-when-loading – 2012-02-20 09:35:29

回答

1

1.You忘了要求dijit.layout.AccordionPane
2.你忘了調用解析器

試試這個:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <script type="text/javascript"> 
      var dojoConfig = { 
            async : true, 
            parseOnLoad : true 
          } 
     </script> 
     <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script> 
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/resources/dojo.css"> 
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css"> 

     <script type="text/javascript"> 
      require(["dijit/layout/AccordionContainer", 
        "dijit/layout/AccordionPane"], 
        function(){ 
          // your code... 
        } 
      ); 
     </script> 

     <script type="text/css"> 
      html, body { 
       width: 100%; 
       height: 100%; 
      } 
     </script> 
    </head> 

    <body class='claro'> 
     <div data-dojo-type="dijit.layout.AccordionContainer" style="width: 200px; height: 95%; margin: 0 auto;"> 
      <div data-dojo-type="dijit.layout.AccordionPane" title="pane #1">accordion pane #1</div> 
      <div data-dojo-type="dijit.layout.AccordionPane" title="pane #2">accordion pane #2</div> 
      <div data-dojo-type="dijit.layout.AccordionPane" title="pane #3">accordion pane #3</div> 
     </div> 
    </body> 
</html> 

或者,而不是手動調用解析器,你可能通過在加載dojo.js的腳本標記中添加data-dojo-config =「parseOnLoad:true」,或者在加載dojo.js前設置變量dojoConfig(請參閱http://dojotoolkit.org/documentation/tutorials/1.7/dojo_config/),在頁面加載時調用它。

+0

我有複製所有你的代碼並運行,這是行不通的。它有一些錯誤。 – OammieR 2012-02-21 09:33:04

+0

嘗試新版本...我通過設置parseOnLoad = true並使模塊加載程序異步來替換手動分析。 – Philippe 2012-02-21 10:46:43

+0

是的......我忘了解析... – HanXu 2012-02-21 17:26:43