Monday, 15 April 2013

Swipe between tabs idems, onsen-ui -



Swipe between tabs idems, onsen-ui -

i´m using lastly version of onsen-ui v1.14, , i´m trying swipe between tabs, on facebook messenger, i´m not able.

i´ve tried ¨setactivetab¨ function ons-gesture-detector, several variables.

here's did (for tool bar)

css

.activebtn .ng-scope{ color: blue; }

html

<ons-template id="list.html"> <ons-toolbar var="tb"> <div class="center"> <ons-toolbar-button class="tbbtn" id="btn_0" ng-click="abc.setactivecarouselitemindex(0)">all</ons-toolbar-button> <ons-toolbar-button class="tbbtn" id="btn_1" ng-click="abc.setactivecarouselitemindex(1)">people</ons-toolbar-button> <ons-toolbar-button class="tbbtn" id="btn_2" ng-click="abc.setactivecarouselitemindex(2)"> topics</ons-toolbar-button> <ons-toolbar-button class="tbbtn" id="btn_3" ng-click="abc.setactivecarouselitemindex(3)">accounts</ons-toolbar-button> </div> </ons-toolbar> <ons-carousel style="width: 100%; height: 100%" auto-scroll var="abc" ng-controller="listctrl"> <ons-carousel-item> a... </ons-carousel-item> <ons-carousel-item> b... </ons-carousel-item> <ons-carousel-item> c... </ons-carousel-item> <ons-carousel-item> d... </ons-carousel-item> </ons-carousel> </ons-template>

js

app.controller('listctrl', function($scope, $http) { $('#btn_0').addclass('activebtn'); settimeout(function(){ abc.on('postchange', function(){ $('.tbbtn ').removeclass('activebtn'); $('#btn_' + abc.getactivecarouselitemindex()).addclass('activebtn'); }); }, 400); });

tabs swipe-gesture onsen-ui

No comments:

Post a Comment