图标Button

立即下载Kendo UI for jQuery

Button提供了通过向其添加图标在视觉上增强其文本内容的选项。你可以添加一个带有img元素或背景图像(通常是一个子图形)的图标，考虑到web标准，使用背景图像更好，因为图标代表的是装饰而不是结构性内容。

Button提供icon、spriteCssClass和imageUrl属性，用于配置图标。对于特定的Button您只能使用其中一个属性，如果您定义了多个属性则Button将按照前面所述的顺序只使用其中一个属性。

有关呈现图标按钮的完整示例，请参阅向按钮添加图像的文章。

增强按钮的视觉效果：

• 使用背景图标
• 使用图像图标
• 使用字体图标

背景图标

背景图标应用于icon或spriteCssClass属性并作为span元素的背景显示。如果按钮有一个k-sprite CSS类则可以自动渲染span元素或者使用现有的span元素，如果使用了图标属性则使用k-icon类。icon和spriteCssClass属性的区别在于icon是用来作为主题子图像一部分的内置Kendo UI图标。有关可用图标名称的列表，请参阅关于使用图标的文章。

下面的示例演示如何在Button组件中使用图标。

<button type="button" id="editButton">Edit</button>
<button type="button" id="deleteButton"><span class="k-icon"></span>Delete</button>

<script>
$(function(){
$("#editButton").kendoButton({
icon: "pencil"
});

$("#deleteButton").kendoButton({
icon: "trash"
});
});
</script>

前面示例中的icon配置将生成以下HTML输出。

<button type="button" id="editButton" class="k-button k-button-icontext"><span class="k-icon k-edit"></span>Edit</button>
<button type="button" id="deleteButton" class="k-button k-button-icontext"><span class="k-icon k-delete"></span>Delete</button>

下面的例子演示了如何应用spriteCssClass。

<button type="button" id="editButton">Edit</button>
<button type="button" id="deleteButton"><span class="k-sprite"></span>Delete</button>

<script>
$(function(){
$("#editButton").kendoButton({
spriteCssClass: "myEditIcon"
});

$("#deleteButton").kendoButton({
spriteCssClass: "myDeleteIcon"
});
});
</script>

从技术上讲spriteCssClass可以用来实现与icon相同的结果，但icon避免了同时设置两个CSS类的需要并提供了一定程度的抽象展示。例如以下两种配置实际上是相同的，#button2也应用了一个k-sprite CSS类到span元素但它不改变按钮的外观。

$(function(){
$("#button1").kendoButton({
icon: "foo"
});

$("#button2").kendoButton({
spriteCssClass: "k-icon k-foo"
});
});

在某些情况下您可能希望使用只包含图标而没有文本的Button，这种情况下为了增加组件的可访问性，可以在sprite span中包含一个文本标签。

<button type="button" id="deleteButton"><span class="k-sprite">Delete</span></button>

<script>
$(function(){
$("#deleteButton").kendoButton({
spriteCssClass: "myDeleteIcon"
});
});
</script>

图像图标

图像图标应用于imageUrl属性并作为img元素显示，按钮可以自动呈现img元素或使用现有的img元素(如果它有k-image CSS类)。要在手动添加img元素时增加组件的可访问性请应用alt属性。

<button type="button" id="editButton">Edit</button>
<button type="button" id="deleteButton"><img class="k-image" alt="Delete" />Delete</button>

<script>
$(function(){
$("#editButton").kendoButton({
imageUrl: "/images/myEditIcon.gif"
});

$("#deleteButton").kendoButton({
imageUrl: "/images/myDeleteIcon.gif"
});
});
</script>

字体图标

通过在spriteCssClass属性上设置所需的第三方CSS类，你也可以在Kendo UI Button中使用FontAwesome或其他字体图标。但这种方法会呈现一个k-sprite CSS类，它应用的字体和大小样式可能会干扰字体图标样式。

要处理这个问题，可以使用以下方法之一：

覆盖破坏字体图标的Kendo UI样式：

```dojo
<link rel="stylesheet"
href="//fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" />
<style>
.k-button .fa {
font-size: inherit;
line-height: inherit;
width: auto;
height: auto;
margin-left: 0;
}
</style>

<button type="button" id="archiveButton">Archive</button>

<script>
$("#archiveButton").kendoButton({
spriteCssClass: "fa fa-archive"
});
</script>
```

在Kendo UI Button中直接包含所需的HTML标记和CSS类作为模板内容，Button就不会呈现k-sprite类：

```dojo
<link rel="stylesheet"
href="//fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" />

<button type="button" id="archiveButton"><span class="fa fa-archive"></span> Archive</button>

<script>
$("#archiveButton").kendoButton({});
</script>
```