Dojo IconContainer not working

StackOverflow https://stackoverflow.com/questions/18684112

  •  28-06-2022
  •  | 
  •  

Question

I am trying to execute this simple HTML code that contains Dojo Icon Container but somehow it's not working. Can someone please help me to find out what am I doing wrong ? I am using dojo version 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>

Was it helpful?

Solution

you can it make it work by:

  1. requiring dojox.mobile.deviceTheme in order to load the widgets css
  2. removing the dojox/mobile/mobile-all.js script directive

This gives you the following source code:

<!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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top