JQuery in Action 2nd edition: chapter 8
jquery.termifier.js
(function($){
$.fn.termifier = function(actionURL,options) {
var settings = $.extend({
origin: {top:0,left:0},
paramName: 'term',
addClass: null,
actionURL: actionURL
},options||{});
this.click(function(event){
$('div.termifier').remove();
$('<div>')
.addClass('termifier' +
(settings.addClass ? (' ') + settings.addClass : ''))
.css({
position: 'absolute',
top: event.pageY - settings.origin.top,
left: event.pageX - settings.origin.left,
display: 'none'
})
//.click(function(event){
// $(this).fadeOut('slow');
//})
.appendTo('body')
.append(
$('<div>').load(
settings.actionURL,
encodeURIComponent(settings.paramName) + '=' +
encodeURIComponent($(event.target).text()),
function(){
$(this).closest('.termifier').fadeIn('fast');
}
)
);
});
this.addClass('termified');
return this;
};
$(document).click(function(event){
if(!$(event.target).is('.termifier,.termifier div')){
//$('div.termifier').remove();
$('div.termifier').fadeOut('normal');
}
});
})(jQuery);
jquery-termifier.html
<!DOCTYPE html>
<html>
<head>
<title> 2 The Boot Closet — Phase 4b</title>
<link rel="stylesheet" type="text/css" href="../../styles/core.css">
<link rel="stylesheet" type="text/css" href="bootcloset.css">
<script type="text/javascript" src="../../scripts/jquery-1.4.js"></script>
<script type="text/javascript" src="jquery.termifier.js"></script>
<script type="text/javascript">
$(function() {
$('#bootChooserControl')
.load('/jqia2/action/fetchBootStyleOptions');
$('#bootChooserControl').change(function(event){
$('#productDetailPane').load(
'/jqia2/action/fetchProductDetails',
$('#bootChooserControl').serialize(),
function(){ $('abbr')
.termifier(
'/jqia2/action/fetchTerm',
{
addClass: 'fancy',
origin: {top: 28, left: 2}
}
);
}
);
$('#colorChooserControl').load(
'/jqia2/action/fetchColorOptions',
$('#bootChooserControl').serialize(),
function(){
$('#colorChooserControl').attr('disabled',false);
$('#sizeChooserControl')
.attr('disabled',true)
.find('option').remove();
}
);
});
$('#colorChooserControl').change(function(event){
$('#sizeChooserControl').load(
'/jqia2/action/fetchSizeOptions',
$('#bootChooserControl,#colorChooserControl').serialize(),
function(){
$('#sizeChooserControl').attr('disabled',false);
}
);
});
$('#selectionsPane').change(function(event){
$('[value=""]',event.target).remove();
});
$('body').ajaxComplete(function(event,xhr,options){
if (options.url.indexOf('fetchProductDetails') != -1) {
$('div.termifier').remove();
}
});
});
</script>
</head>
<body>
<div id="pageContent">
<h1>Choose your boots</h1>
<div>
<div id="selectionsPane">
<label for="bootChooserControl">Boot style:</label>
<select id="bootChooserControl" name="style"></select>
<label for="colorChooserControl">Color:</label>
<select id="colorChooserControl" name="color" disabled="disabled"></select>
<label for="sizeChooserControl">Size:</label>
<select id="sizeChooserControl" name="size" disabled="disabled"></select>
</div>
<div id="productDetailPane"></div>
</div>
</div>
</body>
</html>
bootcloset.css:
body {
font-family: 'Verdana',sans-serif;
font-size: 10pt;
background: url('images/backg.png') repeat;
color: white;
}
#banner {
margin-left: 32px;
}
#pageContent {
width: 720px;
margin: 0 0 0 32px;
border: 8px ridge #362c24;
background-color: #46403c;
padding: 16px;
}
#pageContent h1 {
margin: 0 0 18px 0;
padding: 0;
color: #eda633;
}
#productDetailPane {
font-size: 0.9em;
margin-top: 20px;
}
#productDetailPane>div {
margin-bottom: 6px;
}
#productDetailPane label {
float: left;
font-weight: bold;
width: 9em;
text-align: right;
color: #ffdeae;
margin-right: 8px;
}
#bootChooserControl {
width: 188px;
}
#colorChooserControl {
width: 138px;
}
#sizeChooserControl {
width: 122px;
}
select+label {
margin-left: 18px;
}
abbr.termified {
text-decoration: underline;
color: aqua;
cursor: pointer;
}
div.termifier {
background-color: cornsilk;
width: 256px;
color: brown;
padding: 8px;
font-size: 0.8em;
}
div.termifier.fancy {
background: url('images/termifier.bubble.png') no-repeat transparent;
width: 256px;
height: 104px;
}
div.termifier.fancy div {
height: 86px;
width: 208px;
overflow: auto;
color: black;
margin-left: 24px;
}
<div id="productDetailPane">
<div>
<label>Features:</label>
<abbr class="termified">Full-grain</abbr>
<abbr class="termified">oil-tanned</abbr>
leather. Nylon mesh lining. Ortholite sock liner. EVA midsole. T84V Rubberlon outsole.
</div>
</div>
...
<div class="termifier fancy" style="position: absolute; top: 277px; left: 280px;">
<div> A method of leather tanning in which oils or fats are used to cure the leather. Such leather is usually very supple and has a matte or "oily" finish and is not generally polishable. </div>
</div>
