溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么使用JavaScript的HTML控件”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么使用JavaScript的HTML控件”吧！
將新功能添加到 Windows 應(yīng)用商店應(yīng)用，例如自定義命令和和增強導(dǎo)航支持，以及 Windows 8.1 Preview 中的全新 HTML 和 JavaScript 控件。 對現(xiàn)有控件的更新可使這些控件更易于使用和添加更多功能，如拖放操作支持。 這些新控件和控件更新讓創(chuàng)建功能齊全的應(yīng)用變得***的簡單。
新控件和控件更新
Windows 8.1 Preview 和適用于 JavaScript 2.0 Preview 的 Windows 庫中引入了以下新控件和功能：
AppBarCommand
BackButton
Hub（中心）
ItemContainer
NavBar
Repeater
WebView
Windows 8.1 Preview 和適用于 JavaScript 2.0 Preview 的 Windows 庫中包括這些現(xiàn)有控件的更新：
對 ListView 的拖放操作支持
對 ListView 中的項目重新排序
新 ListView 布局：CellSpanningLayout
其他 ListView 更新
其他 Windows JavaScript 庫更新
使用適用于 JavaScript 2.0 Preview 的 Windows 庫
新的 Microsoft Visual Studio 2013 Preview 項目中會自動包含適用于 JavaScript 2.0 Preview 的 Windows 庫。若要在使用 Windows 8 創(chuàng)建的項目中使用適用于 JavaScript 2.0 Preview 的 Windows 庫，請將你的現(xiàn)有適用于 JavaScript 1 的 Windows 庫引用替換為
<!-- WinJS style sheets (include one) --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet"> <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet"> <!-- WinJS code --> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
對適用于 JavaScript 2.0 Preview 的 Windows 庫的引用。
<!-- WinJS style sheets (include one) --> <link rel="stylesheet" href="//Microsoft.WinJS.2.0.Preview/css/ui-dark.css" /> <link rel="stylesheet" href="//Microsoft.WinJS.2.0.Preview/css/ui-light.css" /> <!-- WinJS code --> <script src="//Microsoft.WinJS.2.0.Preview/js/base.js"></script> <script src="//Microsoft.WinJS.2.0.Preview/js/ui.js"></script>
Visual Studio 2013 Preview 可以自動為你升級項目，你也可以手動完成以下更新：
向項目中添加對適用于 JavaScript 的 Windows 8.1 庫的引用。
在你的應(yīng)用清單中，將 OSMinVersion 和 OSMaxVersionTested 值更新為 6.3.0：
<Prerequisites> <OSMinVersion>6.3.0</OSMinVersion> <OSMaxVersionTested>6.3.0</OSMaxVersionTested> </Prerequisites>
AppBarCommand
在 Windows 8.1 Preview 中，你可以使用一種名為“內(nèi)容”的新型 AppBarCommand 在使用 JavaScript 的 Windows 應(yīng)用商店應(yīng)用中創(chuàng)建自定義應(yīng)用欄命令。
此功能通過允許你在 commands 布局中放置自定義內(nèi)容，從而簡化了使用自定義內(nèi)容創(chuàng)建應(yīng)用欄的過程。你可以利用對使用自定義內(nèi)容的應(yīng)用欄命令的全面內(nèi)置支持，包括鍵盤操作、命令定位，以及用于動態(tài)顯示和隱藏命令的動畫。
放入到 commands 布局中后，內(nèi)容類型 AppBarCommand 支持很多與默認(rèn)應(yīng)用欄命令相同的功能。
在默認(rèn)應(yīng)用欄命令和自定義 AppBarCommand 之間已啟用鍵盤操作（Tab 鍵、箭頭鍵、Home 鍵以及 End 鍵）。
新的內(nèi)容類型 AppBarCommand 能夠正常使用應(yīng)用欄可伸縮性。應(yīng)用在被縮小之后會動態(tài)放棄文本標(biāo)簽。
BackButton
Windows 8.1 Preview 和適用于 JavaScript 2.0 Preview 的 Windows 庫會以應(yīng)用的控件形式向平臺中添加更多導(dǎo)航支持。這些控件之一就是 BackButton。
BackButton 為你提供一個向自己的應(yīng)用中添加向后導(dǎo)航功能的簡單方法。創(chuàng)建一個 BackButton 控件很簡單。
<button data-win-control="WinJS.UI.BackButton" ></button>
BackButton 會自動檢查導(dǎo)航堆棧，以確定用戶是否可以向后導(dǎo)航。如果沒有可向后導(dǎo)航的內(nèi)容，此按鈕會自動禁用。當(dāng)用戶單擊此按鈕或使用鍵盤快捷方式（如 Alt+ 向左鍵或 BrowserBack 鍵）時，它會自動調(diào)用 WinJS.Navigation.back 函數(shù)以向后導(dǎo)航。你無需編寫任何代碼。
Hub（中心）
為了幫助提供更一致的導(dǎo)航體驗，Windows 8.1 Preview 和適用于 JavaScript 2.0 Preview 的 Windows 庫添加了 Hub 控件。
很多 Windows 應(yīng)用商店應(yīng)用都使用中心導(dǎo)航模式，即一種分層的導(dǎo)航系統(tǒng)。此模式最適合具有大量內(nèi)容或許多不同部分內(nèi)容供用戶瀏覽的應(yīng)用。
中心設(shè)計的實質(zhì)是將內(nèi)容分為不同的部分和不同級別的詳細(xì)信息。 中心頁是用戶進入應(yīng)用的入口點。此處的內(nèi)容顯示在一個水平平移或垂直平移的平移視圖中，這樣用戶一眼就能看見新增內(nèi)容和可用功能。 中心由不同類別的內(nèi)容構(gòu)成，每個類別映射到應(yīng)用的部分頁中。每個部分都應(yīng)該顯示內(nèi)容或功能。中心應(yīng)該提供許多可以看到的變化，吸引用戶，并將他們吸引到應(yīng)用的各個部分。
有了 Windows 8.1 Preview，Hub 控件可使創(chuàng)建中心頁更容易。若要開始快速創(chuàng)建帶有 Hub 頁的應(yīng)用，請使用 Visual Studio 2013 Preview 中的“中心應(yīng)用”模板。
創(chuàng)建中心
若要創(chuàng)建中心，你需要為中心包含的每個部分添加一個 Hub 控件和一個 HubSection 對象。每個 HubSection 都可以包含任何類型的內(nèi)容，包括其他 Windows JavaScript 庫控件。你可以使用 header 屬性來指定節(jié)標(biāo)題。部分頭文件可為靜態(tài)或交互文件。交互式頭文件顯示可隱藏的 V 形圖標(biāo)，并在用戶與它們交互時提升事件。
以下示例定義了一個包含三個部分的 Hub。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>hubPage</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.2.0.Preview/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.2.0.Preview/js/base.js"></script> <script src="//Microsoft.WinJS.2.0.Preview/js/ui.js"></script> <link href="/css/default.css" rel="stylesheet" /> <link href="/pages/hub/hub.css" rel="stylesheet" /> <script src="/js/data.js"></script> <script src="/pages/hub/hub.js"></script> </head> <body> <div class="hubpage fragment"> <header aria-label="Header content" role="banner"> <button data-win-control="WinJS.UI.BackButton"></button> <h2 class="titlearea win-type-ellipsis"> <span class="pagetitle">Hub example</span> </h2> </header> <section class="hub" aria-label="Main content" role="main" data-win-control="WinJS.UI.Hub"> <!-- Customize the Hub control by modifying the HubSection controls here. --> <div class="section1" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section1'} }"> <img src="/images/gray.png" width="420" height="280" /> <div class="subtext win-type-x-large secondary-text" data-win-res="{ textContent: 'Section1Subtext' }"></div> <div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div> <div class="win-type-small secondary-text"> <span data-win-res="{ textContent: 'Section1Description' }"></span> <span data-win-res="{ textContent: 'Section1Description' }"></span> <span data-win-res="{ textContent: 'Section1Description' }"></span> </div> </div> <div class="section2" data-win-control="WinJS.UI.HubSection" data-win-res="{ winControl: {'header': 'Section2'} }" data-win-options="{ onheaderinvoked: HubPage.section2HeaderNavigate }"> <div class="itemTemplate" data-win-control="WinJS.Binding.Template"> <img src="#" data-win-bind="src: backgroundImage; alt: title" /> <div class="item-text"> <div class="win-type-medium" data-win-bind="textContent: title"></div> <div class="win-type-xx-small secondary-text" data-win-bind="textContent: subtitle"></div> <div class="win-type-small secondary-text" data-win-bind="textContent: description"></div> </div> </div> <div class="itemslist" data-win-control="WinJS.UI.ListView" data-win-options="{ layout: {type: WinJS.UI.ListLayout2}, selectionMode: 'none', itemTemplate: select('.section2 .itemTemplate'), itemDataSource: HubPage.section2DataSource, oniteminvoked: HubPage.section2ItemNavigate }"> </div> </div> <div class="section3" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section3'} }"> <div class="top-image-row"> <img src="/images/gray.png" /> </div> <div class="sub-image-row"> <img src="/images/gray.png" /> <img src="/images/gray.png" /> <img src="/images/gray.png" /> </div> <div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div> <div class="win-type-small secondary-text"> <span data-win-res="{ textContent: 'Section3Description' }"></span> <span data-win-res="{ textContent: 'Section3Description' }"></span> </div> </div> </section> </div> </body> </html>該代碼創(chuàng)建此頁面。
單擊第二個標(biāo)題時，應(yīng)用會轉(zhuǎn)到第二頁。
以下代碼執(zhí)行導(dǎo)航。
(function () { "use strict"; var nav = WinJS.Navigation; var session = WinJS.Application.sessionState; var util = WinJS.Utilities; // Get the groups used by the data-bound sections of the hub. var section2Group = Data.resolveGroupReference("group1"); var section5Group = Data.resolveGroupReference("group6"); WinJS.UI.Pages.define("/pages/hub/hub.html", { // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { var hub = element.querySelector(".hub").winControl; hub.onloadingstatechanged = function (args) { if (args.srcElement === hub.element && args.detail.loadingState === "complete") { this._hubReady(hub); hub.onloadingstatechanged = null; } }.bind(this); hub.onheaderinvoked = function (args) { args.detail.section.onheaderinvoked(args); }; // TODO: Initialize the page here. }, unload: function () { // TODO: Respond to navigations away from this page. session.hubScroll = document.querySelector(".hub").winControl.scrollPosition; }, updateLayout: function (element, viewState, lastViewState) { /// <param name="element" domElement="true" /> // TODO: Respond to changes in viewState. }, _hubReady: function (hub) { /// <param name="hub" type="WinJS.UI.Hub" /> WinJS.Resources.processAll(); if (typeof session.hubScroll === "number") { hub.scrollPosition = session.hubScroll; } // TODO: Initialize the hub sections here. }, }); function createHeaderNavigator(group) { return util.markSupportedForProcessing(function (args) { nav.navigate("/pages/section/section.html", { title: this.header, groupKey: group.key }); }); } function createItemNavigator(group) { var items = Data.getItemsFromGroup(group); return util.markSupportedForProcessing(function (args) { var item = Data.getItemReference(items.getAt(args.detail.itemIndex)); nav.navigate("/pages/item/item.html", { item: item }); }); } function getItemsDataSourceFromGroup(group) { return Data.getItemsFromGroup(group).dataSource; } WinJS.Namespace.define("HubPage", { section2DataSource: getItemsDataSourceFromGroup(section2Group), section2HeaderNavigate: createHeaderNavigator(section2Group), section2ItemNavigate: createItemNavigator(section2Group), section5DataSource: getItemsDataSourceFromGroup(section5Group), section5ItemNavigate: createItemNavigator(section5Group) }); })();你甚至可使用 Hub 控件和 SemanticZoom 控件。有關(guān)此控制和更多的示例，請參閱 HTML 中心控件示例。
ItemContainer
新的 ItemContainer 控件可簡化創(chuàng)建交互式元素的過程，這些元素提供了輕掃、拖放以及懸停功能。只需將你的內(nèi)容放到 ItemContainer 中即可。ItemContainer 可以包含標(biāo)準(zhǔn) HTML 元素，甚至其他 Windows JavaScript 庫控件。
ItemContainer 很靈活，從而使其非常適合很多用途，如創(chuàng)建內(nèi)容豐富的復(fù)選框組、導(dǎo)航按鈕，以及購物車表示。
當(dāng)你希望顯示項目，但又不需要使用全部 ListView 功能時，可以使用 ItemContainer 控件。
使用 ItemContainer
以下示例將創(chuàng)建兩個 ItemContainer 對象，并將它們的 tapBehavior 屬性設(shè)置為 toggleSelect 以便可以被選擇。
<div id="item1" data-win-control="WinJS.UI.ItemContainer" data-win-options="{tapBehavior: 'toggleSelect'}" style="width: 300px;"> <div style="margin: 10px; padding: 10px; background-color: lightgray"> <div class="win-type-x-large" style="margin-bottom: 5px;"> Banana </div> <img src="/images/60banana.png"> <div>Frozen yogurt</div> </div> </div> <div id="item2" data-win-control="WinJS.UI.ItemContainer" data-win-options="{tapBehavior: 'toggleSelect'}" style="width: 300px;"> <div style="margin: 10px; padding: 10px; background-color: lightgray"> <div class="win-type-x-large" style="margin-bottom: 5px;"> Strawberry </div> <img src="/images/60Strawberry.png"> <div>Ice cream</div> </div> </div>
你還可以將一個 ItemContainer 與一個 Repeater 控件一起使用以從 List 生成項目：只需將 ItemContainer 放入你的 Template 控件中即可。
<div id="itemTemplate" data-win-control="WinJS.Binding.Template"> <div data-win-control="WinJS.UI.ItemContainer" data-win-options="{tapBehavior: WinJS.UI.TapBehavior.toggleSelect}" style="width: 300px;"> <div style=" margin: 10px; padding: 10px; background-color: lightgray"> <div class="win-type-x-large" style="margin-bottom: 5px;" data-win-bind="textContent: title"></div> <img src="#" data-win-bind="src: image"> <div data-win-bind="textContent: desc"></div> </div> </div> </div> <div data-win-control="WinJS.UI.Repeater" data-win-options="{data: ItemContainerExample.flavorList, template: select('#itemTemplate')}"> </div>以下示例定義了數(shù)據(jù)源。
(function () { "use strict"; var basicList = new WinJS.Binding.List( [ { title: "Banana blast", desc: 'Frozen yogurt', image: '/images/60Banana.png' }, { title: "Strawberry swirl", desc: 'Ice cream', image: '/images/60Strawberry.png' }, { title: "Magnificant mint", desc: 'Frozen yogurt', image: '/images/60Mint.png' }, { title: "Lemon lift", desc: 'Frozen yogurt', image: '/images/60Lemon.png' } ]); WinJS.Namespace.define("ItemContainerExample", { flavorList: basicList }); })();
默認(rèn)情況下可以選擇項目。若要禁用選擇，請將 ItemContainer 控件的 selectionDisabled 屬性設(shè)置為 true。
[立即獲取 HTML NavBar 控件示例。]
Windows 8.1 Preview 和適用于 JavaScript 2.0 Preview 的 Windows 庫中引入了以下新控件，以幫助你提供一致且可預(yù)測的導(dǎo)航體驗：WinJS.UI.NavBar 控件。
NavBar 類似于專用于導(dǎo)航命令的 AppBar。（實際上，NavBar 是 AppBar 的子類。）它可以包含一系列簡單的鏈接，也可以包含分類顯示的多個級別的鏈接。你可以使用以下方法填充 NavBar：硬編碼條目、以編程方式更新它，或者使用數(shù)據(jù)綁定。
NavBar 會在用戶需要時顯示在應(yīng)用屏幕的頁首。用戶可以通過以下方式調(diào)用 NavBar：執(zhí)行邊緣輕掃、按 Windows 徽標(biāo)鍵 + Z，或者右鍵單擊。
NavBar 還支持垂直布局和拆分的導(dǎo)航項（具有子導(dǎo)航選項的導(dǎo)航項）。NavBar 是一個高度可自定義的對象：你可以使用級聯(lián)樣式表 (CSS) 設(shè)計 NavBar 及其內(nèi)容的幾乎所有方面的樣式，還可以創(chuàng)建自定義導(dǎo)航項。
創(chuàng)建 NavBar
NavBar 包括三個組件：
NavBar 自身。
NavBarContainer 對象，它包含導(dǎo)航項（NavBarCommand 對象），并支持分頁以及平移和滾動。在一個 NavBar 中可以包含一個或多個 NavBarContainer 對象?？梢允褂?NavBarContainer 對象來定義導(dǎo)航選項組。
一個或多個 NavBarCommand 對象。 這些是用戶單擊可以導(dǎo)航的內(nèi)容。
若要啟用導(dǎo)航，你可以設(shè)置 NavBarCommand 對象的 location 屬性。用戶單擊命令時，WinJS.Navigation.navigated 事件啟動。 使用此事件導(dǎo)航到指定的位置。
也可以在 NavBar 上注冊 oninvoked 事件，并使用你的事件處理程序執(zhí)行導(dǎo)航操作。
以下示例顯示了一個包含兩個導(dǎo)航項的簡單 NavBar。
<div id="NavBar" data-win-control="WinJS.UI.NavBar"> <div id="GlobalNav" data-win-control="WinJS.UI.NavBarContainer"> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: WinJS.UI.AppBarIcon.home, location: '/html/home.html', splitButton: false }"> </div> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Your apps', icon: WinJS.UI.AppBarIcon.favorite, location: '/html/yourapps.html', splitButton: false }"> </div> </div> </div>NavBar 如下所示。
可創(chuàng)建包含子 NavBarCommand 對象的 NavBarCommand。要這樣做，請將父 NavBarCommand 對象的 splitButton 屬性設(shè)置為 true，然后使用 splittoggle 事件顯示一個包含子 NavBarCommand 對象的 Flyout。此處是其***個部分的示例代碼。
<div id="useSplit" data-win-control="WinJS.UI.NavBar"> <div class="globalNav" data-win-control="WinJS.UI.NavBarContainer"> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }"> </div> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Favorite', icon: WinJS.UI.AppBarIcon.favorite, splitButton: 'true' }"> </div> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Your account', icon: WinJS.UI.AppBarIcon.people }"> </div> </div> </div> <div id="contactFlyout" data-win-control="WinJS.UI.Flyout" data-win-options="{ placement: 'bottom' }"> <div id="contactNavBarContainer" data-win-control="WinJS.UI.NavBarContainer"}"> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Family' }"> </div> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Work' }"> </div> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Friends' }"> </div> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Blocked' }"> </div> </div> </div>下一個示例顯示了可初始化 HTML 頁面，并添加 splittoggle 事件處理程序的代碼，此事件處理程序可顯示包含子 NavBarCommand 對象的 Flyout。
(function () { "use strict"; var navcontainer; var page = WinJS.UI.Pages.define("/html/6-UseSplitButton.html", { ready: function (element, options) { document.body.querySelector('#useSplit').addEventListener('invoked', this.navbarInvoked.bind(this)); document.body.querySelector('#contactNavBarContainer').addEventListener('invoked', this.navbarInvoked.bind(this)); var navBarContainerEl = document.body.querySelector('#useSplit .globalNav'); if (navBarContainerEl) { this.setupNavBarContainer(); } else { var navBarEl = document.getElementById('useSplit'); navBarEl.addEventListener('childrenprocessed', this.setupNavBarContainer.bind(this)); } }, navbarInvoked: function (ev) { var navbarCommand = ev.detail.navbarCommand; WinJS.log && WinJS.log(navbarCommand.label + " NavBarCommand invoked", "sample", "status"); document.querySelector('select').focus(); }, setupNavBarContainer: function () { var navBarContainerEl = document.body.querySelector('#useSplit .globalNav'); navBarContainerEl.addEventListener("splittoggle", function (e) { var flyout = document.getElementById("contactFlyout").winControl; var navbarCommand = e.detail.navbarCommand; if (e.detail.opened) { flyout.show(navbarCommand.element); var subNavBarContainer = flyout.element.querySelector('.win-navbarcontainer'); if (subNavBarContainer) { // Switching the navbarcontainer from display none to display block requires // forceLayout in case there was a pending measure. subNavBarContainer.winControl.forceLayout(); // Reset back to the first item. subNavBarContainer.currentIndex = 0; } flyout.addEventListener('beforehide', go); } else { flyout.removeEventListener('beforehide', go); flyout.hide(); } function go() { flyout.removeEventListener('beforehide', go); navbarCommand.splitOpened = false; } }); } }); })();拆分按鈕打開時的 NavBar 如下所示：
你可以將 NavBarContainer 綁定到數(shù)據(jù)源。為此，請創(chuàng)建一個包含描述導(dǎo)航命令的數(shù)據(jù)的 List，并將該列表用于設(shè)置 NavBarContainer 對象的 data 屬性。以下示例定義供 NavBarContainer 使用的數(shù)據(jù)。
(function () { "use strict"; var page = WinJS.UI.Pages.define("/html/2-UseData.html", { init: function (element, options) { var categoryNames = ["Picks for you", "Popular", "New Releases", "Top Paid", "Top Free", "Games", "Social", "Entertainment", "Photo", "Music & Video", "Sports", "Books & Reference", "News & Weather", "Health & Fitness", "Food & Dining", "Lifestyle", "Shopping", "Travel", "Finance", "Productivity", "Tools", "Secuirty", "Business", "Education", "Government"]; var categoryItems = []; for (var i = 0; i < categoryNames.length; i++) { categoryItems[i] = { label: categoryNames[i] }; } Data.categoryList = new WinJS.Binding.List(categoryItems); }, ready: function (element, options) { document.body.querySelector('#useTemplate').addEventListener('invoked', this.navbarInvoked.bind(this)); }, navbarInvoked: function (ev) { var navbarCommand = ev.detail.navbarCommand; WinJS.log && WinJS.log(navbarCommand.label + " NavBarCommand invoked", "sample", "status"); document.querySelector('select').focus(); } }); })();下一個示例顯示了可創(chuàng)建 NavBar 和 NavBarContainer 對象的 HTML。
div id="useTemplate" data-win-control="WinJS.UI.NavBar"> <div class="globalNav" data-win-control="WinJS.UI.NavBarContainer"> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }"> </div> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Favorite', icon: 'favorite' }"></div> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Your account', icon: 'people' }"></div> </div> <div class="categoryNav" data-win-control="WinJS.UI.NavBarContainer" data-win-options="{ data: Data.categoryList, maxRows: 3 }"> </div> </div>運行此代碼時，它會創(chuàng)建此 NavBar。
盡管此處沒有顯示，你仍可以使用 WinJS.Binding.Template 對象和數(shù)據(jù)源來生成導(dǎo)航欄項目。
Repeater
Repeater 是一個簡單易用的 Windows JavaScript 庫控件，該控件使用模板從一組數(shù)據(jù)中生成 HTML 標(biāo)記。此模板可以包含幾乎所有 HTML 標(biāo)記和 Windows JavaScript 庫控件。你甚至可以在 Repeater 控件中嵌套 Repeater 控件。
使用 Repeater 可以生成自定義列表和表格。以下是一個由 Repeater 創(chuàng)建的天氣預(yù)報示例。
Repeater 不是 ListView 控件的替代控件。它更靈活，但卻不提供 ListView 所具備的一些高級功能，比如對如何加載數(shù)據(jù)項的控制。
Repeater 從 List 中生成其數(shù)據(jù)。以下示例將創(chuàng)建一個包含一些簡單項的 List。
(function () { "use strict"; var basicList2 = new WinJS.Binding.List( [ { title: "Item 1" }, { title: "Item 2" }, { title: "Item 3" }, { title: "Item 4" } ]); WinJS.Namespace.define("RepeaterExample", { basicList: basicList2 }); })();要指定 Repeater 生成的標(biāo)記，你可以定義一個 template。你可以創(chuàng)建一個標(biāo)記模板或使用模板化功能。此示例可創(chuàng)建標(biāo)記模板。 它通過數(shù)據(jù)綁定的方式將數(shù)據(jù)源的標(biāo)題域綁定到 li 元素的文本內(nèi)容。
<div id="listTemplate" data-win-control="WinJS.Binding.Template"> <li data-win-bind="textContent: title"></li> </div>
下一示例將創(chuàng)建 Repeater 自身。
<ul data-win-control="WinJS.UI.Repeater" data-win-options="{data: RepeaterExample.basicList, template: select('#listTemplate')}"> </ul>當(dāng)你運行此應(yīng)用時，Repeater 會為數(shù)據(jù)列表中的每一項生成一個 li 元素。
帶有 SmartScreen 篩選器的 WebView
在 Windows 8 中，你可以使用 iframe 元素來托管基于 Web 的內(nèi)容，但它無法提供很多內(nèi)容隔離或?qū)Ш焦δ?。Windows 8.1 Preview 中引入了新的 WebView 控件，此控件可大大簡化托管你的應(yīng)用中基于 Web 內(nèi)容的過程。
以下是一些 WebView 通過使用 iframe 顯示基于 Web 的內(nèi)容提供的改進：
支持 HTML5
WebView 中托管的頁面可訪問大部分 HTML5 功能。（但是WebView 不能訪問 IndexedDB、HTML5 應(yīng)用緩存、地理位置 API 及 Clipboard API。）
改進的導(dǎo)航支持
WebView 有其自己單獨的歷史記錄堆棧，并提供多種向前導(dǎo)航，向后導(dǎo)航，以及重新加載當(dāng)前頁的方法。
支持在幀中無法使用的站點
WebView 可以顯示在 frame 或 iframe 元素中無法使用的站點。
若要創(chuàng)建 WebView 控件，你需要創(chuàng)建一個 x-ms-webview 元素。
<x-ms-webview id="webview"> </x-ms-webview>
你可以通過多種方式使用 WebView 加載內(nèi)容：
使用 WebView 控件的 src 屬性、navigate 方法或 navigateWithHttpRequestMessage 方法導(dǎo)航到 URI。 本例使用 src 屬性導(dǎo)航到 URI。
<x-ms-webview id="webview" src="http://go.microsoft.com/fwlink/?LinkId=294155" style="width: 400px; height: 400px;"> </x-ms-webview>
使用 navigateToString 方法來加載任意 HTML 字符串。
var htmlString = "<!DOCTYPE html>" + "<html>" + "<head><title>Simple HTML page</title></head>" + "<body>" + "<h2>Hi!</h2>" + "<p>This is a simple HTML page.</p>" + "</body>" + "</html>"; document.getElementById("webview").navigateToString( htmlString);你可以使用 navigate 方法和 ms-appdata:// 協(xié)議來加載存儲在應(yīng)用的狀態(tài)文件夾中的 HTML 內(nèi)容。
document.getElementById("webview").navigate( "ms-appdata:///local/NavigateToState/simple_example.html");對于基于 HTML 的文件格式，它有時可以用于根據(jù)需要流式傳輸相對引用，如 WebView 控件本身無法呈現(xiàn)的加密 HTML 內(nèi)容。使用 buildLocalStreamUri 和 navigateToLocalStreamUri 方法來顯示媒體流中的內(nèi)容。（你還必須實施一個使用 IUriToStreamResolver 接口的自定義 Windows 運行時對象。）
var contentUri = document.getElementById("webview").buildLocalStreamUri( "NavigateToStream", "simple_example.html"); var uriResolver = new SDK.WebViewSampleCS.StreamUriResolver(); document.getElementById("webview").navigateToLocalStreamUri(contentUri, uriResolver);對 ListView 的拖放操作支持
對于適用于 JavaScript 2.0 Preview 的 Windows 庫，ListView 添加了對拖放操作的支持。這個新的支持與 HTML 5 拖放操作兼容。你可以在兩個 ListView 控件之間，在一個 ItemContainer 和一個 ListView 之間，以及在任何 HTML 元素和 ListView 之間進行拖動。你可以通過在添加新項目后重新排序 ListView 控件的項目，讓用戶將項目拖放到 ListView 中的特定位置，也可以控制將拖放的項目插入到哪里。
從 ListView 拖動項目
若要啟用將 ListView 中的項目拖動到 HTML 5 中的某個目標(biāo)位置的操作，請完成以下操作：
將 ListView 的 itemsDraggable 屬性設(shè)置為 true。
處理 ListView 控件的 itemdragstart 事件。在你的事件處理程序中，從事件對象的 detail 屬性中獲取一個 dataTransfer 對象。使用 dataTransfer 對象的 setData 方法來指定如何傳輸數(shù)據(jù)，以及傳輸哪些數(shù)據(jù)。
處理拖放目標(biāo)的 dragover 事件。在你的事件處理程序中，使用 event 對象的 preventDefault 方法來告知系統(tǒng)你可接受拖放操作。否則，拖放目標(biāo)將不接受拖放操作。
處理拖放目標(biāo)的 drop 事件。在你的事件處理程序中，從事件對象的 detail 屬性中獲取一個 dataTransfer 對象。使用 dataTransfer 對象的 getData 屬性檢索傳輸?shù)臄?shù)據(jù)。使用此數(shù)據(jù)來更新拖放目標(biāo)。 請謹(jǐn)慎操作，不要接受來自你的應(yīng)用中本身可拖動項目的拖放內(nèi)容，如選擇的文本和 img 元素。
以下一組示例說明了如何啟用從 ListView 中拖動項目的操作。***個示例定義了 HTML 標(biāo)記。
<div id="myDropTarget" class="DnDItem"> <div id="myTargetContents"> <p> HTML 5 Drop Target </p> <br /> <div id="myPlusSign" class="drop-ready">+ </div> <br /> <p> Drop Items Here </p> </div> </div> <!-- Simple template for the ListView instantiation --> <div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> <div class="smallListIconTextItem"> <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" draggable="false" /> <div class="smallListIconTextItem-Detail"> <h5 data-win-bind="innerText: title"></h5> <h7 data-win-bind="innerText: text"></h7> </div> </div> </div> <!-- The declarative markup necessary for ListView instantiation --> <!-- Call WinJS.UI.processAll() in your initialization code --> <div id="listView" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.dataSource, selectionMode: 'none', itemTemplate: smallListIconTextTemplate, itemsDraggable: true, layout: { type: WinJS.UI.GridLayout } }"> </div>下面是拖放操作的 CSS。
.drop-ready #myPlusSign { opacity: 1; } #myPlusSign { font-size:100px; font-weight:bolder; color: blue; opacity: 0; }下一個示例顯示了可啟用拖放功能的代碼。
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/html/scenario2.html", {
ready: function (element, options) {
listView.addEventListener("itemdragstart", function (eventObject) {
eventObject.detail.dataTransfer.setData("Text", JSON.stringify(eventObject.detail.dragInfo.getIndices()));
});
var dropTarget = element.querySelector("#myDropTarget");
dropTarget.addEventListener("dragover", function (eventObject) {
// Allow HTML5 drops.
eventObject.preventDefault();
});
dropTarget.addEventListener("dragenter", function (eventObject) {
WinJS.Utilities.addClass(dropTarget, "drop-ready");
});
dropTarget.addEventListener("dragleave", function (eventObject) {
WinJS.Utilities.removeClass(dropTarget, "drop-ready");
});
dropTarget.addEventListener("drop", function (eventObject) {
// Get indicies -> keys of items that were trashed, and remove from datasource.
WinJS.Utilities.removeClass(dropTarget, "drop-ready");
var indexSelected = JSON.parse(eventObject.dataTransfer.getData("Text"));
var listview = document.querySelector("#listView").winControl;
var ds = listview.itemDataSource;
ds.itemFromIndex(indexSelected[0]).then(function (item) {
WinJS.log && WinJS.log("You dropped the item at index " + item.index + ", "
+ item.data.title, "sample", "status");
});
});
}
});
})();
若要將元素拖放到 ListView 中的某個特定位置，請完成以下操作：
將 HTML 元素（拖放源）的 draggable 屬性設(shè)置為 true。
處理拖放目標(biāo)的 dragstart 事件。 在你的事件處理程序中，從事件對象中獲取一個 dataTransfer 對象。使用 dataTransfer 對象的 setData 方法來指定如何傳輸數(shù)據(jù)，以及傳輸哪些數(shù)據(jù)。
處理 ListView 控件的 itemdragenter 事件。在你的事件處理程序中，使用 event 對象的 preventDefault 方法來告知系統(tǒng)你可接受放置操作。否則，拖動操作可能會產(chǎn)生無法預(yù)料的結(jié)果。
處理 ListView 控件的 itemdragdrop 事件。 在你的事件處理程序中，從事件對象的 detail 屬性中獲取一個 dataTransfer 對象。使用 dataTransfer 對象的 getData 屬性檢索傳輸?shù)臄?shù)據(jù)。使用此數(shù)據(jù)來更新 ListView。
以下一組示例說明了如何啟用將項目拖放到 ListView 中的操作。***個示例定義了 HTML 標(biāo)記。
<div id="myDragSource" class="DnDItem"> <div id="mySourceContents"> <p> HTML 5 Drag Source </p> <br /> <br /> <br /> <div id="myDragContent" class="smallListIconTextItem" draggable="true"> <img id="myImg" src="/images/60Tree.png" class="smallListIconTextItem-Image" draggable="false" /> <div class="smallListIconTextItem-Detail"> <h5 id="myItemTitle">Drag Me</h5> </div> </div> </div> </div> <!-- Simple template for the ListView instantiation --> <div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> <div class="smallListIconTextItem"> <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" draggable="false" /> <div class="smallListIconTextItem-Detail"> <h5 data-win-bind="innerText: title"></h5> <h7 data-win-bind="innerText: text"></h7> </div> </div> </div> <!-- The declarative markup necessary for ListView instantiation --> <!-- Call WinJS.UI.processAll() in your initialization code --> <div id="listView" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.dataSource, selectionMode: 'none', itemTemplate: smallListIconTextTemplate, itemsReorderable: true, layout: { type: WinJS.UI.GridLayout } }"> </div>下一個示例顯示了可啟用拖放功能的代碼。
(function () { "use strict"; var page = WinJS.UI.Pages.define("/html/scenario3.html", { ready: function (element, options) { myDragContent.addEventListener("dragstart", function (eventObject) { var dragData = { sourceElement: myDragContent.id, data: myItemTitle.innerText, imgSrc: myImg.src }; eventObject.dataTransfer.setData("Text", JSON.stringify(dragData)); }); listView.addEventListener("itemdragenter", function (eventObject) { if (eventObject.detail.dataTransfer.types.contains("Text")) { eventObject.preventDefault(); } }); listView.addEventListener("itemdragdrop", function (eventObject) { var dragData = JSON.parse(eventObject.detail.dataTransfer.getData("Text")); if (dragData && dragData.sourceElement === myDragContent.id) { var newItemData = { title: dragData.data, text: ("id: " + dragData.sourceElement), picture: dragData.imgSrc }; // insertAfterIndex tells us where in the list to add the new item. // If we're inserting at the start, insertAfterIndex is -1. // Adding 1 to insertAfterIndex gives us the nominal index in the array to insert the new item. myData.splice(eventObject.detail.insertAfterIndex + 1, 0, newItemData); } else { // Throw error that illegal content was dropped. } }); } }); })();對 ListView 中的項目重新排序
能夠重新排序內(nèi)容可幫助用戶增強控制感。 新的 itemsReorderable 屬性使用戶能夠輕松對 ListView 中的項目順序進行更改。只需將 itemsReorderable 設(shè)置為 true 即可允許用戶在 ListView 中拖放項目；無需其他代碼。
Note 若要在一個分組的 ListView 中完全啟用重新排序項目操作，你還必須對 itemdragdrop 事件做出響應(yīng)，并將項目插入到正確位置。
Note 若要使重新排序操作順利進行，你的數(shù)據(jù)源必須支持重新排序。
以下示例將創(chuàng)建一個支持項目重新排序的 ListView。
<style type="text/css"> .win-listview { margin: 20px; border: 2px solid gray; Width: 500px; } .standardItem { width: 150px; height: 150px; background-color: #0aaddd; padding: 5px; } </style> <div id="template" data-win-control="WinJS.Binding.Template"> <div class="standardItem" data-win-bind="textContent: title" ></div> </div> <div id="reorderableListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: ListViewExamples.dataList.dataSource, itemTemplate: select('#template'), layout: {type: WinJS.UI.GridLayout}, itemsReorderable: true }"> </div>下一個示例定義了 ListView 使用的數(shù)據(jù)源。
(function () { "use strict"; var dataList = new WinJS.Binding.List( [{ title: "Item 1" }, { title: "Item 2" }, { title: "Item 3" }, { title: "Item 4" }]); WinJS.Namespace.define("ListViewExamples", { dataList: dataList }) })();代碼運行時，用戶可以通過拖動 ListView 項目來對項目進行重新排序。
新 ListView 布局：CellSpanningLayout
使用適用于 JavaScript 1.0 的 Windows 庫時，如果你希望 ListView 獲取大小不同的項目，可以使用 GridLayout。對于適用于 JavaScript 2.0 Preview 的 Windows 庫，我們添加了一個專門用于創(chuàng)建大小不同網(wǎng)格的新布局：CellSpanningLayout。
以下示例為使用 CellSpanningLayout 的 ListView 定義了數(shù)據(jù)源，以及 itemInfo 和 groupInfo 方法。ListView 中的***個項目***為 510 像素，除此之外的所有其他項目大小均為 250 像素 X 250 像素。
(function () { "use strict"; var unorderedList = new WinJS.Binding.List( [{ title: "Item 1", cssClass: "tallItem" }, { title: "Item 2", cssClass: "standardItem" }, { title: "Item 3", cssClass: "standardItem" }, { title: "Item 4", cssClass: "standardItem" }]); function myItemInfo(itemIndex) { var size = { width: 250, height: 250 }; if (itemIndex === 0) { size.height = 510; } return size; }; function myGroupInfo(groupInfo) { return { enableCellSpanning: true, cellWidth: 250, cellHeight: 250 }; }; WinJS.Utilities.markSupportedForProcessing(myItemInfo); WinJS.Utilities.markSupportedForProcessing(myGroupInfo); WinJS.Namespace.define("ListViewExamples", { unorderedList: unorderedList, myItemInfo: myItemInfo, myGroupInfo: myGroupInfo }) })();下一個示例顯示了用于創(chuàng)建 ListView 和 WinJS.Binding.Template 的 HTML。
<style type="text/css"> .win-listview { margin: 5px; border: 2px solid gray; } .standardItem { width: 250px; height: 250px; background-color: #999999; padding: 5px; } .tallItem { width: 250px; height: 510px; background-color: #0aaddd; padding: 5px; } </style> <div id="template" data-win-control="WinJS.Binding.Template"> <div data-win-bind="className: cssClass; textContent: title" ></div> </div> <div id="cellSpanningListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: ListViewExamples.unorderedList.dataSource, itemTemplate: select('#template'), layout: {type: WinJS.UI.CellSpanningLayout, itemInfo: ListViewExamples.myItemInfo, groupInfo: ListViewExamples.myGroupInfo} }"> </div>ListView 如下所示。
其他 ListView 更新
Windows 8.1 Preview 包括對 ListView 控件的更多改進。
改進了頭文件的可訪問性
分組的 ListView 中的標(biāo)題現(xiàn)在支持鍵盤導(dǎo)航，以及鍵盤和鼠標(biāo)插入。你無需進行任何代碼更改即可獲取這些新功能。
（有關(guān)創(chuàng)建組的詳細(xì)信息，請參閱如何對 ListView 中的項進行分組。）
Note 如果你通過在適用于 JavaScript 1.0 的 Windows 庫中包含鏈接或按鈕而將頭文件設(shè)置為不可調(diào)用，則當(dāng)你切換到適用于 JavaScript 2.0 Preview 的 Windows 庫時，用戶將無法使用鍵盤調(diào)用此頭文件。 若要解決此問題，請?zhí)幚?ongroupheaderinvoked 事件，并使用此事件來執(zhí)行頭文件操作，而不是使用按鈕或鏈接。
對布局接口的更新
ListView 現(xiàn)在有一組新的布局接口，使你能夠更輕松地創(chuàng)建自己的自定義布局：ILayout2 和 ISiteLayout2。實現(xiàn)這些接口時，你可以將標(biāo)準(zhǔn) CSS 布局用作你的實現(xiàn)的一部分。
ListLayout 和 GridLayout 更新
我們已更新 ListLayout 和 GridLayout 以提高它們的整體性能，尤其是平移性能。你無需進行任何代碼更改即可利用這些改進。
其他 Windows JavaScript 庫更新
綁定和 WinJS.Binding.Template 更新
適用于 JavaScript 2.0 Preview 的 Windows 庫使用一個更加高效的新系統(tǒng)來處理 Template 對象，可顯著提高性能。這個新系統(tǒng)可以使數(shù)據(jù)綁定和控件實例化過程更為流暢，并且可以并行完成，而無需再像使用適用于 JavaScript 1.0 的 Windows 庫那樣需要串行完成。如果你的代碼依靠傳統(tǒng)串行處理行為，我們建議更改你的代碼以利用更快的模板處理。但如果你無法更改代碼，可使用 disableOptimizedProcessing 屬性恢復(fù)原行為。
釋放 API
釋放模型是一種新模式，它允許元素和控件在其生存期結(jié)束時釋放其資源，以防止內(nèi)存泄露。 元素或控件可以選擇實現(xiàn)此模式。有資源要釋放的適用于 JavaScript 2.0 Preview 的 Windows 庫控件現(xiàn)在可以實現(xiàn)此 API。
若要利用此釋放模型，請在不再需要此控件時調(diào)用該控件的 dispose 方法，比如，當(dāng)你導(dǎo)航離開某個頁面，或關(guān)閉應(yīng)用時。
感謝各位的閱讀，以上就是“怎么使用JavaScript的HTML控件”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么使用JavaScript的HTML控件這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