AppBarCommand.lastElementFocus property

Article
01/26/2017

Gets or sets keyboard navigation behavior in the app bar for AppBarCommand elements of type "content". This property identifies the element that receives focus within the AppBarCommand host <div> (or container) when navigating from the right. By default, the host <div> receives initial focus if this property is not set.

Syntax

<div 
  data-win-control="WinJS.UI.AppBarCommand" 
  data-win-options="{ lastElementFocus : value}" >
</div>

var lastElementFocus = appBarCommand.lastElementFocus;
appBarCommand.lastElementFocus = lastElementFocus;

Property value

Type: Object

The element that receives the focus.

Remarks

Elements within the host <div> are only accessible when navigating with the Tab key. You can support other keys (such as the Left and Right arrow keys) by handling the KeyDown event.

Examples

Here is an AppBarCommand of type content that contains two select elements. Navigating with the Left arrow key will give focus to dessertType, while the Right arrow key will give focus to drinkType.

<div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ id: 'list', 
  type: 'content', 
  section: 'selection', 
  firstElementFocus:select('.drinkType'), 
  lastElementFocus:select('.dessertType') }">
    <select class="drinkType">
        <option>Water</option>
        <option>Tea</option>
        <option>Coffee</option>
    </select>
    <select class="dessertType">
        <option>Baked</option>
        <option>Fried</option>
        <option>Frozen</option>
        <option>Chilled</option>
    </select>
</div>

Requirements

Minimum WinJS version	WinJS 2.0
Namespace	WinJS.UI