阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Ascensor.js 中文API文档

      插件 jQuery.Ascensor.js 中文API文档 https://github.com/kirkas/Ascensor.js

      Ascensor.js Build StatusdevDependency Status

      Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system (homepage)

      Getting Started

      Download the [production version][min] or the [development version][max]. [max]: https://raw.github.com/kirkas/Ascensor.js/master/dist/jquery.ascensor.js [min]: https://raw.github.com/kirkas/Ascensor.js/master/dist/jquery.ascensor.min.js

      In your web page:

      <div id="ascensor">
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
        <div>Content 4</div>
        <div>Content 5</div>
        <div>Content 6</div>  
        <div>Content 7</div>
      </div>
      
      <script src="jquery['>=1.7'].js"></script>
      <script src="jquery.ascensor.js"></script>
      <script>
        $('#ascensor').ascensor();
      </script>
      

      Public Methods

      Note that to access public method, you need to access the instance store in the data attribute under the plugin name. This a behavior inherited from the jQuery boilerplate.

      var ascensor = $('#ascensor').ascensor();           // Init ascensor
      var ascensorInstance = ascensor.data('ascensor');   // Access instance
      
      ascensorInstance.prev();                            // Go to previous floor
      ascensorInstance.next();                            // Go to next floor
      
      ascensorInstance.scrollToFloor(4);                  // Go to floor Index
      ascensorInstance.scrollToFloor('content2');         // Go to floor Name
      
      ascensorInstance.scrollToDirection('up');           // Go up
      ascensorInstance.scrollToDirection('down');         // Go down
      ascensorInstance.scrollToDirection('left');         // Go left
      ascensorInstance.scrollToDirection('right');        // Go right
      
      ascensorInstance.refresh();                         // Refresh floor position
      ascensorInstance.destroy();                         // Remove plugin
      

      Events

      Ascensor emit two event, on scrollStart & scrollEnd, they both return an array with the original floor and the targeted floor.

      var ascensor = $('#ascensor').ascensor();           // Init ascensor
      
      ascensor.on("scrollStart", function(e, floor){
        console.log(floor.from)                           // Return the origin floor
        console.log(floor.to)                             // Return the targeted floor
      });
      
      ascensor.on("scrollEnd", function(e, floor){
        console.log(floor.from)                           // Return the origin floor
        console.log(floor.to)                             // Return the targeted floor
      });
      

      NEW! - Data attribute

      Sometime you need a floor to behave differently in term of direction, you can now easily force this by adding a custom data-attribute on the dom element.

      Here the available attribute:

      data-ascensor-next
      data-ascensor-prev
      data-ascensor-up
      data-ascensor-down
      data-ascensor-left
      data-ascensor-right

      example:

      <div id="ascensor"> 
        <div data-ascensor-left="3" >Content 1</div>   <!-- This will force the left key to scroll to the last floor -->
        <div>Content 2</div>
        <div>Content 3</div>
        <div data-ascensor-right="0" >Content 4</div>  <!-- This will force the right key to scroll to the first floor -->
      </div>
      

      NEW! - Swipe event

      Ascensor now use hiw own swipe event system. Just set swipeNavigation to true, false or "mobile-only" (default).

      Options

      ascensorFloorName
      Type: array of string
      Default: null
      descriptions: Choose and name for each floor, this name will be added in the url as #name
      example: ascensorFloorName: ['content1','content2','content3']

      childType
      Type: string
      Default: div
      descriptions: Specify the child tag if no div (‘section’ or ‘article’)
      example: childType:'article'

      width
      Type: integer or string
      Default: "100%"
      descriptions: the width of your floor (% or pixel)
      example: width: "80%"

      height
      Type: integer or string
      Default: "100%"
      descriptions: the height of your floor (% or pixel)
      example: height: "300px"

      ready
      Type: function
      Default: false
      descriptions: function to execute when ascensor is ready
      example: ready: function(){ alert("ready") }

      direction
      Type: string or object
      Default: 'y'
      descriptions: specify the direction 'x', 'y' or and array of x/y position for each floor [[2,1],[2,2],[3,2]]
      example: direction: [[2,1],[2,2],[3,2]]

      time
      Type: integer
      Default: 300
      descriptions: Specify speed of transition
      example: time: 500

      easing
      Type: string
      Default: linear
      descriptions: Specify easing option (don’t forget to add the easing plugin)
      example: easing: 'easeInElastic'

      swipeNavigation
      Type: boolean or string
      Default: mobile-only
      descriptions: Specify if you want swipe navigation, you can set true, false or “mobile-only” (default)
      example: swipeNavigation: true

      keyNavigation
      Type: boolean
      Default: true
      descriptions: choose if you want direction key support
      example: keyNavigation: false

      queued
      Type: boolean or string
      Default: false
      descriptions: define queued transition.
      false: transition will happen simultaneously for X and Y axis
      "x": will animate on the X axis, then on the Y
      "y": will animate on the Y axis, then on the X
      example: queued: 'x'

      jump
      Type: boolean
      Default: false
      descriptions: Specify is you want ascensor to jump between floor, even if a gap is present between them
      example: jump: true

      wheelNavigation
      Type: boolean
      Default: false
      descriptions: Set to true if you want mousescroll to trigger animation between floor
      example: wheelNavigation: true

      wheelNavigationDelay
      Type: number
      Default: 40
      descriptions: Adjust to delay between mousewheel event to trigger animation
      example: wheelNavigationDelay: 100

      loop
      Type: boolean
      Default: true
      descriptions: Specify if you want ascensor to loop once reach the end of an axis, There is six differents behavior for ascensor.
      true: will reach the further floor on same axis once reach the end, on all axis
      "loop-x": will reach the further floor on same axis once reach the end, only on X axis
      "loop-y": will reach the further floor on same axis once reach the end, only on Y axis
      "increment": will reach next same-axis floor level when reach end end, on all axis
      "increment-x": will reach opposite floor on y axis, but jump to next level on X axis
      "increment-y": will reach opposite floor on y axis, but jump to next level on Y axis
      example: loop: increment-x

      Demo & Examples

      Note that all example are situated in the examples folder of the repository
      Simple
      Horizontal
      Chocolat
      Url
      Swipe
      Loop
      Increment

      Websites using ascensor

      waterevive
      shanaemairs
      reverseburo
      robclowes
      iadindustry
      newworldwhisky
      lucasexbrayat
      scan.dk
      alpineconstruction.dk

      ####Contribution

      You want help? great! For my workflow, I use grunt.js (require node & npm installed)

      1. Fork it
      2. Create your feature branch (git checkout -b my-new-feature)
      3. Add your change/fix
      4. Build project using “grunt build” (in terminal)
      5. Commit your change (only if “grunt build” return no error)
      6. Push to the branch (git push origin my-new-feature) & request pull request!

      ####Donation https://cash.me/$kirkas

      ####Author Léo Galley

      目录
      目录