Question

我在我的网站上使用了dojo 1.13.0并且大多数工作正常，但当我尝试在表单中添加DateTextBox时，我明白了这一点：

一行＆＃34;日期事件开始＆＃34;，

一条带有向下三角形的线，

一行X，

和一行空白输入框，如下面的屏幕：

页面中包含以下内容：

<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/dojo/dijit/themes/claro/claro.css" media="print" />
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script src="<?php echo TEMPLATE_DIR; ?>/dojo/dojo/dojo.js"></script>
<script type="text/javascript">
    require(["dojo/parser", "dojox/form/Manager", "dijit/form/DateTextBox", "dojo/domReady!"], function(parser) {
        parser.parse();
    });
</script>

身体：

<body class="claro myCssClass">
...
<div>
  <label for="eed-date-starts">Date Event Starts</label>&nbsp;
  <input id="eed-date-starts" name="eed-date-starts" data-dojo-observer="" type="text" data-dojo-type="dijit/form/DateTextBox">
</div>
...
</body>

我没有在开发者工具控制台中看到任何错误（混合内容除外，因为我从＆＃39; http://themes.googleusercontent.com/中抽取字体...＆＃39;和我＆＃39;在https网站上。）

看起来元素都有自己的dojo结构。我得到一个带有dijitComboBox类的 div ，其中包含一个带有类dijitDownArrowButton的 div ，其中包含带有类dijitInputField的输入。我得到了看起来合适的来源。我得到一个dojo文件夹，其中包含一个dijit文件夹，其中包含一个带有claro.css文件的themes / claro文件夹。

如果单击向下箭头，月份小部件的内容将显示在页面底部，未格式化。因此，似乎操作正在运行，而不是格式化。

有没有人有任何建议如何调试此问题？提前谢谢！

Answer 1

这是因为您将claro.css主题放在media="print"中由于这个小部件没有正确呈现，因为主题仅用于打印设备（开始打印时）而不用于屏幕设备（请参阅此article）：

将<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/dojo/dijit/themes/claro/claro.css" media="print" />媒体属性更改为screen（或将其删除），然后它才能正常运行：

请参阅以下两种情况的摘录：

无媒体播放（所有设备）：

＆＃13;

require(["dojo/parser", "dojox/form/Manager", "dijit/form/DateTextBox", "dojo/domReady!"], function(parser) {
  parser.parse();
});

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"  />
<body class="claro">
  <div>
  <label for="eed-date-starts">Date Event Starts</label>&nbsp;
  <input id="eed-date-starts" name="eed-date-starts" data-dojo-observer="" type="text" data-dojo-type="dijit/form/DateTextBox">
</div>
</body>

＆＃13;

使用media = print：

＆＃13;

require(["dojo/parser", "dojox/form/Manager", "dijit/form/DateTextBox", "dojo/domReady!"], function(parser) {
  parser.parse();
});

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" media="print" />
<body class="claro">
  <div>
  <label for="eed-date-starts">Date Event Starts</label>&nbsp;
  <input id="eed-date-starts" name="eed-date-starts" data-dojo-observer="" type="text" data-dojo-type="dijit/form/DateTextBox">
</div>
</body>

＆＃13;

为什么我的dojo DateTextBox在单独的行上显示组件？

1 个答案: