Web界面開發(fā)工具Kendo UI是怎樣自適應(yīng)渲染，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的加格達(dá)奇網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

自適應(yīng)渲染

Kendo UI for jQuery通過支持自適應(yīng)增強功能，可在任何設(shè)備上為客戶提供一致的體驗。

例如，當(dāng)您在移動設(shè)備上過濾或編輯數(shù)據(jù)時，Kendo UI會在用戶的新屏幕中滑動，這與臺式機的內(nèi)聯(lián)和彈出操作有所不同。

啟用響應(yīng)式設(shè)計

要啟用自適應(yīng)渲染功能，請將mobile屬性設(shè)置為true或“ phone”：

• 如果設(shè)置為true，則在移動瀏覽器上查看時，小部件將使用自適應(yīng)渲染。

• 如果設(shè)置為“ phone”，則無論瀏覽器類型如何，都將強制小部件使用自適應(yīng)渲染。

重要提示：對于移動渲染，我們建議也設(shè)置高度選項。 如果不設(shè)置明確的高度，則網(wǎng)格的每個視圖都可能具有不同的高度。

<div id="grid"></div>

<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
editable: true,
columnMenu: true,
height: 550,
mobile: "phone"
});
</script>

在移動設(shè)備上配置面板

放置自適應(yīng)網(wǎng)格的移動面板不會自動擴展其高度，要將自適應(yīng)網(wǎng)格添加到Kendo UI移動應(yīng)用程序中，請將各個視圖的拉伸配置設(shè)置為true，然后將100％的高度應(yīng)用于網(wǎng)格?；蛘叨x一個明確的像素網(wǎng)格高度，并省略面板拉伸選項。

重要提示：在Kendo移動應(yīng)用程序中使用網(wǎng)格的自適應(yīng)渲染時，請應(yīng)用我們Less-based的主題。

下面的示例演示如何應(yīng)用Stretch選項。

<div id="foo" data-role="view" data-init="onInit" data-stretch="true">
<div id="grid"></div>
</div>

<script>
var gridConfig = {
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
columnMenu: true,
mobile: "phone",
height: "100%"
};

function onInit() {
$("#grid").kendoGrid(gridConfig);
}

var app = new kendo.mobile.Application();
</script>

下面的示例演示如何應(yīng)用height選項。

<div id="foo" data-role="view" data-init="onInit">
<div id="grid"></div>
</div>

<script>
var gridConfig = {
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
columnMenu: true,
mobile: "phone",
height: "140px" //grid will be 140px height
};

$("#grid").kendoGrid(gridConfig);
</script>

調(diào)整列大小

當(dāng)用戶將手指放在相應(yīng)的列標(biāo)題上時，將觸發(fā)觸摸屏設(shè)備上的列大小調(diào)整功能。 當(dāng)出現(xiàn)調(diào)整大小圖標(biāo)時，用戶可以通過拖動來調(diào)整列的大小。

圖1：在移動設(shè)備上具有可調(diào)整大小的列的網(wǎng)格

破壞自適應(yīng)網(wǎng)格

在自適應(yīng)模式下，網(wǎng)格將生成輔助標(biāo)記，如果要手動銷毀小部件，則需要將其刪除。

手動銷毀網(wǎng)格：

1. 在圍繞Grid小部件創(chuàng)建的最近的.k-pane-wrapper ancestor上調(diào)用kendo.destroy() ；

2. 從DOM中刪除整個.k-pane-wrapper元素。

要重新創(chuàng)建Grid，請在最初放置Grid div的同一位置插入一個新的div。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

名稱欄目：Web界面開發(fā)工具KendoUI是怎樣自適應(yīng)渲染
當(dāng)前地址：http://chinadenli.net/article42/pijdhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站改版、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計公司、網(wǎng)頁設(shè)計公司、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)