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.header',
'ionic.ui.sideMenu',
'ionic.ui.slideBox',
'ionic.ui.list',
'ionic.ui.checkbox',
'ionic.ui.toggle',
@ -24426,7 +24427,10 @@ angular.module('ionic.ui.slideBox', [])
$element.append(pager);
$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) {
var _this = this;
this.slideChanged = opts.slideChanged || function() {};
this.el = opts.el;
this.pager = this.el.querySelector('.slide-box-pager');
@ -3787,9 +3788,15 @@ window.ionic = {
content.classList.add('slide-box-animating');
content.style.webkitTransform = 'translate3d(' + -offsetX + 'px, 0, 0)';
var lastSlide = this.slideIndex;
// Update the slide index
this.slideIndex = Math.ceil(offsetX / slideWidth);
if(lastSlide !== this.slideIndex) {
this.slideChanged && this.slideChanged(this.slideIndex);
}
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);
$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.header',
'ionic.ui.sideMenu',
'ionic.ui.slideBox',
'ionic.ui.list',
'ionic.ui.checkbox',
'ionic.ui.toggle',

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

@ -5,8 +5,9 @@
<!-- Sets initial viewport load and disables zooming -->
<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">
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
.box {
width: 100%;
@ -38,6 +39,7 @@
</head>
<body>
<div ng-controller="SlideCtrl">
<slide-box>
<slide>
<div class="box blue"><h1>BLUE</h1></div>
@ -49,10 +51,15 @@
<div class="box pink"><h1>PINK</h1></div>
</slide>
</slide-box>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</div>
<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>
</body>
</html>

7
js/views/slideBox.js
View File

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