using TabContainer

11 views
Skip to first unread message

Jim Myers

unread,
Sep 13, 2009, 12:40:16 AM9/13/09
to dojango-users
I've got a simple page using a few tabs and it doesn't display
properly.
The dojango/templates/test.html does display properly.

There is a whole lot of stuff in the dojango test page that may or may
not help.
I can't find any real info on what is needed to enable the tabs to
function properly.
My page shows all the tab <div> text sequentially with no tabs.


My own test page looks like this...

{% extends "dojango/base.html" %}
{% block dojango_post_dj_config %}
<script type="text/javascript">
djConfig['isDebug'] = true;
djConfig.parseOnLoad = false;
</script>
{% endblock %}
{% block dojango_page_title %}Ridhwan Portal Home{% endblock %}
{% block _dojango_dojo_styles %}
<link href="/portal/rp/base.css" rel="stylesheet" type="text/css">
<link href="/portal/rp/Groups.css" rel="stylesheet" type="text/css">
{% endblock %}

{% block dojango_header_extra %}
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
</script>
{% endblock %}

{% block dojango_content %}
{% include "portal/header.html" %}
{% include "portal/navbar-top.html" %}
{% include "portal/main.html" %}
<!-- put left nav bar here as table content -->
{% include "portal/nav-dd.html" %}
{% include "portal/nav-groups.html" %}

{% include "portal/content.html" %}

<h1>Administration Tasks</h1>
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
style="width:500px;height:100px">
<div id="student" dojoType="dijit.layout.ContentPane"
title="Student Tasks" selected="true">
<p>tab 1 does this...</p>
</div>
<div id="Groups" dojoType="dijit.layout.ContentPane"
title="Group Tasks">
<p>tab 2 does this...</p>
</div>
<div id="Utility" dojoType="dijit.layout.ContentPane"
title="Utility Tasks">
<p>tab 3 does this...</p>
</div>
</div>
{% include "portal/content-end.html" %}
{% include "portal/footer.html" %}
{% endblock %}

Tobias von Klipstein

unread,
Sep 30, 2009, 2:16:06 PM9/30/09
to dojang...@googlegroups.com
Hi Jim,

I just tried the following on my test page and it worked for me:

{% extends "dojango/base.html" %}
{% block dojango_post_dj_config %}
  <script type="text/javascript">
    djConfig['isDebug'] = true;
    djConfig.parseOnLoad = true; // otherwise you would have to call dojo.parser.parse() manually!
  </script>
{% endblock %}

{% block dojango_header_extra %}
  <script type="text/javascript">
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dijit.layout.ContentPane");
    // alternative, when you have defined djConfig.parseOnLoad = false;
    // dojo.require("dojo.parser");
    // dojo.addOnLoad(function(){dojo.parser.parse()});
  </script>
{% endblock %}

{% block dojango_content %}
    <h1>Administration Tasks</h1>
      <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
           style="width:500px;height:100px">
         <div id="student" dojoType="dijit.layout.ContentPane"
       title="Student Tasks" selected="true">
         <p>tab 1 does this...</p>
         </div>
         <div id="Groups" dojoType="dijit.layout.ContentPane"
              title="Group Tasks">
         <p>tab 2 does this...</p>
         </div>
         <div id="Utility" dojoType="dijit.layout.ContentPane"
                title="Utility Tasks">
         <p>tab 3 does this...</p>
         </div>
    </div>
{% endblock %}

Hope this helps setting up the TabContainer at yours.

Regards, Tobias
Reply all
Reply to author
Forward
0 new messages