slidesUI

This is a sweet little intrapage navigation plugin I made. I’m working on writing documentation, but here’s the code:

[js]
/*
* jQuery slidesUI plugin
* Version 1.0 (02/23/2010)
* @requires jquery.history.js <http://www.mikage.to/jquery/jquery_history.html>
*
* Examples at: http://www.liveintensely.com/slidesUI/
* Copyright (c) 2010 Michael Marcacci <http://liveintensely.com>
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Modified by Mike Marcacci <http://liveintensely.com> to include sizingMethod parameter
*
*/

(function($){

$.fn.slidesUI = function(options) {

var options = $.extend({}, $.fn.slidesUI.defaults, options);

var selector = this;

return $(this).addClass(options.uiClass).each(function(i){

// hide all except active slide
$("."+options.slideClass, this).not("."+options.activeClass).hide();
$.fn.slidesUI.log("All slides without class=\""+options.activeClass+"\" hidden.");

// if no active slide already has the activeClass, activate first slide
if ($("."+options.slideClass, this).filter("."+options.activeClass).size() == 0) {
$("."+options.slideClass, this).first().show().addClass(options.activeClass);
$.fn.slidesUI.log("No slide found with class=\""+options.activeClass+"\". First slide activated.");
}

var uiId = ”;

// set an ID for UI if doesn’t already have one
if ($(this).attr(‘id’) == undefined || $(this).attr(‘id’).length < 1) {
uiId = options.uiIdPrefix+$.fn.slidesUI.uiRegistry.length;
$(this).attr(‘id’, uiId);
$.fn.slidesUI.log("No ID found for UI. Assigned the new ID: "+uiId);
} else {
uiId = $(this).attr(‘id’);
}

// register UI
$.fn.slidesUI.registerUi(uiId, options);

var slideIds = [];

$("."+options.slideClass, this).each(function(i){
if ($(this).attr(‘id’) != undefined) {

// register slides to UI. the slide ID used is NOT prepended with slideIdPrefix
$.fn.slidesUI.registerSlide($(this).attr(‘id’), uiId);

// prepend slide id so scrolling works
if (options.slideIdPrefix.length > 0) {
$(this).attr(‘id’, options.slideIdPrefix + $(this).attr(‘id’));
$.fn.slidesUI.log("Slide ID prefixed to: "+$(this).attr(‘id’))
}

// add id to list to search for links
slideIds.push($(this).attr(‘id’))
}
});

// update links for this slide
$.fn.slidesUI.updateLinks(slideIds);

if (options.useHistory) {
if ($.historyInit) {
$(function(){
$.historyInit($.fn.slidesUI.silentOpen, window.location.pathname);
})
} else {
$.fn.slidesUI.log("Option useHistory set to true, but jquery.history plugin not found. Not using history.");
}
}

});
};

// default preferences
$.fn.slidesUI.defaults = {
activeClass: "active",
linkClass: "slideLink", // class to look for in anchor tags: directs <a class="linkClass" href="#slide-id" /> to slide
slideClass: "slide", // class of element within UI to convert to slide: converts <div class="slideClass">Slide Content</div> to a slide if inside initialized UI
slideIdPrefix: "slide-", // prefix to add to initialized slides to avoid page jumps when using hashes in URI for history or navigation. Set blank ” to disable
useHistory: false, // true to make browser’s back button work with slides. only works once per page. requires jquery.history plugin.
hideMethod: function(slide){ // function to hide slide. passed the slide object as parameter
$(slide).hide()
},
showMethod: function(slide){ // function to show slide. passed the slide object as parameter
$(slide).show()
},
uiClass: "slidesUI", // class applied by slidesUI when initialized
uiIdPrefix: ‘slidesUI-‘ // prefix given to UIs without IDs
}

// links all slides by ID to preferences of corresponding UI
$.fn.slidesUI.slidesRegistry = [];

// saves preferences by ID of UIs
$.fn.slidesUI.uiRegistry = [];

// register slide by ID
$.fn.slidesUI.registerSlide = function(slideId, uiId){
if ($.fn.slidesUI.slidesRegistry[slideId] = uiId) {
$.fn.slidesUI.log("Slide with id=\"" + slideId + "\" registered to UI with id=\""+uiId+"\"");
return true;
}
}

// register UI by ID
$.fn.slidesUI.registerUi = function(id, options){
if ($.fn.slidesUI.uiRegistry[id] = options) {
$.fn.slidesUI.log("UI with id=\"" + id + "\" registered.");
return true;
}
}

// rescans the page for slide links and directs them to the proper location
$.fn.slidesUI.updateLinks = function(slideIds){
if (slideIds != null) {
if ( !$.isArray(slideIds) ){
slideIds = [slideIds]
}
} else {
slideIds = []
$.each($.fn.slidesUI.slidesRegistry, function(k,v){
slideIds.push(k)
});
}

$.fn.slidesUI.log("Preparing to filter the following slides:");
$.fn.slidesUI.log(slideIds);

$("a").filter(function(i){
var targetId = this.hash.substr(1);
if ((this.protocol+this.hostname+this.pathname) == (window.location.protocol+window.location.hostname+window.location.pathname) && $.inArray(targetId, slideIds)) { // makes sure it redirects to the same page URI, and directs to specified slides
$.fn.slidesUI.log("Activating link for "+targetId);

$(this).click(function(e){
e.preventDefault();

// open the target
$.fn.slidesUI.open(targetId)

return false;
});
}
});

$.fn.slidesUI.log("Links updated.")
}

// logs actions
$.fn.slidesUI.log = function(message) {
// uncomment to $.fn.slidesUI.log actions to firebug
// console.log(message);
}

// open a slide without triggering history
$.fn.slidesUI.silentOpen = function(targetId) {
if (targetId) {
var targetUi = $.fn.slidesUI.slidesRegistry[targetId];
var targetOptions = $.fn.slidesUI.uiRegistry[targetUi];

// hide previously active slide with hideMethod
$("." + targetOptions.slideClass, "#" + targetUi).filter("." + targetOptions.activeClass).removeClass(targetOptions.activeClass).each(function(i){
targetOptions.hideMethod(this);
$.fn.slidesUI.log("Slide with id=\"" + $(this).attr(‘id’) + "\" hidden.")
})

// show target slide with showMethod
targetOptions.showMethod($("#" + targetOptions.slideIdPrefix + targetId).addClass(targetOptions.activeClass)[0]);
$.fn.slidesUI.log("Slide with id=\"" + targetId + "\" opened")
} else {
$.fn.slidesUI.log("No targetId passed to open()")
}
}

// open a slide
$.fn.slidesUI.open = function(targetId) {
if (targetId) {
var targetUi = $.fn.slidesUI.slidesRegistry[targetId];
var targetOptions = $.fn.slidesUI.uiRegistry[targetUi];

if (targetOptions.useHistory && $.historyInit) {
$.historyLoad(targetId);
} else {
$.fn.slidesUI.silentOpen(targetId);
}
}
}

})(jQuery)
[/js]