djextNameTextBox（Dojo名称文本框）控件样式的需要和示例

Posted 2023-02-16

【中文标题】djextNameTextBox（Dojo名称文本框）控件样式的需要和示例

【英文标题】：Need and example of styling of djextNameTextBox (Dojo Name Text Box) control

【发布时间】：2014-04-09 14:28:52

【问题描述】：

有没有人有任何在 xPages 上设置 Dojo 名称文本框控件样式的示例.. (djextNameTextBox)

当您尝试通过属性对话框进行设置时，它似乎不起作用.. 我想改变例如字体、背景颜色、隐藏边框、更改 [x] 符号的颜色等...

【问题讨论】：

我试图做这样的事情： 但它不会改变 NameTextBox 本身的样式，而是改变它周围的一些区域.. 我怎样才能特别更改字体名称/颜色（见图）Jim Smith 名称，将背景从灰色更改为其他内容，颜色 [x] 符号、边框等。

【参考方案1】：

您可以使用.lotusFilter 类为名称设置样式，并使用.lotusClose 类设置“x”。

这里是的样式示例

.lotusFilters a.lotusFilter 
    background-color: rgb(255, 0, 0);
    border-color: blue;
    color: white;


.lotusFilters a .lotusClose  
    color: white;

【讨论】：

这很好用.. 谢谢 Knut... 我在哪里可以了解所有 xPages 控件的所有类？

最简单的方法是使用浏览器中的开发者工具。只需右键单击渲染页面中的某个元素，然后单击“检查元素”。然后你会看到页面的元素并且可以发现所有的类。

在这里您可以找到带有课程的 oneui 开发人员指南：infolib.lotus.com/resources/oneui/3.0/docPublic/components/…

【参考方案2】：

当您创建 Dojo 文本框时，它实际上会创建一些包装 div 和其他内部 div，每个 div 都有自己的功能。一个普通的 dijit/form/TextBox 有这样的结构：

<div class="dijit dijitReset dijitInline dijitTextBox>
  <div class="dijitReset dijitValidationContainer"> /*...Validation stuff here...*/</div>
  <div class="dijitReset dijitInputField dijitInputContainer">
    <input class="dijitReset dijitInputInner"/>
  </div>
</div>

我可能在这里或那里错过了一些课程，但这是声明 Dojo TextBox 所做的一般要点。如果要修改内部文本框，可以为 .dijitTextBox .dijitInputField 和 .dijitTextBox .dijitInputInner 添加 css。如果您想让它特定于这个 Dojo TextBox，那么您可以将“类”属性添加到您的 TextBox 属性，然后再次使用 css。这是css的一个例子：

.dijitTextBox.myClass .dijitInputField 
  width: 100px;


.dijitTextBox.myClass .dijitInputInner 
  width: 100px;
  font-size: 12px;