1

我正在尝试使用 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 的位置更改为显示：inline**;

或更改所有内容的定位（我的大部分布局都是浮动的，所以 position: absolute 不适合）

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

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

谢谢汤姆

4

1 回答 1

0

这将为您提供创建自己的主题所需的一切，就像 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>

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

我也不是事物逻辑的专家。我已经尝试了几次并取得了一些成功。我只能告诉你，这并非不可能。对不起，可怜的帮助。

于 2010-03-24T16:13:06.230 回答