2 * jQuery Mobile Framework : "controlbar" plugin
3 * Copyright (c) jQuery Project
4 * Dual licensed under the MIT or GPL Version 2 licenses.
5 * http://jquery.org/license
6 * Authors: Jinhyuk Jun <jinhyuk.jun@samsung.com>
10 * Controlbar can be created using data-role = "controlbar" inside footer
11 * Framework determine which controlbar will display with controlbar attribute
15 * data-style : determine which controlbar will use ( tabbar / toolbar )
16 * tabbar do not have back button, toolbar has back button
20 * HTML markup for creating tabbar: ( 2 ~ 5 li item available )
21 * icon can be changed data-icon attribute
22 * <div data-role="footer"data-position ="fixed">
23 * <div data-role="controlbar" data-style="tabbar" >
25 * <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
26 * <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
27 * <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
32 * HTML markup for creating toolbar: ( 2 ~ 5 li item available )
33 * icon can be changed data-icon attribute
34 * <div data-role="footer" data-position ="fixed">
35 * <div data-role="controlbar" data-style="toolbar" >
37 * <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
38 * <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
39 * <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
45 (function( $, undefined ) {
47 $.widget( "tizen.controlbar", $.mobile.widget, {
51 initSelector: ":jqmData(role='controlbar')"
56 var $controlbar = this.element,
57 $navbtns = $controlbar.find( "a" ),
58 iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
59 this.options.iconpos : undefined,
60 theme = $.mobile.listview.prototype.options.theme, /* Get current theme */
61 style = $controlbar.attr( "data-style" );
63 if( style === "left" || style === "right" ) {
65 .parents( ".ui-content" )
66 .css( 'padding', '0' );
69 .addClass( "ui-navbar" )
70 .attr( "role","navigation" )
72 .grid( { grid: this.options.grid } );
76 $controlbar.addClass( "ui-navbar-noicons" );
79 $navbtns.buttonMarkup({
85 $controlbar.delegate( "a", "vclick", function( event ) {
86 $navbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
87 $( this ).addClass( $.mobile.activeBtnClass );
90 if( style === "tabbar" || style === "toolbar" ){
92 .addClass( "ui-controlbar-" + theme )
93 .addClass( "ui-"+style+"-" + theme );
96 .addClass( "ui-controlbar-" + style )
100 $( document ).bind( "pagebeforeshow", function( event, ui ) {
101 var footer_filter = $( event.target ).find( ":jqmData(role='footer')" );
102 var controlbar_filter = footer_filter.find( ":jqmData(role='controlbar')" );
103 var style = controlbar_filter.jqmData( "style" );
105 if( style == "toolbar" || style == "tabbar" ){
106 /* Need to add text only style */
107 if( !(controlbar_filter.find(".ui-btn-inner").children().is(".ui-icon")) ){
108 controlbar_filter.find( ".ui-btn-inner" ).addClass( "ui-navbar-textonly" );
110 if( controlbar_filter.find(".ui-btn-text").text() == "" ){
111 controlbar_filter.find( ".ui-btn" ).css( "padding-top", "20px" );
115 .css( "position", "fixed" )
116 .css( "height", controlbar_filter.height() )
117 .css( "top", window.innerHeight - footer_filter.height() );
118 if( style == "toolbar" ){
120 .css( "width", window.innerWidth - controlbar_filter.siblings(".ui-btn").width() );
125 $( document ).bind( "pageshow", function( e, ui ){
126 var controlbar_filter = $( ".ui-page" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='controlbar')" );
127 var element_count = controlbar_filter.find( 'li' ).length;
129 if( controlbar_filter.find(".ui-btn-active").length == 0 )
130 controlbar_filter.find( "div" ).css( "left", "0px" );
132 controlbar_filter.find( "div" ).css( "left", controlbar_filter.find( ".ui-btn-active" ).parent( "li" ).index() * controlbar_filter.width()/element_count );
134 /* Increase Content size with dummy <div> because of footer height */
135 if( controlbar_filter.length != 0 && $( ".ui-page-active" ).find( ".dummy-div" ).length == 0
136 && $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).find( ":jqmData(role='controlbar')" ).length != 0 ){
137 $( ".ui-page-active" ).find( ":jqmData(role='content')" ).append( '<div class="dummy-div"></div>' );
138 $( ".ui-page-active" ).find( ".dummy-div" )
139 .css( "width", controlbar_filter.width() )
140 .css( "height", controlbar_filter.height() );
146 _setDisabled: function( value, cnt ) {
147 this.element.find( "li" ).eq( cnt ).attr( "disabled", value );
148 this.element.find( "li" ).eq( cnt ).attr( "aria-disabled", value );
151 disable: function( cnt ) {
152 this._setDisabled( true, cnt );
153 this.element.find( "li" ).eq( cnt ).addClass( "ui-disabled" );
156 enable: function( cnt ) {
157 this._setDisabled( false, cnt );
158 this.element.find( "li" ).eq( cnt ).removeClass( "ui-disabled" );
162 //auto self-init widgets
163 $( document ).bind( "pagecreate create", function( e ){
164 $( $.tizen.controlbar.prototype.options.initSelector, e.target ).controlbar();