2013-09-08 5 views
0

Я пытаюсь выполнить этот простой HTML-код, содержащий контейнер значков Dojo, но почему-то он не работает. Может кто-нибудь, пожалуйста, помогите мне узнать, что я делаю неправильно? Я использую доджо версию 1.7.Dojo IconContainer не работает

<!DOCTYPE HTML> 
    <html> 
    <head> 
      <meta name="viewport" content="width=device-width,initial-scale=1,maximum-  scale=1,minimum-scale=1,user-scalable=no"/> 
      <meta name="apple-mobile-web-app-capable" content="yes" /> 
      <title>Icon</title> 


      <style> 
        .box { 
          border: 1px solid #A7C0E0; 
          width: 300px; 
          height: 250px; 

          background-color: white; 
        } 
      </style> 
      <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:  true"></script> 
       <script type="text/javascript" src="dojox/mobile/mobile-all.js" ></script> 
      <script language="JavaScript" type="text/javascript"> 
        //dojo.require("dojo.parser"); // Use the lightweight parser. 
        dojo.require("dojox.mobile.parser"); 
        dojo.require("dojox.mobile"); 
        dojo.require("dojox.mobile.IconContainer"); 
        dojo.require("dojox.mobile.IconItem"); 
        dojo.require("dojox.mobile.RoundRectCategory"); 
        dojo.require("dojox.mobile.RoundRectList"); 
        dojo.require("dojox.mobile.ListItem"); 
        dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); 
      </script> 
    </head> 
    <body> 
      <div id="foo" dojoType="dojox.mobile.View" selected="true"> 
        <h1 dojoType="dojox.mobile.Heading">Icon Container</h1> 
        <ul dojoType="dojox.mobile.IconContainer"> 
          <li dojoType="dojox.mobile.IconItem" label="app1" icon="images/icon.png" lazy="true"><div class="box"></div></li> 
          <li dojoType="dojox.mobile.IconItem" label="app2" icon="images/icon.png" lazy="true"><div class="box"></div></li> 
          <li dojoType="dojox.mobile.IconItem" label="app3" icon="images/icon.png" lazy="true"><div class="box"></div></li> 
          <li dojoType="dojox.mobile.IconItem" label="moveTo" icon="images/icon.png" moveTo="about" transition="slide"></li> 

        </ul> 
      </div> 

      <div id="about" dojoType="dojox.mobile.View"> 
        <h1 dojoType="dojox.mobile.Heading" back="Icon Container" moveTo="foo">About</h1> 
        <h2 dojoType="dojox.mobile.RoundRectCategory">My Phone</h2> 
        <ul dojoType="dojox.mobile.RoundRectList"> 
          <li dojoType="dojox.mobile.ListItem" rightText="AcmePhone"> 
            Network                      
          </li>                        
          <li dojoType="dojox.mobile.ListItem" rightText="AcmePhone"> 
            Line 
          </li> 
          <li dojoType="dojox.mobile.ListItem" rightText="1024"> 
            Songs 
          </li> 
        </ul> 
      </div> 
    </body> 

ответ

1

вы можете это сделать его работу по:

  1. требует dojox.mobile.deviceTheme для того, чтобы загрузить виджеты CSS
  2. удаления dojox/мобильного/мобильного все .js script директива

Это дает вам следующий исходный код:

<!DOCTYPE HTML> 
<html> 
<head> 
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-  scale=1,minimum-scale=1,user-scalable=no"/> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 
     <title>Icon</title> 


     <style> 
       .box { 
         border: 1px solid #A7C0E0; 
         width: 300px; 
         height: 250px; 

         background-color: white; 
       } 
     </style> 
     <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:  true"></script> 
     <script language="JavaScript" type="text/javascript"> 
       //dojo.require("dojo.parser"); // Use the lightweight parser. 
       dojo.require("dojox.mobile.deviceTheme"); 
       dojo.require("dojox.mobile.parser"); 
       dojo.require("dojox.mobile"); 
       dojo.require("dojox.mobile.IconContainer"); 
       dojo.require("dojox.mobile.IconItem"); 
       dojo.require("dojox.mobile.RoundRectCategory"); 
       dojo.require("dojox.mobile.RoundRectList"); 
       dojo.require("dojox.mobile.ListItem"); 
       dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); 
     </script> 
</head> 
<body> 
     <div id="foo" dojoType="dojox.mobile.View" selected="true"> 
       <h1 dojoType="dojox.mobile.Heading">Icon Container</h1> 
       <ul dojoType="dojox.mobile.IconContainer"> 
         <li dojoType="dojox.mobile.IconItem" label="app1" icon="images/icon.png" lazy="true"><div class="box"></div></li> 
         <li dojoType="dojox.mobile.IconItem" label="app2" icon="images/icon.png" lazy="true"><div class="box"></div></li> 
         <li dojoType="dojox.mobile.IconItem" label="app3" icon="images/icon.png" lazy="true"><div class="box"></div></li> 
         <li dojoType="dojox.mobile.IconItem" label="moveTo" icon="images/icon.png" moveTo="about" transition="slide"></li> 

       </ul> 
     </div> 

     <div id="about" dojoType="dojox.mobile.View"> 
       <h1 dojoType="dojox.mobile.Heading" back="Icon Container" moveTo="foo">About</h1> 
       <h2 dojoType="dojox.mobile.RoundRectCategory">My Phone</h2> 
       <ul dojoType="dojox.mobile.RoundRectList"> 
         <li dojoType="dojox.mobile.ListItem" rightText="AcmePhone"> 
           Network                      
         </li>                        
         <li dojoType="dojox.mobile.ListItem" rightText="AcmePhone"> 
           Line 
         </li> 
         <li dojoType="dojox.mobile.ListItem" rightText="1024"> 
           Songs 
         </li> 
       </ul> 
     </div> 
</body> 
+0

Да, Себастьян, мне удалось выяснить это и сделать то же самое с добавлением нескольких строк, которые решили проблему .... –