1.0.8 • Published 5 years ago
navigate-js-router v1.0.8
navigate-js-router.js
Client Side Router
html
<div style="float: left;">
<button data-route="/">Root</button>
<button data-route="/vista2">Empty</button>
<button data-route="/contacts">Contacts</button>
<button data-route="/about">About</button>
<div id="container" style="margin-top: 15px;"></div>
</div>
<div style="float: left;">
<div data-route-view="Root">
<img src="1.jpg" alt="" style="width: 300px">
</div>
<div data-route-view="Contacts">
<img src="2.jpg" alt="" style="width: 300px">
</div>
<div data-route-view="About">
<img src="3.jpg" alt="" style="width: 300px">
</div>
<div data-route-view="vista2">
<img src="4.jpg" alt="" style="width: 300px">
</div>
</div>
<script src="../navigate-js-router.js"></script>
<script src="main.js"></script>
main.js
var container = document.getElementById('container');
navigate.setRoutes([
{
path: '/',
view: 'Root',
before: function(){
container.innerHTML += 'BEFORE Root >><br>'
},
after: function(){
container.innerHTML += 'AFTER Root >><br>';
}
},
{
path: '/contacts',
view: ['Contacts', 'Root'],
allow: false,
key: '321-321321',
before: function(){
container.innerHTML += 'BEFORE Contacts <br>';
}
},
{
path: '/about',
view: 'About',
before: function(data){
container.innerHTML += 'BEFORE ABOUT <br>'
console.log(data)
}
}
]);
navigate.init('/about?myparam=valueparam&otroparam=otrovalor');
Ejemplos de uso
// establece las rutas
navigate.setRoutes([
{
path: '/',
view: 'Root',
before: function(){
container.innerHTML += 'BEFORE Root >><br>'
},
after: function(){
container.innerHTML += 'AFTER Root >><br>';
}
},
{
path: '/contacts',
view: ['Contacts', 'Root'], // se pueden pasar varias vistas
allow: false, // vista no permitida
key: '321-321321', // proporsionar este "key" en las opciones para acceder a esta vista
before: function(){
container.innerHTML += 'BEFORE Contacts <br>';
}
},
{
path: '/about',
view: 'About',
before: function(data){
container.innerHTML += 'BEFORE ABOUT <br>'
console.log(data)
}
}
]);
// agrega una nueva ruta
navigate.addRoute('/newPath', {
view: "myView",
show: true
})
// actualiza las opciones de la ruta
navigate.updateRoute('/about', {
view: "otherView"
})
navigate.delRoute('/about') // elimina la ruta
navigate.getRoutes() // optiene todas las rutas
navigate.getRoutes('/about') // optiene la ruta especificada
navigate.getParams() // obtiene todos los parametros de la url
navigate.getParams('myparam') // obtiene el parametro especificado de la url
navigate.init() // inicia el modulo ( oculta las vistas y agrega los "Listener" )
navigate.init('/about') // inicia el modulo y va a esta ruta por defecto
navigate.goto('/contacts') // ir con las opciones establecidas en "getRoutes"
// ir con opciones personalizadas, pero sin cambiar las opciones en "getRoutes"
navigate.goto('/about', {
show: false,
after: function(){
console.log("Whatever after")
}
})
navigate.goto('/about', {
before: function(){
console.log("Whatever before")
},
view: "otherView",
update: true // ir con las opciones personalizadas y cambiarlas en "getRoutes"
})
navigate.getViews() // optiene todas las vistas ( '[data-route-view]' )
navigate.getActiveRoutes() // optiene todas las rutas activas ( '[data-route]' )
navigate.bindEvent() // agrega los "Listener" a las rutas activas ( '[data-route]' )
navigate.hideViews() // aculta todas las vistas
navigate.addOnLoad() // agrega el modulo al evento "load"
navigate.addOnhashchange() // agrega el modulo al evento "hashchange"