javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed #119 - slide box events

Browse Source
This commit is contained in:
Max Lynch
2013-11-15 21:54:47 -06:00
parent d349c100fb
commit 314156b3ca
6 changed files with 35 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dist/js/ionic-angular.js vendored
View File

@ -22997,6 +22997,7 @@ angular.module('ionic.ui', [
'ionic.ui.nav', 'ionic.ui.nav',
'ionic.ui.header', 'ionic.ui.header',
'ionic.ui.sideMenu', 'ionic.ui.sideMenu',
'ionic.ui.slideBox',
'ionic.ui.list', 'ionic.ui.list',
'ionic.ui.checkbox', 'ionic.ui.checkbox',
'ionic.ui.toggle', 'ionic.ui.toggle',
@ -24426,7 +24427,10 @@ angular.module('ionic.ui.slideBox', [])
$element.append(pager); $element.append(pager);
$scope.slideBox = new ionic.views.SlideBox({ $scope.slideBox = new ionic.views.SlideBox({
el: $element[0] el: $element[0],
slideChanged: function(slideIndex) {
$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
}
}); });
} }
} }

7
dist/js/ionic.js vendored
View File

@ -3679,6 +3679,7 @@ window.ionic = {
initialize: function(opts) { initialize: function(opts) {
var _this = this; var _this = this;
this.slideChanged = opts.slideChanged || function() {};
this.el = opts.el; this.el = opts.el;
this.pager = this.el.querySelector('.slide-box-pager'); this.pager = this.el.querySelector('.slide-box-pager');
@ -3787,9 +3788,15 @@ window.ionic = {
content.classList.add('slide-box-animating'); content.classList.add('slide-box-animating');
content.style.webkitTransform = 'translate3d(' + -offsetX + 'px, 0, 0)'; content.style.webkitTransform = 'translate3d(' + -offsetX + 'px, 0, 0)';
var lastSlide = this.slideIndex;
// Update the slide index // Update the slide index
this.slideIndex = Math.ceil(offsetX / slideWidth); this.slideIndex = Math.ceil(offsetX / slideWidth);
if(lastSlide !== this.slideIndex) {
this.slideChanged && this.slideChanged(this.slideIndex);
}
this._updatePager(); this._updatePager();
}, },

5
js/ext/angular/src/directive/ionicSlideBox.js vendored
View File

@ -41,7 +41,10 @@ angular.module('ionic.ui.slideBox', [])
$element.append(pager); $element.append(pager);
$scope.slideBox = new ionic.views.SlideBox({ $scope.slideBox = new ionic.views.SlideBox({
el: $element[0] el: $element[0],
slideChanged: function(slideIndex) {
$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
}
}); });
} }
} }

1
js/ext/angular/src/ionicAngular.js vendored
View File

@ -18,6 +18,7 @@ angular.module('ionic.ui', [
'ionic.ui.nav', 'ionic.ui.nav',
'ionic.ui.header', 'ionic.ui.header',
'ionic.ui.sideMenu', 'ionic.ui.sideMenu',
'ionic.ui.slideBox',
'ionic.ui.list', 'ionic.ui.list',
'ionic.ui.checkbox', 'ionic.ui.checkbox',
'ionic.ui.toggle', 'ionic.ui.toggle',

15
js/ext/angular/test/slideBox.html
View File

@ -5,8 +5,9 @@
<!-- Sets initial viewport load and disables zooming --> <!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../../../dist/css/ionic.css"> <link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style> <style>
.box { .box {
width: 100%; width: 100%;
@ -38,6 +39,7 @@
</head> </head>
<body> <body>
<div ng-controller="SlideCtrl">
<slide-box> <slide-box>
<slide> <slide>
<div class="box blue"><h1>BLUE</h1></div> <div class="box blue"><h1>BLUE</h1></div>
@ -49,10 +51,15 @@
<div class="box pink"><h1>PINK</h1></div> <div class="box pink"><h1>PINK</h1></div>
</slide> </slide>
</slide-box> </slide-box>
<script src="../../../../dist/js/ionic.js"></script> </div>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script> <script>
angular.module('slideBoxTest', ['ionic.ui.slideBox']) angular.module('slideBoxTest', ['ionic'])
.controller('SlideCtrl', function($scope) {
$scope.$on('slideBox.slideChanged', function(e, index) {
console.log('Slide changed', index);
});
});
</script> </script>
</body> </body>
</html> </html>

7
js/views/slideBox.js
View File

@ -12,6 +12,7 @@
initialize: function(opts) { initialize: function(opts) {
var _this = this; var _this = this;
this.slideChanged = opts.slideChanged || function() {};
this.el = opts.el; this.el = opts.el;
this.pager = this.el.querySelector('.slide-box-pager'); this.pager = this.el.querySelector('.slide-box-pager');
@ -120,9 +121,15 @@
content.classList.add('slide-box-animating'); content.classList.add('slide-box-animating');
content.style.webkitTransform = 'translate3d(' + -offsetX + 'px, 0, 0)'; content.style.webkitTransform = 'translate3d(' + -offsetX + 'px, 0, 0)';
var lastSlide = this.slideIndex;
// Update the slide index // Update the slide index
this.slideIndex = Math.ceil(offsetX / slideWidth); this.slideIndex = Math.ceil(offsetX / slideWidth);
if(lastSlide !== this.slideIndex) {
this.slideChanged && this.slideChanged(this.slideIndex);
}
this._updatePager(); this._updatePager();
}, },