了解dijit css和风格的逻辑

我正在尝试使用dijit.InlineEditBox。我已经把下面的代码在我的HTML，使用在道场文档的例子：了解dijit css和风格的逻辑

<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。我用萤火虫找出问题的根源。该插件创造了许多嵌套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元素来改变属性，因为该元素。风格当然有优先权。

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

感谢汤姆

来源

2010-03-24 Tom

这会给你你需要创建自己的主题，就像苔原的一切。

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-24 16:13:06 Martin

我已阅读关于dojo主题链接的文字。我没有看到如何创建我自己的主题将帮助我自动创建的元素样式，我不能重写;它总是会优先于我的主题。感谢您花时间回答，但这与我的问题无关。 – Tom 2010-03-28 06:56:32

对不起，我的阅读很sl。。查看编辑。 – Martin 2010-03-29 10:54:51

了解dijit css和风格的逻辑

回答

相关问题