').addClass(settings.classes.dropwdownElementClass),
// The Outer Element of the Selectbox
$outer = $('
').addClass(settings.classNameSpace+" "+settings.classes.parentElementClass)
.append( $titleElement )
.append( $dropdownArrow )
.css({position:'relative'});
fireEvent($this,'BeforeUpdate', $this);
// Append the styles from the select box to the outer element
copyStyles( $this, $outer );
$this.css('display','none');
if( checkValid($this) )
{
// has Element before? Remove!
if( $this.prev().data(namespace) == true )
{
$this.prev().remove();
}
// Each Option!
$.each( $this.find('option'), function(index,option){
var $o = $(option),
$option = $('
').addClass(settings.classes.optionElementClass)
.html( $o.html() );
// Check is option active
if( $this.val() == $o.val() )
{
$option.addClass( settings.classes.activeClass );
}
else
{
$option.removeClass( settings.classes.activeClass );
}
$option.bind('click.'+namespace,function(){
fireEvent($this,'OptionClick',$this,index);
methods.setActiveIndex.apply($this, [index]);
});
// Add this option to the options div
$optionsElement.append( $option );
} );
if( settings.showFirstOptionInList === false ) {
$optionsElement.find('.option:first').css('display','none');
}
// Set the markup before and after
$optionsElement.prepend( settings.markup.optionBefore )
.append( settings.markup.optionAfter );
// The title and SelectArrow div
$outer.find('>div').bind('click.'+namespace,function(){
fireEvent($this,'TitleClick',$this);
methods.toggleMenu.apply($this, []);
}).data(namespace,true);
$this.before($outer);
// Trim title?
if( settings.trimTitle )
{
trimTitleTextToWidth( $this, $titleElement );
}
}
$outer.data( namespace, true );
fireEvent($this,'AfterUpdate', $this);
});
},
/**
* Sets the value of the selectbox
* Call with apply!
* @param index int
* @return object
*/
setActiveIndex: function( index ){
return this.each(function(){
var $this = $(this),
$prev = $this.prev(),
settings = methods.getSettings.apply(this,[]),
$titleElement = $prev.find('.' + settings.classes.titleElementClass ),
$titleElementText = $titleElement.find('.'+settings.classes.titleElementInnerClass),
// the Select option to which to set
$newSelectOption = $($this.find('option').get(index)),
$options = $prev.find('.' + settings.classes.optionElementClass);
fireEvent($this,'BeforeChangeValue',$this,$prev,index);
if( checkValid($this) )
{
$titleElementText.html( $newSelectOption.html() );
if( settings.trimTitle )
{
trimTitleTextToWidth( $this, $titleElement );
}
// Set the value to the Select value
$this.val( $newSelectOption.val() );
// each option
$.each( $options, function(ind,option){
// the option from the Select container
var $o = $(option),
// the option from the selectbox
$curSelectOption = $($this.find('option').get(index));
// Add Active
if( $curSelectOption.html() == $o.html() )
{
$o.addClass(settings.classes.activeClass);
}
// Remove Active
else
{
$o.removeClass(settings.classes.activeClass);
}
} );
}
fireEvent($this,'AfterChangeValue',$this,$prev,index);
});
},
/**
* Opens the Options
* Call with apply!
* @return object
*/
openMenu: function(){
methods.closeMenu.apply(this, []);
return this.each(function(){
var $this = $(this),
$prev = $this.prev(),
settings = methods.getSettings.apply(this,[]),
$optionsContainer = $prev.find('.'+settings.classes.optionsElementClass);
fireEvent($this,'OpenMenu',$this,$prev);
if( checkValid($this) )
{
$optionsContainer.css({
display: 'block',
top: $prev.height() + settings.topPositionDiff,
zIndex: 2
});
$prev.css({
zIndex: 2
});
// Bin a document click, to close the Menu
window.setTimeout(function(){
$(document).bind('click.'+namespace,function(){
methods.closeMenu.apply($this, []);
$(document).unbind('click.'+namespace);
});
}, 200);
}
});
},
/**
* Closes the Options
* Call with apply!
* @return object
*/
closeMenu: function(){
return this.each(function(){
var $this = $(this),
$prev = $this.prev(),
settings = methods.getSettings.apply(this,[]),
$optionsContainer = $prev.find('.'+settings.classes.optionsElementClass );
fireEvent($this,'CloseMenu',$this,$prev);
if( checkValid($this) )
{
$optionsContainer.css({
display: 'none',
zIndex: 1
});
$prev.css({
zIndex: 1
});
}
});
},
/**
* Toogles the options
* Call with apply!
* @return object
*/
toggleMenu: function(){
return this.each(function(){
var $this = $(this),
$prev = $this.prev(),
settings = methods.getSettings.apply(this,[])
$optionsContainer = $prev.find('.'+settings.classes.optionsElementClass);
if( checkValid($this) )
{
if( $optionsContainer.is(':visible') )
{
methods.closeMenu.apply( $this , [] );
}
else
{
methods.openMenu.apply( $this , [] );
}
}
});
},
/**
* Add an event to the Object
* Call with apply!
* @param eventName String
* @param callFunc Function
* @return void
*/
addEventListener: function(eventName, callFunc)
{
var settings = methods.getSettings.apply(this,[]);
if( typeof settings.events['on'+eventName] == 'object' )
{
settings.events['on'+eventName].push( callFunc );
}
else
{
$.error( 'Event "',eventName,'" does not exits in this settings.events: ', settings.events );
}
},
/**
* Returns the Settings
* Call with apply!
* @return Object
*/
getSettings: function(){
if( typeof this != 'undefined' )
{
return $(this).data( namespace + '.settings' );
}
else
{
return settings.pluginNamespace;
}
}
};
return methods;
};
/**
* $(selector).jSelectBox() Function
* @param method mixed
* @return object
*/
$.fn.jSelectBox = function( method ) {
var args = [this,method],
callArgs = Array.prototype.slice.call( arguments, 1 );
// Merge all Arguments to one Array
$.each(callArgs,function(){
args.push(this);
});
return $.jSelectBox.apply( window, args );
};
/**
* $.jSelectBox() Api Function
* @param object Object
* @param method String
* @return object
*/
$.jSelectBox = function( object, method ) {
// new Class
var csb = new jSelectBox(),
activeSelects = [];
// Object is not set. Apply to all!
if( typeof object != 'object' )
{
method = object;
$.each( $('select'), function(index,value){
if( $(value).data( namespace + '.active') == true )
{
activeSelects.push( $(value) );
}
});
object = $(activeSelects);
}
if( typeof method == 'undefined' )
{
method = 'init';
}
if ( csb[method] ) {
return csb[method].apply( object, Array.prototype.slice.call( arguments, 2 ));
} else if ( typeof method === 'object' || ! method ) {
return csb.init.apply( object, Array.prototype.slice.call( arguments, 1 ) );
} else {
$.error( 'Method ' + method + ' does not exist' );
return object;
}
};
})( jQuery );