Question

作为grails应用程序的一部分，我使用dijit.Calendar，主题设置为tundra。

在application.js

中

new dijit.Calendar({id:'calId', value: new Date()});

或gsp：

<div data-dojo-type="dijit.Calendar" id="calId" value="now" ></div>

并在head部分或layout.gsp文件中：

<link rel="stylesheet" href="${resource(dir:'js',file:'/dojo-release-1.7.2/dijit/themes/tundra/tundra.css')}" />
...
<body class="tundra">
...

如何设置digit.Calendar小部件以使用claro 保留所有其他小部件的苔原主题？

此外：是否可以/可靠地链接到head部分中的两个主题并将body类属性更改为＆＃34; claro＆＃34;？

谢谢

S上。

Answer 1

如documentation所示，dijit/layout/ContentPane是可行的方法。遗憾的是，当<body>有一个主题而另一些ContentPane有另一个主题（ContentPane获得混合主题）时，似乎存在一个错误。但是，使用多个ContentPane可以解决问题：

＆＃13;

<html>

<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/tundra/tundra.css">
  <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>

  <script>
    require(["dojo/parser", "dijit/layout/ContentPane", "dijit/form/Button"]);
  </script>
</head>

<body>
  <div data-dojo-type="dijit/layout/ContentPane" class="claro">
    <button type="button" data-dojo-type="dijit/form/Button">Claro Button</button>
  </div>
  <hr/>
  <div data-dojo-type="dijit/layout/ContentPane" class="tundra">
    <button type="button" class="tundra" data-dojo-type="dijit/form/Button">Tundra Button</button>
  </div>
</body>

</html>

＆＃13;

Answer 2

总是可以随时以编程方式更改DOM节点上的类，所以是的，表面上可以包含对head中2个主题的引用并在它们之间进行交换。

document.body.className = 'claro';

或者dojo/dom-class：

domClass.replace(document.body, 'claro', 'tundra'); // Adds claro and removes tundra

然而，这将是一个全有或全无其他任何给定时间的事件，而听起来你有兴趣将Claro用于一个特定的小部件，而同时在其他地方使用Tundra。嵌套主题类可能会导致您似乎已经发现的问题。

将每个主题类隔离到文档中的单独父节点可能是一个选项，具体取决于您正在做什么，但有一点需要注意的是，为了任何弹出窗口小部件（菜单，对话框，工具提示等）。）作为主题，主题类需要在body上，因为所有Dijit弹出窗口都被添加为body的直接后代。

如果您真的特别希望将Claro的日历与Tundra的其余部分混合搭配，您可以创建自己的顶级CSS文件来取代Claro或Tundra。如果你看看其中任何一个的来源，你会发现它们只是一系列的进口。相反，你可以编写自己的导入Tundra的所有组件，除了Calendar，你要导入Claro的。然后，您将tundra和claro类添加到body（这不会导致问题，因为您混合并匹配每个类别的不同组件以创建一个完整的主题）

Answer 3

我认为你可以通过编辑＆dojoroot / dijit / themes / tundra / Calendar.css＆＃39;来实现这一目标。因为它只是一个普通的CSS文件，你可以复制来自＆＃39; dojoroot / dijit / themes / claro / Calendar.css＆＃39; to＆＃39; dojoroot / dijit / themes / tundra / Calendar.css＆＃39; ，所以你已经改变了只有日历的css属性，其余的保持不变。

如何将dijit.Calendar的主题从苔原改为claro？

3 个答案: