【问题标题】:Dojo IconContainer not workingDojo IconContainer 不工作
【发布时间】:2013-09-08 13:18:05
【问题描述】:

我正在尝试执行这个包含 Dojo 图标容器的简单 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>

【问题讨论】:

    标签: dojo dojox.mobile


    【解决方案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>
    

    【讨论】:

    • 是的,Sebastien,我能够弄清楚并做了同样的事情,增加了几行解决了这个问题....
    猜你喜欢
    • 1970-01-01
    • 2012-04-24
    • 2014-05-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-07
    • 1970-01-01
    相关资源
    最近更新 更多