0.1.0 • Published 9 years ago

xxxrouter v0.1.0

Weekly downloads
2
License
MIT
Repository
github
Last release
9 years ago

xrouter

simple router

var xrouter = (function(){
  var _routers = {};

  var on = function(k, v){
    if(!v) return _routers.k;
    _routers[k] = v;
    return this;
  }

  var _action = function(key){
    var _key = location[key].substr(1).split('?')[0] || 'index';
    _routers[_key] && _routers[_key].call(null);
  }

  return {
    on: on,
    init: function(){
      window.addEventListener('hashchange', function(e){
        _action('hash')
      })
      _action('hash')
    },
    xinit: function(){
      _action('search')
    }
  }
})()
// 单页面模式 使用init初始化 使用location.hash 比如http://xxx.com#page1
// 多页面模式 使用xinit初始化 使用locaton.search 比如http://xxx.com?page1

单页面 init demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
      .page{
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <li><a href="#page1">page1</a></li>
        <li><a href="#page2">page2</a></li>
        <li><a href="#page3">page3</a></li>
        <li><a href="#page4">page4</a></li>
      </ul>
      <h1 id="page1" class="page">this is page1!</h1>
      <h1 id="page2" class="page">this is page2!</h1>
      <h1 id="page3" class="page">this is page3!</h1>
      <h1 id="page4" class="page">this is page4!</h1>
    </div>
    <script type="text/javascript" src="http://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
    <script src="index.js"></script>
    <script>
      xrouter.on('page1', function(){
        $('.page').hide()
        $('#page1').show();
      }).on('page2', function(){
        $('.page').hide()
        $('#page2').show();
      }).on('page3', function(){
        $('.page').hide()
        $('#page3').show();
      }).on('page4', function(){
        $('.page').hide()
        $('#page4').show();
      }).init();
    </script>
  </body>
</html>

多页面 xinit demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
      .page{
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <li><a href="?page1">page1</a></li>
        <li><a href="?page2">page2</a></li>
        <li><a href="?page3">page3</a></li>
        <li><a href="?page4">page4</a></li>
      </ul>
      <h1 id="page1" class="page">this is page1!</h1>
      <h1 id="page2" class="page">this is page2!</h1>
      <h1 id="page3" class="page">this is page3!</h1>
      <h1 id="page4" class="page">this is page4!</h1>
    </div>
    <script type="text/javascript" src="http://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
    <script src="index.js"></script>
    <script>
      xrouter.on('page1', function(){
        $('.page').hide()
        $('#page1').show();
      }).on('page2', function(){
        $('.page').hide()
        $('#page2').show();
      }).on('page3', function(){
        $('.page').hide()
        $('#page3').show();
      }).on('page4', function(){
        $('.page').hide()
        $('#page4').show();
      }).xinit();
    </script>
  </body>
</html>
routersimpletiny
0.1.0

9 years ago