Initial import
This commit is contained in:
commit
59566e9302
3 changed files with 467 additions and 0 deletions
76
combobox.css
Normal file
76
combobox.css
Normal 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
369
combobox.js
Normal 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
22
testComboBox.html
Normal 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>
|
||||||
Loading…
Reference in a new issue