MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

 

添加图像

你可以使用image属性通过指定URL为按钮添加一个图像。图像从URL进行加载,可以是一个相对或绝对的URL路径,然后在按钮上显示图像。 下面的按钮有labelimage 'happy.png'。图像显示在标签的左边。你可以使用其它两个属性去改变这个位置。这将会在后面进行解释。

例1 : Source View

<button label="help" image="happy.png"/>

使用CSS图像的按钮

在按钮上指定图像的另一个方法是使用样式表(CSS list-style-image )属性。这将计划允许不改变XUL文件去改变"外观"(在这个例子,外观指按钮的图片)。

例2 : Source View

<button id="find-button"
  label="Find" style="list-style-image: url('happy.png')"/>

在这个例子,在按钮上显示图像 'happy.png'。 style属性的功能类似于在HTML中一样。通常,它可以使用在所有的XUL元素。注意你确实应该在一个分离的样式表里定义样式。

图像定位

默认情况下,按钮上的图像会放置在文本标签的左边。有两个属性可以用来控制定位。

dir属性控制图像和文本的方向。设置这个属性的值为reverse,图像将会放在文本的右边。使用normal值,或者删除这个属性,图像将会放在文本的左边。

orient属性用于在将图片放在文本的上面或下面。默认值是horizontal用于将用于将图像放在文本的左或右。你也可以使用值vertical将图像放在上方或下方。在这个例子,dir属性控制放置在上方或下方。相同的值被使用时,如果用在normal的意思是将图像放在文本的上方,而用在reverse的意思是将图像放在文本的下方。

例3 : Source View

Image:advbtns1.png
<button label="Left" image="happy.png"/>
<button label="Right" image="happy.png" dir="reverse"/>
<button label="Above" image="happy.png" orient="vertical"/>
<button label="Below" image="happy.png" orient="vertical" dir="reverse"/>


这个例子展示了四个连续的不同类型的按钮。注意两个属性都没有指定说明使用的是默认值。

特殊内容按钮

按钮可以在内部包含任意的标记元素,这些元素将会被渲染在按钮内部。你或许不会经常使用这个,但你可以在创建自定义元素时使用它。

例如,下面将创建一个有两个红字的按钮:

例4 : Source View

<button>
  <description value="This is a"/>
  <description value="rather strange" style="color: red;"/>
  <description value="button"/>
</button>

任何XUL元素都可以放在button里面。HTML元素将被忽略,因此你需要使用description元素来包装它来达到换行的目的。如果你在按钮上指定label属性,它将会覆盖按钮内的所有内容。

弹出菜单按钮

你可以在按钮里面放置一个menupopup去促使在按钮被按下时向下弹出一个菜单,就像使用 menulist。然而,在这个例子你必须设置type 属性的值为menu

例5 : Source View

Image:advbtns2.png
<button type="menu" label="Device">
  <menupopup>
    <menuitem label="Printer"/>
    <menuitem label="Mouse"/>
    <menuitem label="Keyboard"/>
  </menupopup>
</button>

在这个例子中,用户可以点击按钮去弹出一个包括三个项目的菜单。注意在选择这些菜单项之中的一个时不会改变按钮的标签,不像menulist那样。这种按钮类型是有意做成类似于菜单的,在每个项目上附上脚本去执行任务。我们将会在后面看到更多的菜单。

你也可以设置 type 属性的值为menu-button。这也可以创建一个像菜单的按钮,但显示会有所不同,右边的图像显示它们的区别。左边是一个'menu'而第二个是'menu-button'。 它有一个箭头标记菜单的存在。 在'menu'上,用户可以点击按钮的任何地方去显示菜单。在 'menu-button'上,用户点击箭头去显示菜单。

接下来,我们将要学习更多关于 在窗口中放置元素.

文档标签和贡献者

标签: 
 此页面的贡献者: ziyunfei, 宋晓光, Suweite
 最后编辑者: ziyunfei,