BW Selectbox

This plugin gives advanced customisation options to your dropdown/select boxes. This also uses BW Toggle Boxes to show and hide the menus.

Example usage

 

init_sbSelectbox

Below are the variables to be passed into the function that initialises the plugin on select boxes. This plugin does not apply with the select box has the attribute multi.

Variable/Key
Type
Default
Description
ops
object
options passed to initialise the selectbox. see init_sbSelectbox Options
$selectBox
jQuery object
$("selectbox")
a jQuery object of your select box element(s)

init_sbSelectbox Options

Below you will see all available variables for your ops object above.

Variable/Key
Type
Default
Description
classes
object
{
  sbHolder:"sbHolder",
  sbDisabled:"sbDisabled",
  sbSelector:"sbSelector sizeExact",
  sbOptions:"default",
  sbGroup:"sbGroup",
  sbSub:"sbSub",
  sbArrow:"sbArrow",
  sbArrowIcon:"icon",
  sbSelected:"sbSelected",
  sbMobile:"sbMobile nofix",
  sbContent:"sbContent",
  sbContentFilled:"sbFilled"
}
alter classes used on automatically created elements. You can also adjust these with a JSON string as the data-sbClasses attribute on your main SELECT element
desktopPosition (not in use)
string
bottom-left
this defines how to align your menu in relation to the selected option that is always visible. (not in use)
desktopSetMinWidth
boolean
true
sets a minimum width on your menu so it does not become more narrow than the main box
mobileAppendTo
element
document.body
for mobiles, change where your menu is appended to if required. Another common choice is: bwcVars.windowInfo.websiteContainer
mobileCenter
boolean
true
automatically center the menu to it's parent
mobileSame
boolean
false
set to true to enable the same menu positioning on mobile as desktop
aTransition
boolean
false
add the BW Core css class transition to your menu item link tags.
toggleBoxOptions
object
{
  box:this.$sbOptions,
  animation:{
	disabled:false,
	fade:true,
	width:false,
	height:false,
	cross:true,
	top:false,
	left:false,
	duration:250,
	disableHWAccel:false
  },
  positioning:{
	follow_mouse:false,
	relative:false
  },
  triggers:{
	click:true,
	mouseOverOut:false,
	mouseOverTime:200,
	mouseOutTime:200,
	hideDocClick:true,
	stoppropagation:true,
	preventdefault:true,
	retainOnBoxOver:true,
	noHide:false
  },
  show_single:true,
  show_function:false,
  hide_function:false,
  change_function:false,
  showing_class:'sbSelected',
  overlay:{
	enabled:false,
	"class":'sbOverlay',
	opacity:0.4,
	animate:{
		disabled:true,
		duration:200
	}
  }
}
you can override the toggleBox initialisation object by defining any of the variables used in the BW Toggle Boxes plugin