jQuery <select> (not only) replacement.
Fully keyboard accessible. With events, callbacks, themes and more. (1000+ downloads)

Follow me: @filipbartos or say hello at filip(at)bartos(dot)me

Download

What is HeapBox

jQuery HTML selectbox replacement written in JavaScript, well done

As a webdesigner/webdeveloper you know how hard it is to deal with native HTML forms look or functionality. Heapbox doesn't know how to deal with textboxes, checkboxes etc but when it comes to selectboxes, it's kick-ass.

Not only selectbox replacement (from version 0.9.1)

Heapbox can be used also without select element. Just init it with div, paragraph etc.

Power of jQuery

Heapbox is powered by jQuery. Library that changed the way that millions of people write JavaScript.

GET/POST requests

HeapBox keeps mappings to source selectboxes. It means you can use HeapBox and your POST/GET form requests together. Your forms will also work with javascript turned off but of course without HeapBox functionality. Let's try it.

Events and callbacks

Yes, HeapBox knows events and callbacks. For more information see examples.

Design

Heapbox has very easy to learn HTML structure. It's really easy and fast to create brand new theme. Heapbox has also built-in themes. Flat themes are powered with colors by http://www.flatuicolors.com.

Also HeapBox has things to learn...

Sure HeapBox still doesn't know anything but you can already look forward to new versions. See changelog.

Installation

Include the jquery and heapbox in your head:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/heapbox.js" type="text/javascript"></script>

Include one chosen heapbox theme style:

<link rel="stylesheet" href="themes/dark/css/dark.css" type="text/css" media="screen" />

Create selectbox:

<select id="mySelect">
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
</select>

Init heapbox:

$("#mySelect").heapbox();

Documentation

Settings

Settings name Description
tabindex
(default = undefined)
Tabindex value.
insert
(default = before)
Where to insert heapbox.(available: before, after, inside)
emptyMessage
(default = 'Empty')
Message shown when source selectbox is empty.
heapsize
(default = undefined)
Max height of heapbox.
effect{type}
(default = 'slide')
Effect used to show/hide list of options. (available: fade,slide,standard)
effect{speed}
(default = 'slow')
Speed of effect used to show/hide list of options. (available: slow, fast)

Events

Event name Description
openStart() Event is triggered when heapbox opening started.
openComplete() Event is triggered when heapbox opening is complete.
closeStart() Event is triggered when heapbox closing started.
closeComplete() Event is triggered when heapbox closing is complete.
onChange(value) Event is triggered when user select value in heapbox.

Examples

Basic

Basic heapbox without any configuration.

$("#mySelect1").heapbox();

Result:


Basic non-select heapbox

Basic non-select heapbox.

$("#myDivElement").heapbox({'insert':'inside'});
json = '[{"value":"value_1","text":"value 1"},{"value":"value_2","text":"value 2"}]';
$("#myDivElement").heapbox("set",json);

Result:


Insertion

Heapbox can be inserted before, after or inside defined element. If defined element is select, only before or after option can be used.

$("#mySelect10").heapbox({'insert':'after'});

Result:


Selected attribute

Heapbox till version 0.9.1 supports selected attribute. Let's say you have three values in your select mac, linux and windows. Linux option has selected attribute.

Result:


Tabindex attribute

Heapbox knows how to take tabindex from source element if it's defined. Tabindex can be also set manually. Manually defined tabindex has higher priority.

Example

$("#mySelect11").heapbox({'tabindex':'11'});

Events and callbacks

Example of available heapbox events and callbacks

$(".mySelect").heapbox({
'onChange':function(){$("#eventLog").prepend("<span>Heapbox changed, value is: <b>"+value+"</b></span>");},
'openStart':function(){$("#eventLog").prepend("<span>Heapbox is opening</span>");},
'openComplete':function(){$("#eventLog").prepend("<span>Heapbox has been opened</span>");},
'closeStart':function(){$("#eventLog").prepend("<span>Heapbox is closing</span>");},
'closeComplete':function(){$("#eventLog").prepend("<span>Heapbox has been closed</span>");},
});

