Skip to content

Commit

Permalink
First commit.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kemayo
kemayo committed Mar 6, 2008
0 parents commit afbe13e
Show file tree
Hide file tree
Showing 11 changed files with 2,345 additions and 0 deletions.
20 changes: 20 additions & 0 deletions MIT-LICENSE.txt
@@ -0,0 +1,20 @@
Copyright (c) 2008 David Lynch, http://davidlynch.org/

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
25 changes: 25 additions & 0 deletions docs/demo_simple.html
@@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery maphilight documentation</title>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.metadata.min.js"></script>
<script type="text/javascript" src="../jquery.maphilight.js"></script>
<script>$(function() {
$('.map').maphilight({});
});</script>
</head>
<body>
<h1>A small map</h1>
<p>This is just a simple example of how the maps look.</p>
<img src="demo_simple.png" class="map" usemap="#simple">
<map name="simple">
<area href="#" shape="poly" coords="47,62, 106,61, 134,72, 135,118, 30,116" title="Default behavior"></area>
<area href="#" shape="poly" coords="32,157, 133,157, 127,192, 127,211, 28,211" class="{strokeColor:'0000ff',strokeWidth:5,fillColor:'ff0000',fillOpacity:0.6}" title="Metadata'd up a bit"></area>
<area href="#" shape="circ" coords="290,102,30" class="{stroke:false,fillColor:'ff0000',fillOpacity:0.6}" title="Metadata'd up a bit"></area>
<area href="#" shape="poly" coords="219,190, 225,175, 237,157, 239,148, 245,142, 251,140, 263,140, 265,139, 310,139, 311,145, 364,182, 363,201, 343,221, 333,213, 329,181, 313,177, 330,234, 295,231, 292,174, 279,176, 282,204, 269,220, 255,206, 267,167, 235,193" class="{stroke:false,fillColor:'000000',fillOpacity:1}" title="Metadata'd up a bit"></area>
</map>
<a href="./">Back to the index</a>
</body>
</html>
Binary file added docs/demo_simple.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1,860 changes: 1,860 additions & 0 deletions docs/demo_world.html

Large diffs are not rendered by default.

