Fork me on GitHub

JQUERY.BULLSEYE.JS


This plugin converts a normal table with both row and column level headers to an somewhat interactive format – it is named bullsEye because the goal was to create a targeting effect when the mouse is being moved on the cells and row and column headings. Maybe something like “draw cell lines” or “table zoom” would have been more appropriate but I don’t feel the need to agonize over names.
Jan Feb Mar Apr May Jun Jul Aug Oct Sep Nov Dec
2009 A0 A2 A3 A4 A5 A6 A8 A10 A11
2008 B1 B2 B6 B8 B10 B11
2007 C0 C1 C3 C4 C5 C8 C9 C10
2006 D0 D1 D2 D5 D6 D7 D8 D9 D11
2005 E0 E1 E2 E3 E4 E5 E6 E8 E9 E10 E11
2004 F1 F2 F4 F5 F6 F8 F9 F11
2003 G0 G1 G3 G4 G6 G7 G8 G9
2002 H0 H1 H2 H4 H5 H6 H8 H9 H10 H11
2001 I2 I3 I4 I5 I6 I7 I10 I11
2000 J0 J1 J2 J3 J4 J5 J6 J8 J9 J10 J11
1999 K0 K2 K3 K4 K5 K6 K7 K8 K10 K11
1998 K0 K1 K2 K4 K5 K6 K7 K8 K9 K10 K11
1997 L0 L1 L2 L3 L4 L5 L6 L9 L10 L11

 

code for the jquery.selecttime.js examples above

<link rel="stylesheet" 
	type="text/css" 
	href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css"> 
<link rel="stylesheet" 
  href="http://github.com/tony-landis/jquery-plugins/raw/master/bullseye/bullseye.css" 
	type="text/css"> 
<script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>   
<script type="text/javascript" 
	src="bullseye/jquery.hoverIntent.js"></script> 
<script type="text/javascript" 
	src="bullseye/jquery.bullseye.js"></script> 
<script type="text/javascript" charset="utf-8"> 
	$(document).ready(function(){
		$('div#bullseye').bullseye({
			'use_rows':3,
			'use_cols':3,
		});	
	});
</script>

<div id="bullseye">
<table>
....
</table>
</div>

 

 

bullsEye Screenshots

authors

tony landis (www.tonylandis.com)

download

you can download this project in either zip or tar formats.

you can also clone the project with git by running:

$ git clone git://github.com/tony-landis/jquery-plugins