javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
debccaeaaaf541d1de7ec8a87720556a054e68ec
ionic-framework/config/docs/templates/api_menu_version.template.html
Andrew 7ef9ad74cf fix(slidebox): refactor for performance and stability 
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() );
    ```
2014-10-08 11:09:15 -06:00

602 lines
13 KiB
HTML
Raw Blame History

<!-- Action Sheet -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/service/$ionicActionSheet/" class="api-section">
Action Sheet
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicActionSheet/">
$ionicActionSheet
</a>
</li>
</ul>
</li>
<!-- Backdrop -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/service/$ionicBackdrop/" class="api-section">
Backdrop
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicBackdrop/">
$ionicBackdrop
</a>
</li>
</ul>
</li>
<!-- Content -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/directive/ionContent/" class="api-section">
Content
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/directive/ionContent/">
ion-content
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionRefresher/">
ion-refresher
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionPane/">
ion-pane
</a>
</li>
</ul>
</li>
<!-- Events -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/directive/onHold/" class="api-section">
Events
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/directive/onHold/">
on-hold
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onTap/">
on-tap
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onTouch/">
on-touch
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onRelease/">
on-release
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onDrag/">
on-drag
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onDragUp/">
on-drag-up
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onDragRight/">
on-drag-right
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onDragDown/">
on-drag-down
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onDragLeft/">
on-drag-left
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onSwipe/">
on-swipe
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onSwipeUp/">
on-swipe-up
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onSwipeRight/">
on-swipe-right
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onSwipeDown/">
on-swipe-down
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/onSwipeLeft/">
on-swipe-left
</a>
</li>
</ul>
</li>
<!-- Form Inputs -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/directive/ionCheckbox/" class="api-section">
Form Inputs
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/directive/ionCheckbox/">
ion-checkbox
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionRadio/">
ion-radio
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionToggle/">
ion-toggle
</a>
</li>
</ul>
</li>
<!-- Gesture -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/service/$ionicGesture/" class="api-section">
Gesture
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicGesture/">
$ionicGesture
</a>
</li>
</ul>
</li>
<!-- Headers/Footers -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/directive/ionHeaderBar/" class="api-section">
Headers/Footers
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/directive/ionHeaderBar/">
ion-header-bar
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionFooterBar/">
ion-footer-bar
</a>
</li>
</ul>
</li>
<!-- Keyboard -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/page/keyboard/" class="api-section">
Keyboard
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/page/keyboard/">
Keyboard
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/keyboardAttach/">
keyboard-attach
</a>
</li>
</ul>
</li>
<!-- Lists -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/directive/ionList/" class="api-section">
Lists
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/directive/ionList/">
ion-list
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionItem/">
ion-item
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionDeleteButton/">
ion-delete-button
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionReorderButton/">
ion-reorder-button
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionOptionButton/">
ion-option-button
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/collectionRepeat/">
collection-repeat
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicListDelegate/">
$ionicListDelegate
</a>
</li>
</ul>
</li>
<!-- Loading -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/service/$ionicLoading/" class="api-section">
Loading
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicLoading/">
$ionicLoading
</a>
</li>
</ul>
<ul>
<li>
<a href="{{ page.versionHref }}/api/object/$ionicLoadingConfig/">
$ionicLoadingConfig
</a>
</li>
</ul>
</li>
<!-- Modal -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/service/$ionicModal/" class="api-section">
Modal
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicModal/">
$ionicModal
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/controller/ionicModal/">
ionicModal
</a>
</li>
</ul>
</li>
<!-- Navigation -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/directive/ionNavView/" class="api-section">
Navigation
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/directive/ionNavView/">
ion-nav-view
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionView/">
ion-view
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionNavBar/">
ion-nav-bar
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionNavButtons/">
ion-nav-buttons
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionNavBackButton/">
ion-nav-back-button
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/navClear/">
nav-clear
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicNavBarDelegate/">
$ionicNavBarDelegate
</a>
</li>
</ul>
</li>
<!-- Platform -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/service/$ionicPlatform/" class="api-section">
Platform
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicPlatform/">
$ionicPlatform
</a>
</li>
</ul>
</li>
<!-- Popover -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/service/$ionicPopover/" class="api-section">
Popover
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicPopover/">
$ionicPopover
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/controller/ionicPopover/">
ionicPopover
</a>
</li>
</ul>
</li>
<!-- Popup -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/service/$ionicPopup/" class="api-section">
Popup
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicPopup/">
$ionicPopup
</a>
</li>
</ul>
</li>
<!-- Scroll -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/directive/ionScroll/" class="api-section">
Scroll
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/directive/ionScroll/">
ion-scroll
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionInfiniteScroll/">
ion-infinite-scroll
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicScrollDelegate/">
$ionicScrollDelegate
</a>
</li>
</ul>
</li>
<!-- Side Menus -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/directive/ionSideMenus/" class="api-section">
Side Menus
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/directive/ionSideMenus/">
ion-side-menus
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionSideMenuContent/">
ion-side-menu-content
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionSideMenu/">
ion-side-menu
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/exposeAsideWhen/">
expose-aside-when
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/menuToggle/">
menu-toggle
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/menuClose/">
menu-close
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicSideMenuDelegate/">
$ionicSideMenuDelegate
</a>
</li>
</ul>
</li>
<!-- Slide Box -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/directive/ionSlideBox/" class="api-section">
Slide Box
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/directive/ionSlideBox/">
ion-slide-box
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionSlidePager/">
ion-slide-pager
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionSlide/">
ion-slide
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicSlideBoxDelegate/">
$ionicSlideBoxDelegate
</a>
</li>
</ul>
</li>
<!-- Tabs -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/directive/ionTabs/" class="api-section">
Tabs
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/directive/ionTabs/">
ion-tabs
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/directive/ionTab/">
ion-tab
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicTabsDelegate/">
$ionicTabsDelegate
</a>
</li>
</ul>
</li>
<!-- Tap -->
<li class="menu-section">
<a href="{{ page.versionHref }}/api/page/tap/" class="api-section">
Tap &amp; Click
</a>
</li>
<!-- Utility -->
<li class="menu-section">
<a href="#" class="api-section">
Utility
</a>
<ul>
<li>
<a href="{{ page.versionHref }}/api/provider/$ionicConfigProvider/">
$ionicConfigProvider
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/utility/ionic.Platform/">
ionic.Platform
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/utility/ionic.DomUtil/">
ionic.DomUtil
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/utility/ionic.EventController/">
ionic.EventController
</a>
</li>
<li>
<a href="{{ page.versionHref }}/api/service/$ionicPosition/">
$ionicPosition
</a>
</li>
</ul>
</li>
Reference in New Issue View Git Blame Copy Permalink