Skip to content

Instantly share code, notes, and snippets.

@litzinger
Created June 23, 2014 00:49
Show Gist options
  • Save litzinger/d8551841662aeb102e50 to your computer and use it in GitHub Desktop.
Save litzinger/d8551841662aeb102e50 to your computer and use it in GitHub Desktop.
Add disabled option to P&T Pill
ul.pt-pill { display: inline-block; margin: 5px 0; padding: 0; list-style-type: none; height: 18px; cursor: default; white-space: nowrap;
-webkit-user-select: none; -moz-user-select: none; }
ul.pt-pill li { float: left; margin: 0 -1px 0 0; padding: 0 7px; border: 1px solid #a8b1b3; line-height: 18px; background: #fff url(../images/option_bg.gif) repeat-x; cursor: pointer; }
ul.pt-pill li:first-child { -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius: 3px 0 0 3px; }
ul.pt-pill li:last-child { -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius: 0 3px 3px 0; }
ul.pt-pill li.selected { background: #fff; position: relative; z-index: 1; text-shadow: 0 1px #fff; cursor: default;
background: url(../images/selected_bg.gif) repeat-x;
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.15)), to(rgba(0,0,0,0.1)));
background: -moz-linear-gradient(top, rgba(0,0,0,0.15), rgba(0,0,0,0.1));
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 1px rgba(0,0,0,0.1); }
.matrix ul.pt-pill { margin: 0; }
ul.pt-pill-disabled { opacity: 0.5; }
ul.pt-pill-disabled li { cursor: default; }
var ptPill
(function($){
var $document = $(document);
// --------------------------------------------------------------------
/**
* P&T Pill
*/
ptPill = function($select){
if ($select.length == 0)
{
return;
}
var $disabled = $select.attr('disabled') == 'disabled' ? ' pt-pill-disabled' : '';
$select.hide();
var obj = this,
$options = $('option', $select),
$ul = $('<ul class="pt-pill'+ $disabled +'" tabindex="0" />').insertAfter($select),
$selected;
$options.each(function(index){
var $option = $(this),
$li = $('<li />').appendTo($ul).html($option.html());
// prevent focus on click
$li.mousedown(function(event){ event.preventDefault(); });
if ($disabled == '') {
$li.click(function(event, testing){
if ($li == $selected) return;
if ($selected) {
$selected.removeClass('selected');
$select.val($option.val()).change();
}
$selected = $li.addClass('selected');
});
}
if ($option.attr('selected')) {
$li.click();
$li.addClass('selected');
}
});
if (!$selected) {
$('li:first', $ul).click();
}
$ul.keydown(function(event){
switch(event.keyCode) {
case 37: $selected.prev().click(); break;
case 39: $selected.next().click(); break;
default: return;
}
event.preventDefault();
});
$select.focus(function(){
$ul.focus();
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment