tizen-web-ui-fw/latest/js/src/widgets/navbar.js

   1 (function( $, undefined ) {
   2
   3 $.widget( "mobile.navbar", $.mobile.widget, {
   4         options: {
   5                 iconpos: "top",
   6                 grid: null,
   7                 initSelector: ":jqmData(role='navbar')"
   8         },
   9
  10         _create: function() {
  11
  12                 var $navbar = this.element,
  13                         $navbtns = $navbar.find( "a" ),
  14                         iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
  15                                                                         this.options.iconpos : undefined;
  16
  17                 $navbar.addClass( "ui-navbar ui-mini" )
  18                         .attr( "role", "navigation" )
  19                         .find( "ul" )
  20                         .jqmEnhanceable()
  21                         .grid({ grid: this.options.grid });
  22
  23                 $navbtns.buttonMarkup({
  24                         corners:        false,
  25                         shadow:         false,
  26                         inline:     true,
  27                         iconpos:        iconpos
  28                 });
  29
  30                 $navbar.delegate( "a", "vclick", function( event ) {
  31                         if ( !$(event.target).hasClass( "ui-disabled" ) ) {
  32                                 $navbtns.removeClass( $.mobile.activeBtnClass );
  33                                 $( this ).addClass( $.mobile.activeBtnClass );
  34                         }
  35                 });
  36
  37                 // Buttons in the navbar with ui-state-persist class should regain their active state before page show
  38                 $navbar.closest( ".ui-page" ).bind( "pagebeforeshow", function() {
  39                         $navbtns.filter( ".ui-state-persist" ).addClass( $.mobile.activeBtnClass );
  40                 });
  41         }
  42 });
  43
  44 //delegate auto self-init widgets
  45 $.delegateSelfInitWithSingleSelector( $.mobile.navbar );
  46
  47 })( jQuery );