You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
369 lines
12 KiB
369 lines
12 KiB
(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');
|
|
}; |