Binary file added docs/demo_world.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
150 changes: 150 additions & 0 deletions docs/index.html
@@ -0,0 +1,150 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery maphilight documentation</title>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="ui.tabs.pack.js"></script>
<link rel="stylesheet" type="text/css" href="ui.tabs.css" />
<style type="text/css">
body {
width: 80%;
margin: 0 auto;
line-height:1.5em;
}
body, h1, h2 {
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
}
h1 {
margin: 1em 0 1.5em;
font-size: 18px;
}
h2 {
margin: 2em 0 1.5em;
font-size: 16px;
}
h3 {
background: #596380;
color: #fff;
margin-bottom:0.3em;
padding: 0.5em 0 0.5em 1em;

}
p {
margin: 0;
}
pre, pre+p, p+p {
margin: 1ex 0 0;
}
pre {
background-color: #ddd;
border: 1px solid #ccc;
color: #000;
line-height: 1.1em;
overflow: auto;
padding: 5px;
}
code {
font-family: "Courier New", Courier, monospace;
}
.ui-tabs-nav li {
border: 1px solid #97A5B0;
border-bottom: none;
background: #ddecf5;
}
li.ui-tabs-selected {
border: 2px solid #97A5B0;
border-bottom: none;
background: #fff;
}
.options dt, .methods dt {
background: #CFD4E6;
}
</style>
<script type="text/javascript">$(function() {
$('.tabs').tabs();
});</script>
</head>
<body>
<h1>jQuery maphilight documentation</h1>
<p>maphilight applies to images with a 'usemap' attribute, and outlines the areas defined in their map on mouseover.</p>
<p>It provides a single jQuery function: <code>$.maphilight</code></p>
<p>This would hilight every image with a map on the page: <code>$('img[usemap]').maphilight()</code></p>
<h2>Demos</h2>
<p><a href="demo_simple.html">The simple demo</a> (with awful art)</p>
<p><a href="demo_world.html">The complicated demo</a> (with so many areas that it <em>will</em> have speed issues.)</p>
<h2>Plugin methods</h2>
<dl class="methods">
<dt><a href="#maphilight"><code>maphilight( [options] )</code>: returns jQuery</a></dt>
<dd>Add hilight behavior to an imagemap</dd>
<dt><a href="#defaults"><code>$.maphilight.defaults</code></a></dt>
<dd>Default settings for all maphilight calls</dd>
</dl>
<div>
<a name="maphilight"></a>
<h3><code>maphilight( [options] )</code></h3>
<ul class="tabs">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
</ul>
<div id="overview">
<p>The method that adds hilight behavior to an imagemap.</p>
<h4>Arguments:</h4>
<dl>
<dt><code>options</code> (optional)</dt>
<dd>
<p>A set of key/value pairs that configures the map. All options are optional.</p>
<p>The <a href="http://docs.jquery.com/Plugins/Metadata">metadata plugin</a> is supported, and all options can be overriden per-<code>img</code>, or per-<code>area</code>.</p>
<p>Example: to make one particular hilight green:</p>
<pre><code>&lt;area ... class="{fillColor:'00ff00'}"></code></pre>
</dd>
</dl>
</div>
<div id="options">
<h4>Options:</h4>
<dl class="options">
<dt><code>fill</code> (Boolean. Default: true)</dt>
<dd>Whether to fill the shape</dd>
<dt><code>fillColor</code> (String. Default: '000000')</dt>
<dd>The color to fill the shape with</dd>
<dt><code>fillOpacity</code> (Number. Default: 0.2)</dt>
<dd>The opacity of the fill (0 = fully transparent, 1 = fully opaque)</dd>
<dt><code>stroke</code> (Boolean. Default: true)</dt>
<dd>Whether to outline the shape</dd>
<dt><code>strokeColor</code> (String. Default: 'ff0000')</dt>
<dd>The color of the outline</dd>
<dt><code>strokeOpacity</code> (Number. Default: 1)</dt>
<dd>The opacity of the outline (0 = fully transparent, 1 = fully opaque)</dd>
<dt><code>strokeWidth</code> (Number. Default: 1)</dt>
<dd>The thickness of the outline</dd>
<dt><code>fade</code> (Boolean. Default: true)</dt>
<dd>Whether to fade in the shapes on mouseover</dd>
</dl>
</div>
</div>
<div>
<a name="defaults"></a>
<h3><code>$.maphilight.defaults</code></h3>
<p>The defaults for all uses of maphilight can be set here. If you manually replace this, you <em>have</em> to specify all options.</p>
<pre><code>$.fn.maphilight.defaults = {
fill: true,
fillColor: '000000',
fillOpacity: 0.2,
stroke: true,
strokeColor: 'ff0000',
strokeOpacity: 1,
strokeWidth: 1,
fade: true
}</code></pre>
</div>
<h2>Changelog</h2>
<ul>
<li>1.0: First release.</li>
</ul>
<h2>Tested with</h2>
<ul>
<li>Firefox 3</li>
<li>IE 6</li>
</ul>
</body>
</html>
11 changes: 11 additions & 0 deletions docs/jquery-1.2.3.pack.js

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions docs/jquery.metadata.min.js
@@ -0,0 +1,13 @@
/*
* Metadata - jQuery plugin for parsing metadata from elements
*
* Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Revision: $Id: jquery.metadata.js 3620 2007-10-10 20:55:38Z pmclanahan $
*
*/
(function($){$.extend({metadata:{defaults:{type:'class',name:'metadata',cre:/({.*})/,single:'metadata'},setType:function(type,name){this.defaults.type=type;this.defaults.name=name;},get:function(elem,opts){var settings=$.extend({},this.defaults,opts);if(!settings.single.length)settings.single='metadata';var data=$.data(elem,settings.single);if(data)return data;data="{}";if(settings.type=="class"){var m=settings.cre.exec(elem.className);if(m)data=m[1];}else if(settings.type=="elem"){if(!elem.getElementsByTagName)return;var e=elem.getElementsByTagName(settings.name);if(e.length)data=$.trim(e[0].innerHTML);}else if(elem.getAttribute!=undefined){var attr=elem.getAttribute(settings.name);if(attr)data=attr;}if(data.indexOf('{')<0)data="{"+data+"}";data=eval("("+data+")");$.data(elem,settings.single,data);return data;}}});$.fn.metadata=function(opts){return $.metadata.get(this[0],opts);};})(jQuery);
113 changes: 113 additions & 0 deletions docs/ui.tabs.css
@@ -0,0 +1,113 @@
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.ui-tabs-hide {
display: none;
}
}

/* Hide useless elements in print layouts... */
@media print {
.ui-tabs-nav {
display: none;
}
}

/* Skin */
.ui-tabs-nav, .ui-tabs-panel {
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
}
.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 4px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
float: left;
margin: 0 0 0 1px;
min-width: 84px; /* be nice to Opera */
}
.ui-tabs-nav a, .ui-tabs-nav a span {
display: block;
padding: 0 10px;
background: url(tab.png) no-repeat;
}
.ui-tabs-nav a {
margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
padding-left: 0;
color: #27537a;
font-weight: bold;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap; /* required in IE 6 */
outline: 0; /* prevent dotted border in Firefox */
}
.ui-tabs-nav .ui-tabs-selected a {
position: relative;
top: 1px;
z-index: 2;
margin-top: 0;
color: #000;
}
.ui-tabs-nav a span {
width: 64px; /* IE 6 treats width as min-width */
min-width: 64px;
height: 18px; /* IE 6 treats height as min-height */
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
*>.ui-tabs-nav a span { /* hide from IE 6 */
width: auto;
height: auto;
}
.ui-tabs-nav .ui-tabs-selected a span {
padding-bottom: 1px;
}
.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active {
background-position: 100% -150px;
}
.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active {
background-position: 100% -100px;
}
.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span {
background-position: 0 -50px;
}
.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span {
background-position: 0 0;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.ui-tabs-disabled {
opacity: .4;
filter: alpha(opacity=40);
}
.ui-tabs-panel {
border-top: 1px solid #97a5b0;
padding: 1em 8px;
background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.ui-tabs-loading em {
padding: 0 0 0 20px;
background: url(loading.gif) no-repeat 0 50%;
}

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
display: inline-block;
}
*:first-child+html .ui-tabs-nav { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
display: inline-block;
}

10 changes: 10 additions & 0 deletions docs/ui.tabs.pack.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit afbe13e

Please sign in to comment.