révision
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'); |
||||
}; |
Chargement…
Référencer dans un nouveau ticket