From ea1af4db67ee4bbfa7f9783a01a7138eef6bd436 Mon Sep 17 00:00:00 2001 From: Jinhyuk Jun Date: Fri, 28 Dec 2012 11:32:31 +0900 Subject: [PATCH] Tabbar : VI update add tab left/right slide motion to tabbar Change-Id: I35ecb81bf53711b510abe53e9d52430ea6dc34ba --- .../widgets/tabbar/tabbar_scrolling.html | 34 ++++++---- .../tizen/common/jquery.mobile.tizen.tabbar.less | 45 +++++++++++++ .../tabbar/js/jquery.mobile.tizen.tabbar.js | 74 +++++++++++++++++++++- 3 files changed, 139 insertions(+), 14 deletions(-) diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html b/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html index a3712c4..b9d949b 100755 --- a/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html +++ b/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html @@ -13,20 +13,32 @@
-
- -
+

Tabbar Scroll

+ +
+
+ +
+ +
- +

Scroll header tabbar left/right

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less index 4af67ae..bccdfa6 100755 --- a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less +++ b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less @@ -210,4 +210,49 @@ .ui-tabbar-s.ui-navbar-noicons { font-size : 22 * @unit_base; +} + +/* Scrollable tabbar */ + +.ui-tabbar { + .tabbar-scroll-ul { + margin-top : 0px; + margin-bottom : 0px; + padding-left : 0px; + + .tabbar-scroll-li { + position : relative; + display : inline-block; + margin-left : -8 * @unit_base; + a { + width : 100%; + } + } + li.tabbar-scroll-li:first-child { + margin-left : 0px; + } + } +} + +.ui-tabbar-divider { + position : absolute; + + top : 0px; + width : 10 * @unit_base; + height : 55 * @unit_base; + background : -webkit-linear-gradient(left, rgba(0, 0, 155, 1) 0%,rgba(246,248,239,1) 100%); +} + +.ui-tabbar-divider-left { + left : 0px; + border-top-right-radius : 10 * @unit_base; + border-bottom-right-radius : 10 * @unit_base; + background : -webkit-linear-gradient(left, rgba(0, 0, 155, 1) 0%,rgba(246,248,239,1) 100%); +} + +.ui-tabbar-divider-right { + right : 0px; + border-top-left-radius : 10 * @unit_base; + border-bottom-left-radius : 10 * @unit_base; + background : -webkit-linear-gradient(right, rgba(0, 0, 155, 1) 0%,rgba(246,248,239,1) 100%); } \ No newline at end of file diff --git a/src/widgets/tabbar/js/jquery.mobile.tizen.tabbar.js b/src/widgets/tabbar/js/jquery.mobile.tizen.tabbar.js index d5b57be..6ab0896 100755 --- a/src/widgets/tabbar/js/jquery.mobile.tizen.tabbar.js +++ b/src/widgets/tabbar/js/jquery.mobile.tizen.tabbar.js @@ -52,6 +52,7 @@ options: { iconpos: "top", grid: null, + defaultList : 4, initSelector: ":jqmData(role='tabbar')" }, @@ -64,6 +65,10 @@ theme = $.mobile.listview.prototype.options.theme, /* Get current theme */ ww = window.innerWidth || $( window ).width(), wh = window.innerHeight || $( window ).height(), + tabbarDividerLeft = "
", + tabbarDividerRight = "
", + isScrollingStart = false, + isScrollingEnd = false, isLandscape; isLandscape = ww > wh && ( ww - wh ); @@ -80,9 +85,27 @@ textpos = $tabbtns.html().length ? true : false; } - $tabbar.addClass( "ui-navbar" ) - .find( "ul" ) - .grid( { grid: this.options.grid } ); + if ( $tabbar.parents( ".ui-header" ).length && $tabbar.parents( ".ui-scrollview-view" ).length ) { + $tabbar.find( "li" ).addClass( "tabbar-scroll-li" ); + $tabbar.find( "ul" ).addClass( "tabbar-scroll-ul" ); + + /* add shadow divider */ + $( tabbarDividerLeft ).appendTo( $tabbar.parents( ".ui-scrollview-clip" ) ); + $( tabbarDividerRight ).appendTo( $tabbar.parents( ".ui-scrollview-clip" ) ); + + $( ".ui-tabbar-divider-left" ).hide(); + $( ".ui-tabbar-divider-right" ).hide(); + + /* add width calculation*/ + if ( $tabbar.parents( ".ui-scrollview-view" ).data("default-list") ) { + this.options.defaultList = $tabbar.parents( ".ui-scrollview-view" ).data( "default-list" ); + } + $tabbar.find( "li" ).css( "width", window.innerWidth / this.options.defaultList + "px" ); + } else { + $tabbar.addClass( "ui-navbar" ) + .find( "ul" ) + .grid( { grid: this.options.grid } ); + } if ( $tabbar.parents( ".ui-footer" ).length ) { $tabbar.find( "li" ).addClass( "ui-tab-btn-style" ); @@ -136,6 +159,8 @@ tabbar_filter.addClass( "ui-tabbar-margin-more" ); if ( $elFooterBack.length ) tabbar_filter.addClass( "ui-tabbar-margin-back" ); + + isScrollingStart = false; }); $( document ).bind( "pageshow", function ( e, ui ) { @@ -160,6 +185,49 @@ } }); + $( window ).bind( "scrollstart", function ( e ) { + if ( $( e.target ).find( ".ui-tabbar" ).length ) { + isScrollingStart = true; + isScrollingEnd = false; + } + }); + + $( window ).bind( "scrollstop", function ( e ) { + var $tabbarScrollview = $( e.target ), + $minElement = $tabbar.find( "li" ).eq( 0 ), + minElementIndexVal = Math.abs( $tabbar.find( "li" ).eq( 0 ).offset().left ), + minElementIndex = -1; + + isScrollingEnd = true; + if ( $( e.target ).find( ".ui-tabbar" ).length && isScrollingStart == true ) { + $tabbar.find( "li" ).each( function ( i ) { + var offset = $tabbar.find( "li" ).eq( i ).offset(); + if ( Math.abs( offset.left ) < minElementIndexVal ) { + minElementIndexVal = Math.abs( offset.left ); + minElementIndex = i; + $minElement = $tabbar.find( "li" ).eq( i ); + } + }); + + if ( $tabbarScrollview.length && isScrollingStart == isScrollingEnd && minElementIndex != -1) { + isScrollingStart = false; + isScrolling = false; + $tabbarScrollview.scrollview( "scrollTo", -( window.innerWidth / $( e.target ).find( ".ui-tabbar" ).data( "defaultList" ) * minElementIndex ) , 0, 357); + } + } + + $( ".ui-tabbar-divider-left" ).hide(); + $( ".ui-tabbar-divider-right" ).hide(); + }); + + $tabbar.bind( "touchstart vmousedown", function ( e ) { + var $tabbarScroll = $( e.target ).parents( ".ui-scrollview-view" ); + $tabbarScroll.offset().left < 0 ? + $( ".ui-tabbar-divider-left" ).show() : $( ".ui-tabbar-divider-left" ).hide(); + ( $tabbarScroll.width() - $tabbarScroll.parents( ".ui-scrollview-clip" ).width() ) == Math.abs( $tabbarScroll.offset().left ) ? + $( ".ui-tabbar-divider-right" ).hide() : $( ".ui-tabbar-divider-right" ).show(); + }); + this._bindTabbarEvents(); }, -- 2.7.4