Widget Feature issue template

#Navbar Review

##Description

A jQuery Mobile Widget that creates a row (bar) of buttons. The buttons are created from an unordered list of links wrapped in a container element with data-role=”navbar”. The buttons can contain text, icons, or text + icon. Navbars will have the ability to be persistent like a tab bar.

##Functional Specification

Navbar should extend the full available width of the viewport with a maximum number of buttons which, once reached, will trigger display of a "viewmore" button to indicate there are more buttons available. When "viewmore" is selected the remaining buttons will scroll into view as a needed.

###Options

• iconpos sets the position of the icons default: top
• buttonnum sets the maximum number of buttons for the screen, i.e. 8 means each button takes 1/8th of the width default: 5
• morebtn sets the text or icon? for the viewmore button default: ">"

###Events

• create creates a navbar on specified selector

  // bind to the create event
  $( ".selector" ).on("navbarcreate", function(event, ui) {});
  
  // create a navbar on .selector
  $( ".selector" ).navbar({
    create: function(event, ui) { }
  });
  

• destroy removes navbar enhancements from the element

  $( ".selector" ).navbar( "destroy" );
  

##Markup & Style

###Initial Markup

<div class="selector" data-role="navbar" >
  <ul>
    <li><a href="#" class="ui-btn-active">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
  </ul>
</div>

###Enhanced Markup

<div role="navigation" class="selector ui-navbar" data-role="navbar">
  <ul class="ui-navbar__bar">
    <li class="ui-navbar__baritem"><a class="ui-link ui-btn ui-btn-active" href="#">Item 1</a></li>
    <li class="ui-navbar__baritem"><a class="ui-link ui-btn" href="#">Item 2</a></li>
  </ul>
</div>

CSS

.ui-navbar {
 max-width: 100%
}

.ui-navbar__bar {
  padding: 0;
  display: table; table-layout:fixed; width: 100%;,  
}

.ui-navbar__baritem{
  display: table-cell;
}

Checklist

*[ ] Demos page *[ ] Demos page added to menu *[ ] Api PR # *[ ] update /js/index.php *[ ] update /js/jquery.mobile.js *[ ] check with download builder *[ ] Full test coverage