Question

我正在尝试使用dijit.InlineEditBox。我使用dojo文档中的示例在HTML中添加了以下代码：

<script type="text/javascript">
    dojo.require("dijit.InlineEditBox");
    dojo.require("dojo.parser");
    dojo.require("dijit.form.TextBox");

    function editableHeaderOnChange(id, arg){
        alert("details changed with id " + id + " and arguments "+arg);
    }
</script>

...
<span id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])"
autoSave="true" title="My Text">click to edit me</span>

我正在使用苔原主题。它有效，但它看起来不那么好。小部件有自己的风格，不适合我的CSS。我使用firebug来找到问题的根源。小部件创建了许多嵌套的div / span元素，每个元素都有自己的样式（firebug中的元素样式）：

<span
id="dijit__InlineEditor_0"
class="dijitReset dijitInline"
style="margin: 0px; position: absolute; visibility: hidden; display: block; opacity: 0;" ...>

<input type="text" autocomplete="off" 
class="dijit dijitReset dijitLeft dijitTextBox"
id="dijit_form_TextBox_0"
style="line-height: 20px; font-weight: 400; font-family: Trebuchet MS,Helvetica,Arial,Verdana; font-size: 14.5167px; font-style: normal; width: 100%;">
...>
</span></span>

（仅显示相关部分......）

获取我想要的视觉效果，不会破坏换行符，我需要将dijit_form_TextBox_0 **的宽度更改为50％，并将dijit__InlineEditor_0的位置更改为 display：inline **;

或改变一切的定位（我的大部分布局都是浮动的，所以位置：绝对不适合）

我无法解决css中的那些span元素来更改属性，因为element.style当然具有优先级。

我不明白这个系统的逻辑...... 为什么dijit直接在元素内生成样式？我该如何更改这些属性？

由于汤姆

Answer 1

这将为您提供创建自己主题所需的一切，就像Tundra一样。

http://docs.dojocampus.org/dijit-themes

添加了：

Dijit将尝试使用您的内联样式（如宽度和高度）来确定其内部元素的正确设置。所以你可以写

 <span style="width:200px" id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])" autoSave="true" title="My Text">click to edit me</span>

看看它是否有效。不确定字体和行高等东西，听起来应该是主题。无论出于何种原因，它可能会将它们复制到内联样式中。试着改变它，看看会发生什么。

我也不是逻辑上的专家。我已经多次涉足并取得了一些成功。我只能告诉你，这并非不可能。对不起帮助不好。

理解dijit css和样式的逻辑

1 个答案: