jQuery plugin for typical show/hide cases. You can write handlers easily, and switch them any time. This repository contains accordion, slideDown, dropDown functionalities too.
Pull request Compare This branch is even with zsotyooo:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
js
syles
README.md

README.md

customViewer

jQuery plugin for typical show/hide cases. You can write handlers easily, and switch them any time. This repository contains accordion, slideDown, dropDown functionalities too.

Usage:

Applying to HTML elements:

$(".accordion > li").customViewer({
	timeoutTime: 1000,
	hideAll: true,
	contentSelector: 'ol',
	handlerSelector: 'span',
	showHandler: 'accordion'
});

Options:

{
	timeoutTime: 1000, //automatic hiding time in milliseconds
	animationDuration: 'fast', //the animation's speed
	activeClassName: 'active', //classname to be added to the element when showed
	hoverClassName: 'over', //classname to be added to the element when the mouse is over
	hideAll: true, //wheter or not to hide every other shown content
	handlerEvent: 'click', //which event on the handler element shows the content
	showHandler: 'slidedown', //the most important part. This specifies the showHandler. possible values: null/accordion/dropdown/slidedown
	handlerSelector: '.cv-handle', //selector for the handler element relative to the parent.
	contentSelector: '.cv-content' //selector for the content element relative to the parent.
}

Changing the show handler runtime:

$(".accordion > li").customViewer('setShowHandler',['newhandler']);

Changing the options runtime:

$(".accordion > li").customViewer('setOptions',[{option1: 'val1', option2: 'val2'}]);

Writing your own handler:

$.customViewer.addShowHandler('myhandler', function() {

	this.init = function(customViewerInstance) {
		//mandatory function
		//called when the showHandler is set to the customViewer
		//customViewerInstance: The main plugin which controls the show handler
		//customViewerInstance.element -> the HTML element the plugin is applied to
		//customViewerInstance.handler -> the handler HTML element
		//customViewerInstance.content -> the content HTML element
		//customViewerInstance.setActive(bool) -> sets the activeClassName and fires events
		//customViewerInstance.hideAllConcurrent() -> hides the other instances if hideAll option is true
		//customViewerInstance.setHideTimer() -> calls this showhandlers hide() function in options.timeoutTime milliseconds
		//customViewerInstance.clearHideTimer() -> cancels the hide timer.
		//customViewerInstance.disableHide -> if set to true hiding is disabled (you must handle it in your showHandler's hide function)
		
	};

	this.hide = function() {
		//mandatory function
		//This function is called to show the content when hideAll is set to true
	};

	this.handlerHandled = function(){
		//mandatory function
		//This function is called when the handler element is handled
	}

	this.destory = function() {
		//optional
		//called when the showHandler this is changed to an other one
		//you can change back everything here to the original state
	};

	this.contentMouseOver = function (){
		//optional
		//You can write also eventhandlers here for events on the handler or the content element
		//function name format: handler or content + mammal case event
		//e.g: this.handlerClick, this.handlerMouseOver, this.contentMouseOut...
	}

});

Custom events triggered on the plugin's target element

  • cutomviewer-handlerchanged: when the handler has been changed
  • cutomviewer-show: when the content is shown
  • cutomviewer-hide: when the content is hidden