Permalink
Browse files

Added split button (needs docs/examples)

  • Loading branch information...
tj committed Feb 5, 2012
1 parent 68ca0b0 commit ff0d53adcf07ef23a69269c17b4ecc0d44032b65
View
@@ -5,6 +5,7 @@ COMPONENTS = emitter \
confirmation \
color-picker \
notification \
+ split-button \
menu \
card
View
@@ -220,8 +220,33 @@
.notification.scale.hide {
-webkit-transform: scale(0);
-moz-transform: scale(0);
+}.split-button {
+ display: inline-block;
+ border: 1px solid #eee;
+}
+
+.split-button a {
+ display: inline-block;
+ float: left;
+ height: 20px;
+ line-height: 20px;
+ padding: 5px 10px;
+ text-decoration: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+}
+
+.split-button .toggle {
+ border-left: 1px solid #eee;
+}
+
+.split-button .toggle span {
+ display: block;
+ margin-top: 8px;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #888;
}.menu {
- display: none;
position: absolute;
top: 0;
left: 0;
View
@@ -584,8 +584,7 @@ function rgba(r,g,b,a) {
function ColorPicker() {
ui.Emitter.call(this);
this._colorPos = {};
- this.template = html;
- this.el = $(this.template);
+ this.el = $(html);
this.main = this.el.find('.main').get(0);
this.spectrum = this.el.find('.spectrum').get(0);
$(this.main).bind('selectstart', function(e){ e.preventDefault() });
@@ -1118,6 +1117,115 @@ Notification.prototype.remove = function(){
})(ui, "<li class=\"notification hide\">\n <div class=\"content\">\n <h1>Title</h1>\n <a href=\"#\" class=\"close\">×</a>\n <p>Message</p>\n </div>\n</li>");
;(function(exports, html){
+/**
+ * Expose `SplitButton`.
+ */
+
+exports.SplitButton = SplitButton;
+
+/**
+ * Initialize a new `SplitButton`
+ * with an optional `label`.
+ *
+ * @param {String} label
+ * @api public
+ */
+
+function SplitButton(label) {
+ ui.Emitter.call(this);
+ this.el = $(html);
+ this.events();
+ this.render({ label: label });
+ this.state = 'hidden';
+}
+
+/**
+ * Inherit from `Emitter.prototype`.
+ */
+
+SplitButton.prototype = new ui.Emitter;
+
+/**
+ * Register event handlers.
+ *
+ * @api private
+ */
+
+SplitButton.prototype.events = function(){
+ var self = this
+ , el = this.el;
+
+ el.find('.button').click(function(e){
+ e.preventDefault();
+ self.emit('click', e);
+ });
+
+ el.find('.toggle').click(function(e){
+ e.preventDefault();
+ self.toggle();
+ });
+};
+
+/**
+ * Toggle the drop-down contents.
+ *
+ * @return {SplitButton}
+ * @api public
+ */
+
+SplitButton.prototype.toggle = function(){
+ return 'hidden' == this.state
+ ? this.show()
+ : this.hide();
+};
+
+/**
+ * Show the drop-down contents.
+ *
+ * @return {SplitButton}
+ * @api public
+ */
+
+SplitButton.prototype.show = function(){
+ this.state = 'visible';
+ this.emit('show');
+ return this;
+};
+
+/**
+ * Hide the drop-down contents.
+ *
+ * @return {SplitButton}
+ * @api public
+ */
+
+SplitButton.prototype.hide = function(){
+ this.state = 'hidden';
+ this.emit('hide');
+ return this;
+};
+
+/**
+ * Render the split-button with the given `options`.
+ *
+ * @param {Object} options
+ * @return {SplitButton}
+ * @api private
+ */
+
+SplitButton.prototype.render = function(options){
+ var options = options || {}
+ , button = this.el.find('.button')
+ , label = options.label;
+
+ if ('string' == label) button.text(label);
+ else button.text('').append(label);
+ return this;
+};
+
+})(ui, "<div class=\"split-button\">\n <a class=\"button\" href=\"#\">Action</a>\n <a class=\"toggle\" href=\"#\"><span></span></a>\n</div>");
+;(function(exports, html){
+
/**
* Expose `Menu`.
*/
@@ -1152,7 +1260,7 @@ function Menu() {
var self = this;
ui.Emitter.call(this);
this.items = {};
- this.el = $(html).appendTo('body');
+ this.el = $(html).hide().appendTo('body');
$('html').click(function(){ self.hide(); });
};
View
@@ -210,6 +210,7 @@
}, 200);
}, 200);
});
+
});
</script>
</head>
@@ -220,7 +221,7 @@ <h1>UI<strong>kit</strong></h1>
<span>Modern UI components for the modern web</span>
</div>
- <p>UIKit is a small collection of flexible, decoupled jQuery JavaScript components for the modern web. With an emphasis on structure-only styling making it it simple to apply application specific styling.</p>
+ <p>UIKit is a small collection of flexible, decoupled jQuery JavaScript components for the modern web. With an emphasis on structure-only styling it's easy to style UIKit to match your application, no preprocessor variables, just raw CSS structure! As a result most of the styling you see in this document is for demonstration only.</p>
<section>
<h2 id="emitter-section"><a href="#">Emitter</a></h2>
View
@@ -85,6 +85,29 @@ body {
-webkit-box-shadow: 0 1px 4px 0 #ddd;
-moz-box-shadow: 0 1px 4px 0 #ddd;
}
+.split-button {
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ margin: 5px;
+ font-size: 12px;
+}
+.split-button a {
+ background: -webkit-linear-gradient(top, #fff 20%, #eee);
+ background: -moz-linear-gradient(top, #fff 20%, #eee);
+}
+.split-button a:hover {
+ background: -webkit-linear-gradient(top, #fff 40%, #efefef);
+ background: -moz-linear-gradient(top, #fff 40%, #efefef);
+ text-decoration: none;
+}
+.split-button a:active {
+ background: -webkit-linear-gradient(bottom, #fff 40%, #efefef);
+ background: -moz-linear-gradient(bottom, #fff 40%, #efefef);
+ text-decoration: none;
+}
+.split-button a {
+ box-shadow: inset 1px 0 rgba(255,255,255,.75), 0 1px #ddd;
+}
#wrapper > section {
margin: 30px 0;
width: 350px;
@@ -34,8 +34,7 @@ function rgba(r,g,b,a) {
function ColorPicker() {
ui.Emitter.call(this);
this._colorPos = {};
- this.template = html;
- this.el = $(this.template);
+ this.el = $(html);
this.main = this.el.find('.main').get(0);
this.spectrum = this.el.find('.spectrum').get(0);
$(this.main).bind('selectstart', function(e){ e.preventDefault() });
@@ -1,5 +1,4 @@
.menu {
- display: none;
position: absolute;
top: 0;
left: 0;
@@ -33,7 +33,7 @@ function Menu() {
var self = this;
ui.Emitter.call(this);
this.items = {};
- this.el = $(html).appendTo('body');
+ this.el = $(html).hide().appendTo('body');
$('html').click(function(){ self.hide(); });
};
@@ -0,0 +1,27 @@
+.split-button {
+ display: inline-block;
+ border: 1px solid #eee;
+}
+
+.split-button a {
+ display: inline-block;
+ float: left;
+ height: 20px;
+ line-height: 20px;
+ padding: 5px 10px;
+ text-decoration: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+}
+
+.split-button .toggle {
+ border-left: 1px solid #eee;
+}
+
+.split-button .toggle span {
+ display: block;
+ margin-top: 8px;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #888;
+}
@@ -0,0 +1,4 @@
+<div class="split-button">
+ <a class="button" href="#">Action</a>
+ <a class="toggle" href="#"><span></span></a>
+</div>
@@ -0,0 +1,106 @@
+
+/**
+ * Expose `SplitButton`.
+ */
+
+exports.SplitButton = SplitButton;
+
+/**
+ * Initialize a new `SplitButton`
+ * with an optional `label`.
+ *
+ * @param {String} label
+ * @api public
+ */
+
+function SplitButton(label) {
+ ui.Emitter.call(this);
+ this.el = $(html);
+ this.events();
+ this.render({ label: label });
+ this.state = 'hidden';
+}
+
+/**
+ * Inherit from `Emitter.prototype`.
+ */
+
+SplitButton.prototype = new ui.Emitter;
+
+/**
+ * Register event handlers.
+ *
+ * @api private
+ */
+
+SplitButton.prototype.events = function(){
+ var self = this
+ , el = this.el;
+
+ el.find('.button').click(function(e){
+ e.preventDefault();
+ self.emit('click', e);
+ });
+
+ el.find('.toggle').click(function(e){
+ e.preventDefault();
+ self.toggle();
+ });
+};
+
+/**
+ * Toggle the drop-down contents.
+ *
+ * @return {SplitButton}
+ * @api public
+ */
+
+SplitButton.prototype.toggle = function(){
+ return 'hidden' == this.state
+ ? this.show()
+ : this.hide();
+};
+
+/**
+ * Show the drop-down contents.
+ *
+ * @return {SplitButton}
+ * @api public
+ */
+
+SplitButton.prototype.show = function(){
+ this.state = 'visible';
+ this.emit('show');
+ return this;
+};
+
+/**
+ * Hide the drop-down contents.
+ *
+ * @return {SplitButton}
+ * @api public
+ */
+
+SplitButton.prototype.hide = function(){
+ this.state = 'hidden';
+ this.emit('hide');
+ return this;
+};
+
+/**
+ * Render the split-button with the given `options`.
+ *
+ * @param {Object} options
+ * @return {SplitButton}
+ * @api private
+ */
+
+SplitButton.prototype.render = function(options){
+ var options = options || {}
+ , button = this.el.find('.button')
+ , label = options.label;
+
+ if ('string' == label) button.text(label);
+ else button.text('').append(label);
+ return this;
+};

0 comments on commit ff0d53a

Please sign in to comment.