jQuery Plugin For Stylable User Modifiable Combobox - MomboBox
| File Size: | 121KB |
|---|---|
| Views Total: | 1432 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
MomboBox is a jQuery plugin that attaches a select drop down list with preset items to your input box when focused on. Your users can select a item from the drop down list or type something into the input that isn't found in the list.
You might also like:
- Form Select Element Replacement Plugin - Mighty Form Styler
- Default Checkbox Replacement Plugin - jQuery prettyCheckable
- Standard Select Form Replacement Plugin - Selectik
- Select Boxes Replacement Plugin - Select2
- jQuery Plugin For Custom Select Menus
- jQuery Multiple Select Element Replacement Plugin - selectlist
- Beautiful Select Element Replacement Solution with jQuery and CSS3
- Simple Stylizable Select Input Plugin with jQuery - Brute Select
- jQuery Plugin For Customizable Select Box - selectify
How to use it:
1. Include jQuery library and MomboBox.js on your web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="MomboBox.js"></script>
2. The HTML
<label for="demo">Choose a website:</label> <input id="demo" />
3. The CSS
div.mombomenu {
width: 70px;
border: solid 1px #000;
height: 90px;
overflow: auto;
position:absolute;
background-color: #fff;
}
div.mombomenu .item {
display: block;
text-decoration: none;
color: #000;
padding: 1px;
}
div.mombomenu .item.selected {
color: #fff;
background-color: #007;
}
div.mombomenu .item.match {
font-weight: bold;
}
div.mombobutton {
border: solid 1px #ccc;
background-color: #eee;
width: 16px;
height: 17px;
float:left;
text-align: center;
border-left: none
}
4. Call the plugin
<script>
$(function () {
$('#demo').momboBox({
data:[
'www.jQuery.com',
'www.google.com',
'www.jQueryScript.Net',
'www.yahoo.com',
'www.facebook.com',
'www.twitter.com',
'www.tumblr.com',
'www.pinterest.com'
]
})
});
</script>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.











