/** | |
* Font selector plugin | |
* turns an ordinary input field into a list of web-safe fonts | |
* Usage: $('select').fontSelector(); | |
* | |
* Author : James Carmichael | |
* Website : www.siteclick.co.uk | |
* License : MIT | |
*/ | |
jQuery.fn.fontSelector = function() { | |
var fonts = new Array( | |
'Arial,Arial,Helvetica,sans-serif', | |
'Arial Black,Arial Black,Gadget,sans-serif', | |
'Comic Sans MS,Comic Sans MS,cursive', | |
'Courier New,Courier New,Courier,monospace', | |
'Georgia,Georgia,serif', | |
'Impact,Charcoal,sans-serif', | |
'Lucida Console,Monaco,monospace', | |
'Lucida Sans Unicode,Lucida Grande,sans-serif', | |
'Palatino Linotype,Book Antiqua,Palatino,serif', | |
'Tahoma,Geneva,sans-serif', | |
'Times New Roman,Times,serif', | |
'Trebuchet MS,Helvetica,sans-serif', | |
'Verdana,Geneva,sans-serif' ); | |
return this.each(function(){ | |
// Get input field | |
var sel = this; | |
// Add a ul to hold fonts | |
var ul = $('<ul class="fontselector"></ul>'); | |
$('body').prepend(ul); | |
$(ul).hide(); | |
jQuery.each(fonts, function(i, item) { | |
$(ul).append('<li><a href="#" class="font_' + i + '" style="font-family: ' + item + '">' + item.split(',')[0] + '</a></li>'); | |
// Prevent real select from working | |
$(sel).focus(function(ev) { | |
ev.preventDefault(); | |
// Show font list | |
$(ul).show(); | |
// Position font list | |
$(ul).css({ top: $(sel).offset().top + $(sel).height() + 4, | |
left: $(sel).offset().left}); | |
// Blur field | |
$(this).blur(); | |
return false; | |
}); | |
$(ul).find('a').click(function() { | |
var font = fonts[$(this).attr('class').split('_')[1]]; | |
$(sel).val(font); | |
$(ul).hide(); | |
return false; | |
}); | |
}); | |
var cust_input = $('<input type="text" name="custom_font">').attr('value', $(sel).val()).bind('keydown', function (event) { | |
if (event.keyCode === 13) { | |
$(sel).val($(this).val()); | |
$(ul).hide(); | |
} | |
if (event.keyCode === 27) { | |
$(ul).hide(); | |
} | |
}); | |
var li = $('<li>'); | |
li.append(cust_input); | |
$(ul).append(li); | |
}); | |
} |