mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
7ef9ad74cf
Closes #2336. Closes #2317. Closes #2290. Closes #2228. Closes #2067. Closes #1890. Closes #1865. Closes #1850. Closes #1755. Closes #1688. Closes #1578. Closes #1501. Closes #1353. Closes #1342. Closes #782. Closes #416. Closes #2288. BREAKING CHANGE: The slideBox's API has undergone many changes. - **`<ion-slide-box>`** attributes have changed (see [documentation](http://ionicframework.com/docs/api/directive/ionSlideBox)): * `active-slide` has changed to `selected`. Change your code from this: ```html <ion-slide-box active-slide="activeSlideIndex"></ion-slide-box> ``` To this: ```html <ion-slide-box selected="activeSlideIndex"></ion-slide-box> ``` * `does-continue` has changed to `loop`. Change your code from this: ```html <ion-slide-box does-continue="shouldLoop"></ion-slide-box> ``` To this: ```html <ion-slide-box loop="shouldLoop"></ion-slide-box> ``` * `auto-play` and `slide-interval` have been merged into `auto-play`. Change your code from this: ```html <!-- autoPlay is on --> <ion-slide-box auto-play="true" slide-interval="1000"> </ion-slide-box> <!-- autoPlay is off --> <ion-slide-box auto-play="false" slide-interval="1000"> </ion-slide-box> ``` To this: ```html <!-- autoPlay is on --> <ion-slide-box auto-play="1000"></ion-slide-box> <!-- autoPlay is off --> <ion-slide-box auto-play="false"></ion-slide-box> ``` * `show-pager` and `pager-click` have been removed. Use a child `<ion-slide-pager>` element. See the [`ion-slide-pager` documentation](http://ionicframework.com/docs/api/directive/ionSlidePager). Change your code from this: ```html <!-- pager using default click action --> <ion-slide-box show-pager="true"> </ion-slide-box> <!-- pager with custom click action --> <ion-slide-box show-pager="true" pager-click="doSomething(index)"> </ion-slide-box> ``` To this: ```html <ion-slide-box> <!-- pager using default click action --> <ion-slide-pager></ion-slide-pager> </ion-slide-box> <ion-slide-box> <!-- pager with custom click action --> <ion-slide-pager ng-click="doSomething(index)"></ion-slide-pager> </ion-slide-box> ``` - **`$ionicSlideBoxDelegate`** methods have changed (see [documentation](http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate)): - `update()` has been removed. slideBox updates on its own now. - `stop()` has been removed. See `autoPlay()` below. - `start()` hass been removed. See `autoPlay()` below. - `slide(newIndex[, speed])` has been renamed to `select(newIndex[, speed]); - `currentIndex()` has been renamed to `selected()`. - `slidesCount()` has been renamed to `count()`. - New method `$ionicSlideBoxDelegate.autoPlay()`. Change your code from this: ```js // stop auto sliding $ionicSlideBoxDelegate.stop(); // later... start auto sliding $ionicSlideBoxDelegate.start(); ``` To this: ```js var autoPlaySpeed = 3000; //wait 3000 seconds between changing slide // stop auto sliding $ionicSlideBoxDelegate.autoPlay(false); // later... start auto sliding $ionicSlideBoxDelegate.autoPlay(autoPlaySpeed); ``` - `previous()` now returns the index of the previous slide and does not select. Change your code from this: ```js // select previous slide $ionicSlideBoxDelegate.previous(); ``` To this: ```js // select previous slide $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.previous() ); ``` - `next()` now returns the index of the next slide and does not select. Change your code from this: ```js // select next slide $ionicSlideBoxDelegate.next(); ``` To this: ```js // select next slide $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.next() ); ```
104 lines
3.0 KiB
JavaScript
104 lines
3.0 KiB
JavaScript
/**
|
|
* @ngdoc service
|
|
* @name $ionicSlideBoxDelegate
|
|
* @module ionic
|
|
* @description
|
|
* Delegate that controls the {@link ionic.directive:ionSlideBox} directive.
|
|
*
|
|
* Methods called directly on the $ionicSlideBoxDelegate service will control all slide boxes. Use the {@link ionic.service:$ionicSlideBoxDelegate#$getByHandle $getByHandle}
|
|
* method to control specific slide box instances.
|
|
*
|
|
* @usage
|
|
*
|
|
* ```html
|
|
* <body ng-controller="MyCtrl">
|
|
* <ion-slide-box>
|
|
* <ion-slide>
|
|
* <div class="box blue">
|
|
* <button ng-click="nextSlide()">Next slide!</button>
|
|
* </div>
|
|
* </ion-slide>
|
|
* <ion-slide>
|
|
* <div class="box red">
|
|
* Slide 2!
|
|
* </div>
|
|
* </ion-slide>
|
|
* </ion-slide-box>
|
|
* </body>
|
|
* ```
|
|
* ```js
|
|
* function MyCtrl($scope, $ionicSlideBoxDelegate) {
|
|
* $scope.nextSlide = function() {
|
|
* $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.next() );
|
|
* }
|
|
* }
|
|
* ```
|
|
*/
|
|
IonicModule
|
|
.service('$ionicSlideBoxDelegate', delegateService([
|
|
/**
|
|
* @ngdoc method
|
|
* @name $ionicSlideBoxDelegate#select
|
|
* @param {number} slideIndex The index to select.
|
|
*/
|
|
'select',
|
|
/**
|
|
* @ngdoc method
|
|
* @name $ionicSlideBoxDelegate#selected
|
|
* @returns `slideIndex` The index of the currently selected slide.
|
|
*/
|
|
'selected',
|
|
/**
|
|
* @ngdoc method
|
|
* @name $ionicSlideBoxDelegate#loop
|
|
* @description Sets/gets the looping state of the slidebox (whether going next from the last slide will go back to the first slide, and vice versa).
|
|
* @param {boolean=} shouldLoop Set whether the slidebox should loop.
|
|
* @returns `isLoop` Whether looping is currently enabled.
|
|
*/
|
|
'loop',
|
|
/**
|
|
* @ngdoc method
|
|
* @name $ionicSlideBoxDelegate#previous
|
|
* @returns `slideIndex` The index of the previous slide. Wraps around if loop is enabled.
|
|
*/
|
|
'previous',
|
|
/**
|
|
* @ngdoc method
|
|
* @name $ionicSlideBoxDelegate#next
|
|
* @returns `slideIndex` The index of the next slide. Wraps around if loop is enabled.
|
|
*/
|
|
'next',
|
|
/**
|
|
* @ngdoc method
|
|
* @name $ionicSlideBoxDelegate#autoPlay
|
|
* @description Set whether the slidebox should automatically play, and at what rate.
|
|
* @param {*} autoPlayInterval How many milliseconds delay until changing to the next slide.
|
|
* Set to zero or false to stop autoPlay.
|
|
*/
|
|
'autoPlay',
|
|
/**
|
|
* @ngdoc method
|
|
* @name $ionicSlideBoxDelegate#enableSlide
|
|
* @param {boolean=} shouldEnable Whether to enable sliding the slidebox.
|
|
* @returns `boolean` Whether sliding is enabled.
|
|
*/
|
|
'enableSlide',
|
|
/**
|
|
* @ngdoc method
|
|
* @name $ionicSlideBoxDelegate#count
|
|
* @returns `number` The number of slides there are currently.
|
|
*/
|
|
'count'
|
|
/**
|
|
* @ngdoc method
|
|
* @name $ionicSlideBoxDelegate#$getByHandle
|
|
* @param {string} handle
|
|
* @returns `delegateInstance` A delegate instance that controls only the
|
|
* {@link ionic.directive:ionSlideBox} directives with `delegate-handle` matching
|
|
* the given handle.
|
|
*
|
|
* Example: `$ionicSlideBoxDelegate.$getByHandle('my-handle').select(0);`
|
|
*/
|
|
]));
|
|
|