Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
62 lines (48 sloc) 2.48 KB
bullsEye - a jQuery plugin
==============================================================
Author: Tony Landis
License: GPL
Website: http://www.tonylandis.com
Example: http://tony-landis.github.com/jquery-plugins/bullseye.html
==============================================================
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.
It was created so that large tables of data can be shown,
and as the mouse is moved over the cells, visual effects
are applied to the table so that the corresponding row
and column header are highlighted so the current position
within the table of data is revealed.
It also animates lines from the selected cell to the cell's
corresponding row and column headers, making the
identification of the cell's headers even easier to see.
When moving the mouse over a column or row header, it will
highlight all intersecting cells and draw the line to them -
this enables the quick identification of what cells are
populated with data, as the application this plugin was
developed for has intermittent data.
So for example, if the mouse is moved over a column heading,
only the cells in that column that are populated with data
will be highlighted and lines will drawn from each those
populated cells to it's row heading for quick visual
reference.
The last bit of functionality is to either fade in or zoom
in extra data on the cell level that is hidden by default
when hovering over a cell.
The hover content can be HTML formatted and when it is revealed,
the div used will automatically center over the selected cell
and will be sized to align with total amount of cells
configured - for example it can be 3 rows and 5 columns, or 3
row and 3 columns. This is visually appealing because the
hover content will fit in the existing grid lines.
This is my first jQuery plugin - if anyone finds bugs or has
usability suggestions let me know. I have tested it in Firefox,
Opera, and Safari and the behaviors are pretty much identical.
If anyone wants to develop just fork and contact me if you
have developed something you feel should be merged into
this repository.
==============================================================