Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use JavaScript's HTML control". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use JavaScript's HTML control".

Add new features to Windows App Store applications, such as custom commands and enhanced navigation support, as well as new HTML and JavaScript controls in Windows 8.1 Preview. Updates to existing controls make them easier to use and add more features, such as drag-and-drop support. These new controls and control updates make it easy to create fully functional applications.

New controls and control updates

The following new controls and features have been introduced in Windows 8.1 Preview and the Windows library for JavaScript 2.0 Preview:

AppBarCommand

BackButton

Hub (central)

ItemContainer

NavBar

Repeater

WebView

Updates to these existing controls are included in the Windows 8.1 Preview and the Windows library for JavaScript 2.0 Preview:

Drag and drop support for ListView

Reorder items in ListView

New ListView layout: CellSpanningLayout

Other ListView updates

Other Windows JavaScript library updates

Use the Windows library for JavaScript 2.0 Preview

The Windows library for JavaScript 2013 Preview is automatically included in the new Microsoft Visual Studio 2.0 Preview project. To use the Windows library for JavaScript 2.0 Preview in projects created with Windows 8, replace your existing Windows library reference for JavaScript 1 with

Reference to the Windows library for JavaScript 2.0 Preview.

Visual Studio 2013 Preview can automatically upgrade projects for you, or you can manually complete the following updates:

Add a reference to the Windows 8.1 library for JavaScript to the project.

In your application list, update the OSMinVersion and OSMaxVersionTested values to 6.3.0:

6.3.0 6.3.0

AppBarCommand

In Windows 8.1 Preview, you can use a new AppBarCommand called "content" to create custom application bar commands in Windows App Store apps that use JavaScript.

This feature simplifies the process of creating application bars using custom content by allowing you to place custom content in your commands layout. You can take advantage of full built-in support for application bar commands that use custom content, including keyboard operations, command positioning, and animations for dynamically showing and hiding commands.

When placed in the commands layout, the content type AppBarCommand supports many of the same features as the default application bar command.

Keyboard operations (Tab, arrow, Home, and End) are enabled between the default application bar command and the custom AppBarCommand.

The new content type AppBarCommand can use the scalability of the application bar normally. The text label is discarded dynamically after the application is scaled out.

BackButton

Windows 8.1 Preview and the Windows library for JavaScript 2.0 Preview will add more navigation support to the platform in the form of applied controls. One of these controls is BackButton.

BackButton gives you an easy way to add backward navigation to your application. It's easy to create a BackButton control.

BackButton automatically checks the navigation stack to determine if the user can navigate backwards. If there is no content to navigate backward, this button is automatically disabled. When the user clicks this button or uses a keyboard shortcut, such as Alt+ left or BrowserBack, it automatically calls the WinJS.Navigation.back function to navigate backwards. You don't have to write any code.

Hub (central)

To help provide a more consistent navigation experience, Windows 8.1 Preview and the Windows library for JavaScript 2.0 Preview have added Hub controls.

Many Windows App Store apps use central navigation mode, a hierarchical navigation system. This mode is most suitable for applications with a large amount of content or many different parts of content for users to browse.

The essence of central design is to divide the content into different parts and different levels of detail. The central page is the entry point for users to enter the application. The content here is displayed in a pan view that panned horizontally or vertically so that users can see the new content and available features at a glance. The center is made up of different categories of content, each of which is mapped to the partial page of the application. Each section should display content or function. The center should provide many visible changes, attract users, and attract them to all parts of the application.

The Windows 8.1 Preview,Hub control makes it easier to create a central page. To start quickly creating applications with Hub pages, use the Central Application template in Visual Studio 2013 Preview.

Create a center

To create a center, you need to add a Hub control and a HubSection object to each part of the center. Each HubSection can contain any type of content, including other Windows JavaScript library controls. You can use the header attribute to specify the section title. Some header files can be static or interactive. Interactive header files display hidden V-shaped icons and promote events as the user interacts with them.

The following example defines a three-part Hub.

HubPage Hub example

The code creates this page.

When you click the second title, the application goes to the second page.

The following code performs navigation.

(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) {/ TODO: Respond to changes in viewState. }, _ hubReady: function (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)});})

You can even use Hub controls and SemanticZoom controls. For this control and more examples, see the HTML Central Control example.

ItemContainer

The new ItemContainer control simplifies the process of creating interactive elements that provide swipe, drag-and-drop, and hover capabilities. Just put your content in ItemContainer. ItemContainer can contain standard HTML elements and even other Windows JavaScript library controls.

ItemContainer is flexible, making it ideal for many uses, such as creating rich check box groups, navigation buttons, and shopping cart representations.

You can use the ItemContainer control when you want to display items but do not need to use all the ListView features.

Use ItemContainer

The following example creates two ItemContainer objects and sets their tapBehavior property to toggleSelect so that they can be selected.

Banana

Frozen yogurt Strawberry

Ice cream

You can also use an ItemContainer with a Repeater control to generate a project from List: just put ItemContainer in your Template control.

The following example defines a data source.

(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});} ()

You can select a project by default. To disable selection, set the selectionDisabled property of the ItemContainer control to true.

NavBar

[get an example of a HTML NavBar control now.]

The following new controls have been introduced into Windows 8.1 Preview and the Windows library for JavaScript 2.0 Preview to help you provide a consistent and predictable navigation experience: the WinJS.UI.NavBar control.

NavBar is similar to AppBar dedicated to navigation commands. In fact, NavBar is a subclass of AppBar. It can contain a series of simple links or multiple levels of links displayed by categories. You can populate NavBar by hard-coding an entry, updating it programmatically, or using data binding.

NavBar will be displayed at the top of the application screen when the user needs it. The user can invoke NavBar by performing an edge scan, pressing the Windows logo key + Z, or right-clicking.

NavBar also supports vertical layout and split navigation items (navigation items with sub-navigation options). NavBar is a highly customizable object: you can use cascading style sheets (CSS) to style almost all aspects of NavBar and its contents, as well as create custom navigation items.

Create NavBar

NavBar consists of three components:

NavBar itself.

The NavBarContainer object, which contains navigation items (NavBarCommand objects) and supports paging as well as panning and scrolling. You can contain one or more NavBarContainer objects in a NavBar. You can use the NavBarContainer object to define navigation option groups.

One or more NavBarCommand objects. These are what the user clicks to navigate.

To enable navigation, you can set the location property of the NavBarCommand object. The WinJS.Navigation.navigated event starts when the user clicks the command. Use this event to navigate to the specified location.

You can also register oninvoked events on NavBar and use your event handler to perform navigation operations.

The following example shows a simple NavBar with two navigation items.

The NavBar is shown below.

You can create a NavBarCommand that contains child NavBarCommand objects. To do this, set the splitButton property of the parent NavBarCommand object to true, and then use the splittoggle event to display a Flyout that contains the child NavBarCommand object. Here is the sample code for its * parts.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.