https://github.com/smashingboxes/splitdropbutton
A simple, easily stylable, split button dropdown jQuery plugin
https://github.com/smashingboxes/splitdropbutton
Last synced: about 1 year ago
JSON representation
A simple, easily stylable, split button dropdown jQuery plugin
- Host: GitHub
- URL: https://github.com/smashingboxes/splitdropbutton
- Owner: smashingboxes
- Created: 2013-05-31T15:29:11.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2013-06-06T20:16:53.000Z (almost 13 years ago)
- Last Synced: 2025-01-03T18:12:26.277Z (over 1 year ago)
- Language: JavaScript
- Size: 152 KB
- Stars: 4
- Watchers: 42
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# SplitDropButton
SplitDropButton is a simple, easily stylable, split button dropdown jQuery plugin similar to those you can find on:
+ [twitter boostrap](http://twitter.github.io/bootstrap/components.html#buttonDropdowns)
+ [zurb foundation](http://foundation.zurb.com/docs/components/split-buttons.html)
Why another one then? Both the boostrap and foundation versions weren't easily stylable, there wasn't a good standalone verison, and I didn't want to include big chuncks of either framework just for that one simple widget.
## Demo
See it in action [here](http://smashingboxes.github.io/splitdropbutton).
## Usage
#### HTML
#### Javascript
$(document).ready(function(){
$('.split-btn').splitdropbutton({
toggleDivContent: '' // optional html content for the clickable toggle div
})
});
Caveat: Since this plugin calculates element widths on page load, if you are using font-face (for example, [font-awesome](http://fortawesome.github.io/Font-Awesome/)) or images within your links, you should use `$(window).load()` instead of `$(document).ready()` See this [stackoverflow answer](http://stackoverflow.com/a/3698214/781704) for why.
#### Generated HTML
(inline styles were not inlcuded for the sake of this illustration)
#### Stylesheet
.split-btn .spb-toggle {
font-size: 24px;
padding: 7px 9px;
background: #ccc;
color: black;
}
// it's important to style the links with .split-btn a instead of '.spb-primary a' or
// '.spb-secondary a' because those divs have widths based on the length of '.split-btn a'
.split-btn a {
padding: 10px;
background: black;
color: white;
}
.split-btn a:hover {
background: white;
color: black;
}
## License
This software is released under the MIT license
http://opensource.org/licenses/MIT