XUL_教程/输入控件

 

文本输入框

HTML有一个输入元素可以用于文本输入操作。 XUL 有一个相似的元素, textbox, 用于文本输入。 不用任何属性, textbox 元素创建一个框让用户可以输入文本。文本框具有像HTML的输入操作相同的许多属性。下面列出其中一部份:

id 
控件的唯一性标识。
class 
输入框的样式。
value 
如果你要输入框显示一个默认值,可以指定此属性。
disabled 
如果需要禁用文本输入框可以将这个属性设为true
type 
你可以将这个属性的值设为password, 创建一个输入框隐藏用户的输入内容。 通常用于密码输入框。
maxlength 
输入框允许输入的字符最大数量。

注解:在HTML里, 使用input元素区分几个不同类型的字段,在XUL里用每种类型对元素进行区分。

下面列出输入框的一些属性:

例1 : Source View

<label control="some-text" value="Enter some text"/>
<textbox id="some-text"/>
<label control="some-password" value="Enter a password"/>
<textbox id="some-password" type="password" maxlength="8"/>

多行文本输入框

上面的textbox 例子创建的输入框仅仅可以输入一行文本。HTML也有一个textarea元素用来创建一个大的文本输入区域。在XUL,你可以使用textbox元素达到很好的效果 -- 这两种元素都不是很常用。如果你设置multiline属性为true,文本输入框将显示为多行。

例2 : Source View

<textbox multiline="true"
           value="This is some text that could wrap onto multiple lines."/>

就像HTML中的textarea,你可以使用 rowscols 属性设置大小。这可以设置显示字符的行和列数量。

我们文件查找的例子

让我们给文件查找对话框添加一个搜索输入框。我们将要使用 textbox 元素。

<label value="Search for:" control="find-text"/>
<textbox id="find-text"/>

<button id="find-button" label="Find"/>
Image:inputs1.png

将这些行插入到在前一节最后我们创建的按钮的前面。如果你打开这个窗口,你将会看到像显示的图片一样的效果。

注解:标签和文本输入框现在已经显示在窗口里。文本输入框已具有完全的功能你可以在它里面输入文本和选中文本。使用control 属性后因此当label 被点击后输入框被选中。

多选和单选按钮

另外两个元素是用于创建多选输入框和单选按钮。它们是按钮的变体。多选输入框元素(checkbox element)有多个选择项,可以被选或不选。单选按钮的用法相似,它有一个集合并且只能选择其中之一。

你可以像使用按钮的属性一样使用多选输入框和单选按钮。下面的例子向你展示一些简单的多选输入框和单选按钮。

<checkbox id="case-sensitive" checked="true" label="Case sensitive"/>
<radio id="orange" label="Orange"/>
<radio id="violet" selected="true" label="Violet"/>
<radio id="yellow" label="Yellow"/>

第一行创建一个简单的 checkbox。当用户点击多选项,它在选中和非选中之间切换。checked 属性可以用在表明它的默认状态。你可以将它的值设为true或者falselabel属性可以用于设置显示在多选项旁边的文本。对于radio 按钮,你可以使用 selected 属性代替 checked 属性。设置它的值为 true 让默认选中其中的一个单选按钮,或者不选中其他的单选按钮。

单选项组元素

为了把单选按钮组合在一起,你需要用到radiogroup 元素。 在单选按钮组中同一时间只允许其中的一个单选按钮被选中。在其中的一个中点击将会把同一组中的其他按钮都设成关闭。下面的例子很好地示范了这一点。

例3 : Source View

<radiogroup>
  <radio id="orange" label="Orange"/>
  <radio id="violet" selected="true" label="Violet"/>
  <radio id="yellow" label="Yellow"/>
</radiogroup>

属性

像按钮一样,多选框和单选按钮可以用文本标签和图片进行包装,当它被按下时通过切换图片来表达选中或没选中。多选项有很多与按钮相同的属性:

label 
在多选项或单选按钮上的文本标签。
disabled 
设为truefalse 去禁用或启用多选项或单选按钮。
accesskey 
用于选中元素的快捷键。字母会在标签中以下划线显示。

到目前为止文件查找的例子 : Source View

在下一节,我们将可以看到一些适用于输入和选择数值的元素。

文档标签和贡献者

标签: 
向此页面作出贡献: ziyunfei, 宋晓光, Upsand, Suweite
最后编辑者: ziyunfei,