How to add an input textbox into the app bar? (like what IE10 does)


  • I coded as the following, and obviously it doesn't work. Got no idea how to get through this. Sorry for my silly question, I'm newbie to WinJS.

    <div id="appbar" data-win-control="WinJS.UI.AppBar">
           <input type="text" value="" name="textbox" size="15">
          <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'search', label:'Where to go?', icon:'left'}" type="button"></button>

    Sunday, January 20, 2013 2:35 PM


  • Oooooh. I got it. Problem solved by using custom layout. I've struggled in it for 2 weeks, unbelievable!! :(

    Thank Microsoft for your SDK sample. Must download and learn those samples before turning to other may-be-useful information, bloody lesson. 

    <div data-win-control="WinJS.UI.AppBar" aria-label="Navigation Bar" 
            <header aria-label="Navigation bar" role="banner">
                <input type="text" value="" name="textbox" size="15">
                <button id="cmdBack" class="win-backbutton" aria-label="Back"></button>

    • Marked as answer by Alex Z. Wen Sunday, January 20, 2013 2:49 PM
    • Edited by Alex Z. Wen Sunday, January 20, 2013 2:50 PM
    Sunday, January 20, 2013 2:49 PM