AppBarCommand.firstElementFocus property

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 left. 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="{ firstElementFocus : value}" > </div>
var firstElementFocus = appBarCommand.firstElementFocus;
appBarCommand.firstElementFocus = firstElementFocus;
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 gives focus to dessertType, while the Right arrow key gives 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 |
See also
- AppBarCommand
- AppBar
- AppBarIcon
- BackButton
- NavBar
- Your first app - Part 3: PageControl objects and navigation
- Navigating between pages (HTML)
- Adding app bars
- Adding nav bars
- HTML AppBar control sample
- HTML NavBar control sample
- Navigation and navigation history sample
- Designers
- Command patterns
- Navigation patterns
- Guidelines for app bars
- Bottom app bar
- Top app bar