commit
59566e9302
@ -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'); |
||||||
|
}; |
Loading…
Reference in new issue