Clickables

Clickables is a MooTools plugin that makes list-items clickable to the link inside of the list item.

Plugin Code (Version 1.0)

var Clickables = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		elements: 'li',
		selectClass: '',
		anchorToSpan: false
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//set elements
		this.elements = $$(this.options.elements);
		//set clickable
		this.doClickables();
	},
	
	//a method that does whatever you want
	doClickables: function() {
		
		//for all of the elements
		this.elements.each(function(el) {
			
			//get the href
			var anchor = el.getElements('a' + (this.options.selectClass ? '.' + this.options.selectClass : ''))[0];
			
			//if we found one
			if($defined(anchor)) {
				
				//add a click event to the item so it goes there when clicked. 
				this.setClick(el,anchor.get('href'));
				
				//modify anchor to span if necesssary
				if(this.options.anchorToSpan) {
					var span = new Element('span',{
						text: anchor.get('text')
					}).replaces(anchor);
				}
			}
		},this);
	},
	
	//ads the click event
	setClick: function(element,href) {
		
		element.addEvent('click', function() {
			window.location = href;
		});
	}
	
});

/* example usage */
window.addEvent('domready', function() {
	var clix = new dwClickables({
		elements: '.block-list li',
		anchorToSpan: true
	});
});

XHTML List Format

<ul class="block-list">
	<li>Clicking this block will take you to <a href="https://davidwalsh.name">DavidWalsh.name</a></li>
	<li>Clicking this block will take you to <a href="http://scriptandstyle.com">Script&Style.com</a>.</li>
	<li>Clicking this block will take you to <a href="http://bandwebsitetemplate.com">BandWebsiteTemplate.com</a></li>
	<li>Clicking this block will take you to <a href="http://mootools.net">MooTools.net</a></li>
</ul>

Options & Events

• elements: (defaults to all list items) a collection of list items to apply the effect to.
• selectClass: (defaults to '')the class of the link inside the element that should be used as the list item's URL. If not defined, the first link will be used.
• anchorToSpan: (defaults to false) turn the anchor into a span so it looks like text?

Methods

There are no public methods.

Code Revisions & Bug Fixes

None.