Result:


waiting for events...

Themes

Everything about heapbox is fully customizable via CSS. Curently available "ready to use" themes are:


Long lists

Heapbox know how to deal with long lists:

$("#mySelect12").heapbox({"heapsize":"100px"});

AJAX

Heapbox is AJAX friendly.

//init heapbox for #ajaxSelect and define onChange callback with ajax
$("#ajaxSelect").heapbox({
 'onChange':function(value)
 {
  //hide heapbox
  $("#ajaxSelect2").heapbox("hide");
 
   if(value){
   $.ajax({
    type: "POST",
    url: "ajax/ajax.php",
    data: "type="+value,
    success:function(data)
    {
     showAjaxSelect2(data);
     $("#ajaxSelect2").heapbox("show");
    }
    });
   }
 }
});

//init heapbox for #ajaxSelect2
$("#ajaxSelect2").heapbox({
 'onChange': function(value)
 {
  showMessage();
 }
});
 
 //hide heapbox
 $("#ajaxSelect2").heapbox("hide");

//set data to heapbox for #ajaxSelect2
function showAjaxSelect2(data)
{
   $("#ajaxSelect2").heapbox("set",data);
}

//show selected values
function showMessage()
{
  foodType = $("#ajaxSelect option:selected").attr("value");
  food = $("#ajaxSelect2 option:selected").attr("value");

  alert("Cool, you are into "+foodType+", especially "+food+".");
}
	  

Result:


Effects

Heapbox supports effects. Actually you can choose between slide, fade or no effect. Example of slow fade effect:

$("#mySelect3").heapbox({
	'effect': {
		'type': 'fade',
		'speed': 'slow'
	}
});

Result:


Setting data dynamically

Data can be also set dynamically whenever you need.

$("#mySelect4").heapbox();
json = '[{"value":"dynamic_value_1","text":"Dynamic value 1"},{"value":"dynamic_value_2","text":"Dynamic value 2"}]';
$("#mySelect4").heapbox("set",json);

Manual heapbox update

Okay, you have already own functions to update selectboxes. No problem. Just say when heapbox should update his data.

//init heapbox
$("#mySelect5").heapbox();

//add new option to source selectbox
newOption = $('<option/>', {  
	value: 'new_option_value',
	text: 'New option'
});
$("#mySelect5").append(newOption);

//update heapbox
$("#mySelect5").heapbox("update");

Access selected data in JavaScript

Selected data can be accessed in JavaScript via onChange callback

$("#mySelect5").heapbox({
	'onChange':function(value){alert('Selected value: '+value)}
});

Result:


Disable and enable heapbox

You can also disable or enable heapbox whenever you want. Disabled heapbox has CSS classes "heapbox" and "disabled".

Disable heapbox:

$("#mySelect7").heapbox("disable");

Result:


Enable heapbox:

$("#mySelect8").heapbox("enable");

Result:


Empty heapbox

When source selectbox is empty emptyMessage option text is shown.

$("#mySelect9").heapbox({emptyMessage: 'It\'s empty'});

Result:


Todo


  • Tabindex support
  • Selectbox attribute "disabled" support
  • Suboptions support
  • Optgroup support
  • Create twitter bootstrap theme
  • Fix for long lists of options (scrollbars etc)
  • Keyboard events

Changelog


v1.0.0 (not released yet)

  • final release

v0.9.4 (not released yet)

  • html options support

v0.9.3 (not released yet)

  • improved keyboard support
  • support for long lists of options
  • option disabled attribute support
  • bug fixes

v0.9.2

  • keyboard support - heapbox is fully keyboard accessible
  • tabindex support
  • fixed bug in onChange event

v0.9.1

  • added selected attribute support
  • heapbox can be used also with non-select elements
  • new option "insert" added (before, after, inside values available)
  • fixed bug (enable vs disable heapbox)

v0.9.0

  • Initial version