r3pek/ComboBox
1
0
Fork 0
Code Releases Activity

Initial import

Browse source
This commit is contained in:
Carlos Mogas da Silva 2012-03-19 15:38:55 -01:00
commit 59566e9302
3 changed files with 467 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
combobox.css Normal file
View file

@ -0,0 +1,76 @@
.toggle-menu {
font-size: 12px;
border:#989898 1px solid;
display: inline-block;
padding: 5px;
margin: 5px;
border-top-left-radius: 4px 4px;
border-top-right-radius: 4px 4px;
border-bottom-left-radius: 4px 4px;
border-bottom-right-radius: 4px 4px;
cursor: default;
user-select: none;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
}
.toggle-menu-selected {
background: #d8d8d8; /* Old browsers */
background: -moz-linear-gradient(top, #d8d8d8 0%, #8e8e8e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#8e8e8e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d8d8d8 0%,#8e8e8e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d8d8d8 0%,#8e8e8e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #d8d8d8 0%,#8e8e8e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#8e8e8e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #d8d8d8 0%,#8e8e8e 100%); /* W3C */
}
.toggle-menu-collate-right {
border-top-right-radius: 0px 0px;
border-bottom-right-radius: 0px 0px;
margin-right: 0px;
}
.toggle-menu-collate-left {
border-top-left-radius: 0px 0px;
border-bottom-left-radius: 0px 0px;
margin-left: 0px;
}
.toggle-menu .title {
text-align: center;
display: inline-block;
}
.toggle-menu .arrow {
background: url("http://www.freepbx.org/trac/browser/freepbx/trunk/amp_conf/htdocs/recordings/theme/images/arrow-desc.gif?rev=10449&format=raw") no-repeat 50% 50%;
padding: 6px;
margin-left: 5px;
display: none;
}
.toggle-menu div.dropdown {
position: absolute;
border:#999999 1px solid;
background-color:#FFFFFF;
display: none;
box-shadow: 0 0 5px gray;
overflow: auto;
max-height: 100px;
}
.toggle-menu div.dropdown p {
position: relative;
padding: 3px;
margin: 0px;
text-align: left;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
}
.toggle-menu div.dropdown p:hover {
background-color: #D3D3D3;
}
.toggle-menu div.dropdown p.disabled {
color: #B8B8B8
}
.toggle-menu div.dropdown p.disabled:hover {
background-color: inherit;
}
​

369
combobox.js Normal file
View file

@ -0,0 +1,369 @@
(function($) {
$.fn.getHiddenDimensions = function(includeMargin) {
var $item = this,
props = { position: 'absolute', visibility: 'hidden', display: 'block' },
dim = { width:0, height:0, innerWidth: 0, innerHeight: 0,outerWidth: 0,outerHeight: 0 },
$hiddenParents = $item.parents().andSelf().not(':visible'),
includeMargin = includeMargin || false;
var oldProps = [];
$hiddenParents.each(function() {
var old = {};
for ( var name in props ) {
old[ name ] = this.style[ name ];
this.style[ name ] = props[ name ];
}
oldProps.push(old);
});
dim.width = $item.width();
dim.outerWidth = $item.outerWidth(includeMargin);
dim.innerWidth = $item.innerWidth();
dim.height = $item.height();
dim.innerHeight = $item.innerHeight();
dim.outerHeight = $item.outerHeight(includeMargin);
$hiddenParents.each(function(i) {
var old = oldProps[i];
for ( var name in props ) {
this.style[ name ] = old[ name ];
}
});
return dim;
};
var buttonClickWithItems = function(e) {
var parent = $(this).closest('.toggle-menu');
var p = parent.position();
var isVisible = parent.find('.dropdown').is(':visible');
var dropdown = $(parent).find('.dropdown');
$('.toggle-menu .dropdown').hide();
$('.toggle-menu-selected').removeClass('toggle-menu-selected');
if (!isVisible) {
parent.addClass('toggle-menu-selected');
dropdown.show().offset({
top: p.top + 31,
left: p.left + parseInt(parent.css('margin-left'))
});
}
if (!e) var e = window.event;
e.cancelBubble = true;
e.stopPropagation();
};
var buttonMouseDown = function(e) {
$(this).closest('.toggle-menu').addClass('toggle-menu-selected');
};
var buttonMouseUp = function(e) {
$(this).closest('.toggle-menu').removeClass('toggle-menu-selected');
// Call the "data-onclick" function
var clickFunction = $(this).data('onclick');
if (clickFunction)
clickFunction();
}
var buttonDragStart = function(e) {
$(this).closest('.toggle-menu').removeClass('toggle-menu-selected');
}
var buttonMethods = {
construct: function(options) {
var name = options.Name;
var title = options.Title;
var collateLeft = options.CollateLeft;
var collateRight = options.CollateRight;
var onClick = options.onClick;
var firstTimeOpened = true;
// Mouse events
$(this).mousedown(buttonMouseDown);
$(this).mouseup(buttonMouseUp);
$(this).bind('dragstart', buttonDragStart);
// Save the OnClick function
if (onClick)
$(this).data('onclick', onClick);
// Input that will hold the value
var input = $('<input type="hidden" name="' + name + '"/>');
// Create the Button
var button = $('<div class="button"></div>');
button.append('<div class="title">' + title + '</div>',
'<div class="arrow"></div>');
// This is the DropDown Box
var dropdown = $('<div class="dropdown scroll-pane"></div>');
// Run this code to hide the dropdown box when clicked anywhere on the screen
var oldOnClick = $(document).onclick;
$(document).click(function() {
$('.toggle-menu .dropdown').hide();
$('.toggle-menu-selected').removeClass('toggle-menu-selected');
if (oldOnClick != null)
oldOnClick();
});
// Setup the border fade on hover (we need jQuery UI for this)
$(this).mouseenter(function() {
$(this).animate({borderTopColor: '#505050',
borderLeftColor: '#505050',
borderRightColor: '#505050',
borderBottomColor: '#505050' },
'fast');
});
$(this).mouseleave(function() {
$(this).animate({borderTopColor: '#989898',
borderLeftColor: '#989898',
borderRightColor: '#989898',
borderBottomColor: '#989898' },
'fast');
});
// Add everything and call ourselfs as a 'toggle-menu' :)
$(this).append(input, button, dropdown);
$(this).addClass('toggle-menu');
if (collateLeft == 'yes')
$(this).addClass('toggle-menu-collate-left');
if (collateRight == 'yes')
$(this).addClass('toggle-menu-collate-right');
return this;
},
// Add a new item to the dropdown menu
add: function(options) {
var dropdown = $(this).find('.dropdown');
var items = dropdown.children('p');
// ComboBoxItem class
function ComboBoxItem(itemOptions) {
var text = itemOptions.Text;
var onClick = itemOptions.onClick;
var selectOnClick = itemOptions.selectOnClick;
var item = $('<p>' + text + '</p>');
item.click(function(e) {
if ($(this).hasClass('disabled')) return false;
// Call the "data-onclick" function if we have one
var clickFunction = $(this).data('onClick');
if (clickFunction) {
var parent = $(this).closest('.toggle-menu');
parent.children('.dropdown').hide();
parent.removeClass('toggle-menu-selected');
if ($(this).data('selectOnClick')) {
var parent = $(this).closest('.toggle-menu');
parent.find('input').attr('value', $(this).text());
parent.find('.title').html($(this).text());
}
clickFunction($(this).closest('p').html());
return false;
} else {
var parent = $(this).closest('.toggle-menu');
parent.find('input').attr('value', $(this).text());
parent.find('.title').html($(this).text());
}
});
// Save the OnClick function
if (onClick)
item.data('onClick', onClick);
// Store the selectOnClick option
if (selectOnClick)
item.data('selectOnClick', selectOnClick);
return item;
}
// Add the arrow back if this is the first item
if (items.length == 0) {
$(this).find('.title').css('text-align', 'left');
$(this).find('.arrow').css('display', 'inline-block');
// And add the onclick event
$(this).click(buttonClickWithItems);
$(this).unbind('mousedown');
$(this).unbind('mouseup');
$(this).unbind('dragstart');
}
var item = new ComboBoxItem(options);
dropdown.append(item);
var minWidth = $(this).find('.title').width();
dropdown.children('p').each(function() {
if ($(this).getHiddenDimensions().width > minWidth)
minWidth = $(this).getHiddenDimensions().width;
});
$(this).find('.title').css('min-width', minWidth + 'px');
dropdown.css('min-width', ($(this).width() + 20) + 'px');
},
// Deletes a option from the dropdown menu
del: function(index) {
var items = $(this).find('.dropdown p');
var toDel = items.eq(index);
var title = $(this).find('.title');
if (title.html() == toDel.text()) {
title.html('');
$(this).find('input').attr('value', '');
}
// Remove the arrow and make this a simple button if no more items are available
if (items.length == 1) {
$(this).find('.title').css('text-align', 'center');
$(this).find('.arrow').css('display', 'none');
$(this).mousedown(buttonMouseDown);
$(this).mouseup(buttonMouseUp);
$(this).bind('dragstart', buttonDragStart);
$(this).unbind('click');
}
toDel.remove();
},
// Clears any entries on the ComboBox
clear: function() {
var nItems = $(this).find('.dropdown').children('p').size();
var i = 0;
for (i = 0; i < nItems; i++) {
$(this).ComboBox('del', 0);
}
},
// Disables a menu item
disable: function(index) {
var toDis = $(this).find('.dropdown p').eq(index);
var title = $(this).find('.title');
if (title.html() == toDis.text()) {
title.html('');
$(this).find('input').attr('value', '');
}
toDis.addClass('disabled');
},
// Enables a menu item
enable: function(index) {
var toEn = $(this).find('.dropdown p').eq(index);
toEn.removeClass('disabled');
},
};
$.fn.ComboBox = function(method) {
if (buttonMethods[method]) {
return buttonMethods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return buttonMethods['construct'].apply(this, arguments);
} else {
$.error('Method ' + method + ' doesn\'t exist in jQuery.ComboBox');
}
};
$('#cb1').ComboBox({
Name: 'cbo1',
Title: 'Test 1',
CollateLeft: 'no',
CollateRight: 'yes'
});
$('#cb1').ComboBox('add', {
Text: 'Item 1'
});
$('#cb1').ComboBox('add', {
Text: 'Item 2'
});
$('#cb1').ComboBox('add', {
Text: 'Item 3'
});
$('#cb2').ComboBox({
Name: 'cbo2',
Title: 'Test 2',
CollateLeft: 'yes',
CollateRight: 'no'
});
$('#cb2').ComboBox('add', {
Text: 'Item 4'
});
$('#cb2').ComboBox('add', {
Text: 'Item 5',
onClick: test,
selectOnClick: false
});
$('#cb2').ComboBox('add', {
Text: 'Item 6',
onClick: test,
selectOnClick: true
});
$('#cb3').ComboBox({
Name: 'cbo3',
Title: '',
CollateLeft: 'no',
CollateRight: 'no',
onClick: test
});
$('#cb3').ComboBox('add', {
Text: 'Item 7'
});
$('#cb3').ComboBox('add', {
Text: 'Item 8'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
$('#cb3').ComboBox('add', {
Text: 'Item 9'
});
})(jQuery);
function test() {
alert('clicked');
};

22
testComboBox.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>testComboBox</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="combobox.css" />
<!-- Javascript imports -->
<script language="JavaScript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<div id="cb1"></div><div id="cb2"></div><div id="cb3"></div><br/><br/>
<button onclick="$('#cb3').ComboBox('del',0);">Delete 3-1</button>
<button onclick="$('#cb3').ComboBox('disable',1);">Disable 3-2</button>
<button onclick="$('#cb3').ComboBox('enable',1);">Enable 3-2</button>
<button onclick="$('#cb3').ComboBox('clear');">Clear 3</button>​
<script language="JavaScript" src="combobox.js"></script>
</body>
</html>