文檔首頁(yè)>>telerik中文文檔>>外觀

外觀

立即下載Kendo UI for jQuery

注意：從Kendo UI R1 2022開始，jQuery AutoComplete小部件有了新的渲染和樣式選項(xiàng)。

本文將向您展示有關(guān) Kendo UI AutoComplete 渲染的信息。

選項(xiàng)

Kendo UI AutoComplete 支持以下樣式選項(xiàng)：

size— 配置組件的整體尺寸。
rounded— 配置標(biāo)簽的邊框半徑。
fillMode— 控制顏色的應(yīng)用方式。

尺寸

size選項(xiàng)控制自動(dòng)完成組件的外觀大小，類的結(jié)構(gòu)是k-input-{size}.

該size選項(xiàng)可以使用以下值：

sm-小尺寸
md-中等大小
lg-大尺寸
none—未設(shè)置

默認(rèn)大小值為中等，它通過k-input-md類應(yīng)用于span封裝元素。

下面的示例顯示了基本配置以及如何設(shè)置size為“大”：

下面是受配置影響的 HTML。更改將應(yīng)用于span.k-autocomplete封裝元素：

<span class="k-autocomplete k-input k-input-lg">
...
</span>

圓形

該rounded選項(xiàng)控制對(duì)小部件中所選項(xiàng)目的標(biāo)簽應(yīng)用多少邊框半徑，類的結(jié)構(gòu)是k-rounded-{size}.

該rounded選項(xiàng)可以使用以下值：

sm——邊界半徑小
md—中等邊界半徑
lg——邊界半徑大
full——橢圓形邊界半徑
none—未設(shè)置

默認(rèn)值是medium，它應(yīng)用于span，通過k-round -md類自動(dòng)完成封裝元素。

下面的示例顯示了基本的自動(dòng)完成配置以及如何設(shè)置rounded為“full”：

更改將應(yīng)用于span.k-autocomplete封裝元素：

<span class="k-autocomplete k-input k-rounded-full">
...
</span>

填充模式

該fillMode選項(xiàng)控制顏色的應(yīng)用方式，類的結(jié)構(gòu)是k-input-{fillMode}.

該fillMode選項(xiàng)可以使用以下值：

solid
flat
outline
none

默認(rèn)值為solid，它應(yīng)用于span.k-autocomplete通過k-input-solid類完成封裝元素。

下面的示例展示了基本的AutoComplement配置以及如何設(shè)置fillMode為“outline”：

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
fillMode: "outline"
});
</script>

更改將應(yīng)用于span.k-autocomplete封裝元素：

<span class="k-autocomplete k-input k-input-outline">
...
</span>

舊渲染與新渲染

下面您將發(fā)現(xiàn)新舊渲染之間的差異。

以下示例展示了包裝器渲染。

<!-- OLD WRAPPER-->
<span class="k-widget k-autocomplete">
<input id="autocomplete" type="text" class="k-input" placeholder="...">
</span>

<!-- NEW WRAPPER -->
<span class="k-autocomplete k-input k-input-md k-rounded-md k-input-solid">
<input type="text" class="k-input-inner" value="..." placeholder="..." />
</span>

以下示例展示了沒有虛擬化的彈出渲染。

<!-- OLD POPUP WITHOUT VIRTUALIZATION-->
<div class="k-list-container k-popup k-group k-reset k-state-border-up" id="products-list" data-role="popup">
[Header template]
<div class="k-group-header">Argentina</div>
<div class="k-list-scroller">
<ul class="k-list k-reset">
<li class="k-item">Patricio Simpson</li>
...
<li class="k-item k-first">
Ann Devon
<div class="k-group">UK</div>
</li>
</ul>
</div>
<div class="k-nodata">
<div>No Data!</div>
</div>
<div class="k-footer">
[Footer template]
</div>
</div>

<!-- NEW POPUP WITHOUT VIRTUALIZATION -->
<div class="k-popup k-group k-reset">
<div class="k-list k-list-md">
<div class="k-list-header">
[header template]
</div>
<div class="k-list-group-sticky-header">Argentina</div>
<div class="k-list-content k-list-scroller">
<ul class="k-list-ul">
<li class="k-list-item">
<span class="k-list-item-text">Patricio Simpson</span>
</li>
...
<li class="k-list-item k-first">
<span class="k-list-item-text">Roland Mendel</span>
<div class="k-list-item-group-label">Austria</div>
</li>
...
</ul>
</div>
<div class="k-nodata">
<div>No data found.</div>
</div>
<div class="k-list-footer">
[Footer template]
</div>
</div>
</div>

以下示例展示了使用虛擬化的彈出渲染。

Copy code<!-- OLD POPUP WITH VIRTUALIZATION-->
<div class="k-list-container k-popup k-group k-reset">
<div>
[Header template]
</div>
<div class="k-virtual-wrap">
<div class="k-group-header"></div>
<div class="k-virtual-content">
<ul class="k-list k-reset k-virtual-list">
<li class="k-virtual-item k-item">
Vins et alcools Chevalier
</li>
...
<li class="k-virtual-item k-item">
Toms Spezialit?ten
</li>
...
</ul>
<div class="k-height-container">
<div style="height: ....;"></div>
</div>
</div>
</div>
<div class="k-nodata">
<div>No data found.</div>
</div>
<div class="k-footer">
[Footer template]
</div>
</div>

<!-- NEW POPUP WITH VIRTUALIZATION-->
<div class="k-popup k-group k-reset">
<div class="k-list k-list-md k-virtual-list">
<div class="k-list-header">
[Header template]
</div>
<div class="k-list-group-sticky-header">Argentina</div>
<div class="k-list-content k-virtual-content">
<ul class="k-list-ul">
<li class="k-list-item">
<span class="k-list-item-text">
Text
</span>
</li>
...
<li class="k-list-item k-first">
<span class="k-list-item-text">
Ernst Handel, Austria
</span>
<div class="k-list-item-group-label">Austria</div>
</li>
...
</ul>
<div class="k-height-container">
<div style="height: ...;"></div>
</div>
</div>
<div class="k-nodata">
<div>No data found.</div>
</div>
<div class="k-list-footer">
[Footer template]
</div>
</div>
</div>

視覺向后兼容性

要獲得與舊渲染相同的樣式，您必須更新元素引用。

注意：當(dāng)您使用 LESS 主題時(shí)，新的樣式和渲染僅支持默認(rèn)選項(xiàng)。

舊渲染可以通過該類獲取對(duì) AutoComplete 輸入元素的引用k-input。

$(".k-input") // Returns a reference to the input element in the old rendering.

對(duì)于新渲染，您必須使用該類來定位 AutoComplete 輸入元素k-input-inner。

$(".k-input-inner") // Returns a reference to the input element in the new rendering.

下面的例子展示了如何在新的和舊的渲染中自定義AutoComplement的樣式：

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 1, name: "Tomatoes" },
{ id: 1, name: "Strawberry" },
{ id: 1, name: "Cherry" },
{ id: 1, name: "Melon" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
value: "Oranges"
});
</script>
<style>
/* NEW RENDERING */
/* The style below will works with versions R1 2022 and later*/

#autocomplete.k-input-inner{ /* customize the style input */
background: lightgreen;
}

#autocomplete-list .k-list-item{ /* customize the styles of the items in the popup */
background-color: #FFDFDD;
}

/* OLD RENDERING */
/* The style below will works with versions prior to R1 2022 */

#autocomplete-list .k-item{ /* customize the styles of the items in the popup */
background-color: #FFE5B4 !important;
}
</style>

對(duì)于新的渲染，應(yīng)該使用不同的類來自定義自動(dòng)完成模板。

AutoComplete 還提供了用于設(shè)置其列表和彈出窗口的寬度、訪問其list元素以及刪除其輸入值的選項(xiàng)。

設(shè)置列表寬度

要自定義自動(dòng)完成列表的寬度并更改其尺寸，請(qǐng)使用 jQuerywidth()方法。

<input id="autoComplete" />

<script>
$("#autoComplete").kendoAutoComplete();
var autoComplete = $("#autocomplete").data("kendoAutoComplete");
// Set the width of the drop-down list.
autoComplete.list.width(400);
</script>

設(shè)置彈出寬度

您可以使popup元素根據(jù)其顯示的項(xiàng)目標(biāo)簽的長(zhǎng)度自動(dòng)調(diào)整其寬度,當(dāng)該autoWidth選項(xiàng)設(shè)置為true時(shí)，彈出窗口將在單行上顯示內(nèi)容，并且不會(huì)將其換行。

<input id="autocomplete" style="width: 100px;" />
<script>
$("#autocomplete").kendoAutoComplete({
autoWidth: true,
dataSource: {
data: ["Short item", "An item with really, really long text"]
}
});
</script>

訪問列表元素

自動(dòng)完成列表呈現(xiàn)一個(gè)ID由小部件的 ID 和后綴生成的屬性-list,您可以使用ID來設(shè)置元素的樣式或訪問彈出元素內(nèi)的特定元素。

注意：如果AutoComplete沒有ID，那么列表元素也將沒有ID。

<input id="autocomplete">
<script>
$(document).ready(function() {
$("#autocomplete").kendoAutoComplete({
dataSource: ["Item1", "Item2"]
});

// The DIV popup element that holds the header and footer templates, and the suggestion options.
var popupElement = $("#autocomplete-list");

console.log(popupElement);
});
</script>

刪除輸入值

自動(dòng)完成功能使您能夠使用配置選項(xiàng)從其輸入?yún)^(qū)域中刪除值clearButton。因此，懸停時(shí)輸入?yún)^(qū)域中會(huì)出現(xiàn)一個(gè)x按鈕，單擊該按鈕時(shí)，它會(huì)重置小部件的值并觸發(fā)事件change。默認(rèn)情況下，clearButton已啟用并設(shè)置為true。

外觀