0

我正在尝试执行这个包含 Dojo Icon Container 的简单 HTML 代码，但不知何故它不起作用。有人可以帮我找出我做错了什么吗？我正在使用 dojo 1.7 版。

    <!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>

4

1 回答 1

1

您可以通过以下方式使其工作：

  1. 需要 dojox.mobile.deviceTheme 才能加载小部件 css
  2. 删除 dojox/mobile/mobile-all.js 脚本指令

这为您提供了以下源代码：

<!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>
于 2013-09-09T09:43:47.290 回答