понимание логики dijit css и стилей - PullRequest
Новая
       13

понимание логики dijit css и стилей

1 голос
/ 24 марта 2010

Я пытаюсь использовать dijit.InlineEditBox. Я поместил следующий код в мой HTML, используя пример из документации dojo: 

<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 на дисплей: встроенный **;

или изменить расположение всего (большая часть моего макета является плавающей, поэтому позиция: абсолютный не подходит)

Я не могу обратиться к этим элементам span в моем css, чтобы изменить свойства, потому что element.style, конечно, имеет приоритет.

Я не понимаю логику в этой системе ... почему dijit генерирует стиль непосредственно внутри элемента? как я могу изменить эти свойства?

Спасибо Том

1 Ответ

0 голосов
/ 24 марта 2010

Это даст вам все необходимое для создания собственной темы, как в 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>

и посмотрите, работает ли он. Не уверен насчет таких вещей, как шрифты и высота строк, похоже, это должно соответствовать теме. Может быть, он копирует их во встроенные стили по любой причине. Просто попробуйте изменить его и посмотреть, что произойдет.

Я тоже не специалист по логике вещей. Я пару раз баловался этим с некоторым успехом. Все, что я могу вам сказать, это не невозможно. Извините за плохую помощь.

...