uiTokenizer
by JoshuaIRL
HTML
<script src="http://jquery-watermark.googlecode.com/svn/trunk/jquery-watermark/jquery.watermark/jquery.watermark.min.js"></script>
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="http://ccpd.uc.edu.nyud.net/static/js/jquery-plugins/jquery.event.drag.js"></script>
<script src="http://ccpd.uc.edu.nyud.net/static/js/jquery-plugins/jquery.event.drop.js"></script>
<select class="uiTokenInput form-Degrees2 has-photo" name="Degrees2" id="Degrees2" size="10" multiple="multiple" style="width:350px;">
<option selected="selected" value="0">Jack Johnson</option>
<option selected="selected" value="1">Relient K</option>
<option selected="selected" value="2">Dave Matthews Band</option>
<option selected="selected" value="3">Jason Mraz</option>
<option selected="selected" value="4">Travis Flynn</option>
<option selected="selected" value="5">Punching people in the face</option>
<option selected="selected" value="6">The Waking Point</option>
<option selected="selected" value="7">Rihanna</option>
<option selected="selected" value="8">Eminem</option>
<option selected="selected" value="9">Usher</option>
<option selected="selected" value="10">AKON</option>
<option selected="selected" value="11">50 Cent</option>
<option selected="selected" value="12">Kanye West</option>
<option selected="selected" value="13">Lady Gaga</option>
<option selected="selected" value="14">Lil Wayne</option>
<option selected="selected" value="15">Death Cab for Cutie</option>
<option selected="selected" value="16">Erick Baker</option>
<option selected="selected" value="17">LUDO</option>
<option selected="selected" value="18">My Chemical Romance</option>
<option selected="selected" value="19">Jennisfar</option>
<option selected="selected" value="20">Third Day</option>
<option selected="selected" value="21">Hawk Nelson</option>
<option selected="selected" value="22">July For Kings</option>
<option selected="selected" value="23">Chris...CSS
html { height: 100%; overflow-y: scroll; }
body { margin:10px!important; }
/* -----------------------------------------------------------------------
Blueprint CSS Framework 1.0
http://blueprintcss.org
* Copyright (c) 2007-Present. See LICENSE for more info.
* See README for instructions on how to use Blueprint.
* For credits and origins, see AUTHORS.
* This is a compressed file. See the sources in the 'src' directory.
----------------------------------------------------------------------- */
/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}
/* typography.css */
html {font-size:100.01%;}
body {font-size:75%;color:#222;background:#fff;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6...JavaScript
/* THE GOAL OF THIS PLUGIN IS TO MAKE AN FB-STYLE TOKENIZER WITH PHOTO OPTION
accepts json data each object containing three fields, a label, a value, and an image path */
/* As much as I flove the jQuery UI framework it was a goal of mine to keep this agnostic of that as much as possible. */
/* for now, it will be dependent on the jquery UI autocomplete but nothing else */
dragDrop = {
keyHTML: '<a href="#" class="keyLink">#</a>',
keySpeed: 10, // pixels per keypress event
initialMouseX: undefined,
initialMouseY: undefined,
startX: undefined,
startY: undefined,
dXKeys: undefined,
dYKeys: undefined,
draggedObject: undefined,
initElement: function (element) {
if (typeof element == 'string')
element = document.getElementById(element);
element.onmousedown = dragDrop.startDragMouse;
element.innerHTML += dragDrop.keyHTML;
var links = element.getElementsByTagName('a');
var lastLink = links[links.length-1];
lastLink.relatedElement = element;
lastLink.onclick = dragDrop.startDragKeys;
},
startDragMouse: function (e) {
dragDrop.startDrag(this);
var evt = e || window.event;
dragDrop.initialMouseX = evt.clientX;
dragDrop.initialMouseY = evt.clientY;
addEventSimple(document,'mousemove',dragDrop.dragMouse);
addEventSimple(document,'mouseup',dragDrop.releaseElement);
return false;
},
startDragKeys: function () {
dragDrop.startDrag(this.relatedElement);
dragDrop.dXKeys = dragDrop.dYKeys = 0;
addEventSimple(document,'keydown',dragDrop.dragKeys);
addEventSimple(document,'keypress',dragDrop.switchKeyEvents);
this.blur();
return false;
},
startDrag: function (obj) {
if (dragDrop.draggedObject)
dragDrop.releaseElement();
dragDrop.startX = obj.offsetLeft;
dragDrop.startY = obj.offsetTop;
...