\n\t\t
\n\t\t...\n\t
\n\nEvery page is a div with the CSS attribute _l-page_. Property _leap-bind_ defines the attributes of the given page like _name_ and _title_ and callback functions. \n\nName must be present and unique. All other attributes are optional\n\nTitle if present will change the title of the browser window.\n\n_guard_ functions are called when transition is made to the given page. Those functions receives 3 parameters: \n- page name transiting from\n- page name transiting to and \n- a callback.\n\nYou need to pass a boolean value to that callback. If it returns true, the transition is allowed, otherwise no transition is made.\n\n_afterhide_ function is called when a given page is hidden because a transition is made to another page.\n\n_aftershow_ function is executed whem the given page is selected as current.\n\n_beforehide_ function is called before any transition is made.\n\n_beforeshow_ function is called before any transition is made.\n\n_animation_ identifies which animation should be shown while transiting to the given page.\n\nWhen page loading is done, just call:\n\n\tleaper.init();\n\nAnd you can start paging right away.\n\nIf you create leaper pages by dynamic content (ko binding or anything), the following function can be used after the DOM manipulation is finished:\n\n\tleaper.makeLeap( domElement );\n\n\n\n#### Multiple pages\n\nOne can define multiple pages container in a single web-app. This way you can define pages for the main app, and control image galleries, menus, tab views through pages as well.\n\nSee [pages.jade](https://raw.github.com/imrefazekas/leaper.js/master/views/pages.jade) for an example...\n\n\n#### Explicit paging\n\nBy simple JS, the leaper can be controlled. 3 functions can be called from any JS code:\n\n\tleaper.leapTo( unityName, pageRef, animation, parameters )\n\nand\n\n\tleaper.next( unityName, animation, parameters )\n\nand\n\n\tleaper.prev( unityName, animation, parameters )\n\nFirst lets you to navigate to the page _\"pageRef\"_ of the container _\"unityName\"_ by the optional parameter: _\"animation\"_ which specifies the transition animation. The 4th parameter is an array of parameters as described [below](#parameters).\n\nThe function _next_ is a simple \"nexter\" which transit the given container to the next page in the order you defined them.\n\nFunction _prev_ is a simple \"prever\" which transit the given container to the previous page in the order you defined them.\n\n\n#### Links / declarative navigation\n\nBy extending an element with the attribute _leap-link_, [Leaper](https://github.com/imrefazekas/leaper.js) makes a 'link' from it by adding a JS function performing the navigation defined.\n\n\t
Back\n\nPath string should contain a container name and page name separated by a '.'\nWorks by clicking on or touching that item or receiving and event _'leapTo'_.\n\n\n#### Parameters\n\nBy extending the name of the links introduced above, you can bypass textual parameters as a declarative way, or giving a 4th array-type parameter to the _leapTo_ method as an explicit way.\n\n\t
Back\n\nAll affected guard and before* functions receive the array\n\t\n\t['doNotSave', 'doNotAnimate']\n\nOr as an explicit example:\n\n\tleaper.leapTo( 'containerName', 'pageName', ['doNotSave', 'doNotAnimate'] );\n\n\n#### Dynamic links / dynamic navigation\n\nBy extending an element with the attribute _leap-eval_, [Leaper](https://github.com/imrefazekas/leaper.js) makes a 'link' from it by calling the JS function you give and consider the returning string value as a navigation link to be transited to. Leap-eval functions are async so the passed callback function has to be used for returning a value.\n\n\t
Back\n\t...\n\tfunction routing(callback){\n\t\tcallback('menu.Menu2');\n\t}\n\nThe string object given to the callback function must represent a real leap path which should contain a container name and page name separated by a '.'\nWorks by clicking on or touching that item or receiving and event _'leapTo'_.\n\n\n#### Global navigator\n\nYou can define a function which is called when a transition is made in any of your page containers.\n\n\tleaper.navigator( function(err, name, from, to, animation){\n\t\tconsole.log( 'Global navigation callback:', err, name, from, to, animation);\n\t} );\n\n\n#### Flow-layout\n\nLeapers can manage pages not just as cards but as a horizontal or vertical sequence where pages are ordered into a single flow and elements are scrolled in a bulk.\n\nTo define such leaper, you have to define the _unity_ like this:\n\n\t.l-unity.container(leap-bind=\"{ name:'footer', type:'sequence', angle: 0, elementCount: 3 }\")\n\t\t.l-page.hcard(leap-bind=\"{ name: 'Page1' }\")\n\t\t...\n\t\t.l-page.hcard(leap-bind=\"{ name: 'PageLast' }\")\n\t\t\t[content]\n\nThe parameter\n\n\ttype:'sequence'\n\ntells the [Leaper](https://github.com/imrefazekas/leaper.js) to order the pages into a sequence, with the given angle.\n\n\t0 means horizontal, 1 means vertical alignement.\n\nThe parameter _elementCount_ defines how many pages can be seen in the container. This helps leaper to not scroll beyond the end of the pages.\n\n__Note__: for such layout you have to define the necessary CSS properties of the given pages. Unities and pages must have fixed width or height like you can see in the CSS file of the example page.\n\n\n#### Closing page\n\nYou have the opportunity to add to a page an element with class _.l-close_ which - by clicking or tapping on it - makes the given current page disappear. It is helpful if the leaper paging is added to popup-like solution.\n\n\t...\n\t.l-page(leap-bind=\"{ name: 'Info', animation: 'fadeIn' }\")\n\t\t\ttext.l-close OK \n\t...\n\n\n#### Customization\n\nBehavior of [Leaper](https://github.com/imrefazekas/leaper.js) can be customized. \n\n\n\t\tleaper.randomAnimation( boolean );\n\ndefines if function _next_ should take a random animation or the next one in the row. Default: _true_.\n\n\n\t\tleaper.allowOverlappingAnimation( boolean );\n\nSets if leaper allows paging before the previous animation ends. Default: _false_.\n\n\n\t\tleaper.callbackTimeout( millisec );\n\nDefines the callback of the leaper for _aftershow_ and _afterhide_ callbacks. Due to the customizable [animate.css](http://daneden.me/animate/), one can have custom animation duration. This functions allows you to set your own if have one.\n\n\n\t\tleaper.customAnimations( arra );\n\nBy custom [animate.css](http://daneden.me/animate/) one needs to able to set which animation is supported by the css created. This function lets the [Leaper](https://github.com/imrefazekas/leaper.js) to know about it.\n\n\n\n","maintainers":[{"email":"imre.fazekas@icloud.com","name":"imre.fazekas"}],"time":{"modified":"2022-07-13T14:00:26.145Z","created":"2013-09-03T14:53:11.904Z","0.1.0":"2013-09-03T14:53:34.275Z","0.1.1":"2013-09-04T19:45:07.879Z","0.1.2":"2013-09-05T07:24:19.528Z","0.1.3":"2013-09-07T21:46:48.968Z","0.1.4":"2013-09-07T21:48:47.206Z","0.1.5":"2013-09-08T06:07:37.472Z","0.1.6":"2013-09-09T17:52:08.854Z","0.1.7":"2013-09-09T18:02:35.726Z","0.1.8":"2013-09-11T22:23:01.611Z","0.1.9":"2013-09-11T22:28:00.790Z","0.2.0":"2013-09-12T08:23:12.583Z","0.2.1":"2013-09-18T12:30:22.189Z","0.2.2":"2013-09-19T06:06:38.337Z","0.2.3":"2013-09-19T19:46:28.224Z","0.2.4":"2013-09-19T19:59:47.185Z","0.2.6":"2013-09-19T20:19:14.416Z","0.2.7":"2013-09-19T20:38:35.019Z","0.3.0":"2013-09-19T23:36:46.417Z","0.3.1":"2013-09-19T23:47:59.237Z","0.3.2":"2013-09-20T05:14:52.692Z","0.3.3":"2013-09-20T09:39:57.964Z","0.3.4":"2013-09-20T09:48:59.254Z","0.3.5":"2013-09-20T09:56:38.422Z","0.3.6":"2013-09-20T10:17:36.730Z","0.3.7":"2013-09-21T12:44:11.726Z","0.4.0":"2013-09-27T07:55:55.695Z","0.4.1":"2013-09-27T08:06:13.384Z","0.4.2":"2013-10-01T20:49:43.800Z","0.4.3":"2014-01-02T17:38:19.840Z","0.5.0":"2014-02-03T22:09:08.529Z","0.5.1":"2014-02-03T22:36:40.504Z","0.5.2":"2014-02-14T13:50:15.927Z","0.5.3":"2014-02-26T23:44:14.339Z","0.5.4":"2014-02-27T11:17:14.364Z","0.6.0":"2014-02-27T11:28:12.671Z","0.6.1":"2014-02-27T13:36:01.816Z","0.6.2":"2014-02-27T14:33:54.155Z","0.6.3":"2014-02-27T14:49:37.376Z","0.6.4":"2014-02-27T15:01:40.812Z","0.6.5":"2014-02-27T17:01:35.029Z","0.6.6":"2014-02-27T17:08:11.840Z","0.6.7":"2014-02-27T17:27:07.906Z","0.6.8":"2014-02-27T17:40:33.698Z","0.6.9":"2014-02-27T18:05:15.240Z","0.6.10":"2014-03-01T19:46:55.885Z","0.7.0":"2014-03-11T08:43:52.628Z","0.8.0":"2014-04-19T18:25:43.197Z","0.8.1":"2014-04-23T15:32:31.337Z","0.8.2":"2014-08-11T14:09:04.881Z"},"author":{"name":"Imre Fazekas","email":"mail@imrefazekas.me"},"repository":{"type":"git","url":"git://github.com/imrefazekas/leaper.js.git"},"readmeFilename":"README.md","homepage":"https://github.com/imrefazekas/leaper.js","keywords":[],"bugs":{"url":"http://github.com/imrefazekas/leaper.js/issues"},"users":{}}