Anchor zonder Refresh - Forum

Kris Peeters

02-12-2010 12:17 gewijzigd op 02-12-2010 12:30

Een uitgewerkt voorbeeld.

Ik ben bij de essentie gebleven en heb me dus niet te veel aangetrokken van details.
Ik heb het vrij vlug geschreven; het is dus waarschijnlijk niet een "afgewerkt product".

Te doen, als je dit wil namaken:
- maak een map images met daarin "empty.gif" (transparante, kleine image) "image001.jpg", "image002.jpg", "image003.jpg", "image004.jpg", "image005.jpg"
- jquery.js downloaden; index.php, js.js en style.css maken

js.js


// just for the example I put this data in a global var.  Usually you 
// would get this data from a db or xml ...
var images = Array(
  'images/image001.jpg',
  'images/image002.jpg',
  'images/image003.jpg',
  'images/image004.jpg',
  'images/image005.jpg'
);

$(document).ready(function (e) {
  // TO DO: initiate function
  m_navigation.init(hash_has_changed);
});

function hash_has_changed (vars) {
  var action = vars[0];
  switch (action) {
    case 'photo': 
        var image_index = Number(vars[1]);
        var src = images[image_index];
        $('#photo img').attr('src', src);
      break;
    case 'foo':
      // do something else here
      break;
  }
  
}

////////////////////////////////////////////////////////////////////////
/**
*  Navigation class
*  We are using a lot of callbacks and timouts.  
*    The 'this' object can be ambiguous. That is why we use the global 
*    variable m_navigation in our functions.
*    A bit quick & dirty, but it works.
*/

// global var.
var m_navigation = new navigation();

/**
*  constructor
*/
function navigation () {
  this.timer = null;
  this.interval = 20;  // feel free to adapt
}

/**
*  initialize the object.  It is a good idea to call this function in $(document).ready();
*/
navigation.prototype.init = function (callback) {
  if (typeof(callback) == 'function') {
    m_navigation.callback = callback;
    m_navigation.fathom();
  }
  else {
    return false;
  }
  return true;
}

/**
*  Heart of the class.  When ever the url changes after the # symbol, the user-defined (the scripter) callback is called.
*  That callback gets a parameter containing an array of (in php terms $_GET) variables.
*  It is up to that callback to do what ever the scripter wants to.
*/
navigation.prototype.fathom = function () {
  var hash = window.location.hash;
  if (m_navigation.hash != hash) {
    // new situation.  Let's analyze the variables.
    m_navigation.hash = hash;
    var vars = hash.split('/');
    result = Array();
    for (var i=0; i<vars.length; i++) {
      if (vars[i] == "") {
        break;
      }
      if (i == 0) {
        // remove the # character
        while (vars[i].substr(0,1) == "#") {
          vars[i] = vars[i].substr(1);
        }
      }
      result[result.length] = vars[i];
    }
    m_navigation.callback(result);
  }
  m_navigation.timer = setTimeout('m_navigation.fathom()', m_navigation.interval);
}
////////////////////////////////////////////////////////////////////////

index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <link rel="shortcut icon" type="image/gif" href="favicon.gif"/> 
    <meta http-equiv=content-type content="text/html; charset=UTF-8">
    <title> Bookmarkable navigation - jQuery </title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="jquery.js"></script>
    <script src="js.js"></script>
  </head>
  <body>
    <div id="page_container">
      <div id="thumbs">
        <div class="thumb"><a href="#photo/0"><img src="images/image001.jpg"/></a></div>
        <div class="thumb"><a href="#photo/1"><img src="images/image002.jpg"/></a></div>
        <div class="thumb"><a href="#photo/2"><img src="images/image003.jpg"/></a></div>
        <div class="thumb"><a href="#photo/3"><img src="images/image004.jpg"/></a></div>
        <div class="thumb"><a href="#photo/4"><img src="images/image005.jpg"/></a></div>
        <div class="clear"></div>
      </div>
      <div id="photo"><img src="images/empty.gif"/></div>
    </div>
  </body>
</html>

style.css


img {
  border: 0;
}

.clear{
  clear: both;
}

#thumbs .thumb{
  float: left;
}

.thumb {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #000;
  overflow: hidden;
}

.thumb img{
  width: 100%;
}

#photo {
  height: 400px;
}

#photo img {
  height: 100%;
}

Als je hier zelf verder mee wil:
- Zie dat je m_navigation initialiseert bij $(document).ready()
- maak een functie, zoals hash_has_changed, alwaar je doet wat je wil doen.