将类应用于body的Dijit.form.DateTextBox问题

时间:2010-12-06 19:41:53

标签: dojo dijit.form

我一直在努力让Dijit.form.DateTextBox在div内部工作。我发现,如果我将“claro”类应用于body标签,它将正常工作。虽然,我不希望claro类覆盖我的其他风格。另外,由于MVC,我无法在我的所有页面上访问我的body标签。

这就是我所拥有的:

<html>
   <head>
        <style type="text/css">
          body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="dojo/dojo.js"
        djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dijit.form.DateTextBox");
            dojo.require("dijit.layout.ContentPane");

        </script>
        <link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
        />
    </head>

<body>
<table>
    <tr>
    <td>
        <div dojoType="dijit.layout.ContentPane" class="claro">
            <input type="text" name="date1" id="date1" value="2005-12-30" dojoType="dijit.form.DateTextBox" />
        </div>
    </td>
    <td>
        <div dojoType="dijit.layout.ContentPane" class="claro">
            <input type="text" name="date2" id="date2" value="2005-12-30" dojoType="dijit.form.DateTextBox" />
        </div>
    </td>
    </tr>
</table>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

让他实现jQueryUI附带的日历功能。它更加直截了当。我认为Dojo更像是一个应用程序框架,而不仅仅是为网页使用某些小部件。

答案 1 :(得分:0)

这是因为默认情况下所有dojo弹出窗口都附加到BODY(很奇怪)。

我找到了一个解决方法。只需将tundra / calendar.css复制到calendarFix.css并从中删除所有.tundra或.claro引用。例如,考虑这个片段:

:   
.tundra .dijitCalendarDecrease {
 background-position: top left;
} 
.tundra .dijitCalendarIncrease {
 background-position: -30px top;
}
.tundra .dijitCalendarContainer {
 font-size: 100%;
 border-spacing: 0;
 border-collapse: separate;
 border: 1px solid #ccc;
 margin: 0;
}
:

:   
.dijitCalendarDecrease {
 background-position: top left;
} 
.dijitCalendarIncrease {
 background-position: -30px top;
}
.dijitCalendarContainer {
 font-size: 100%;
 border-spacing: 0;
 border-collapse: separate;
 border: 1px solid #ccc;
 margin: 0;
}
: