瞭解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和風格的邏輯

回答

相關問題