showbuttons: bottom, fix #198

CHANGELOG.txt

@@ -4,6 +4,7 @@ X-editable changelog
 
 Version 1.4.4 wip
 ----------------------------
+[enh #198] new value of showbuttons: 'bottom' (vitalets)
 [enh #192] add class editable-popup to have diferent css for popup and inline (vitalets)
 [enh] update to bootstrap-datepicker 1.0.2 (vitalets)
 [enh] update to combodate 1.0.3 with yearDescending and roundTime options (vitalets)

src/editable-form/editable-form-jqueryui.js

@@ -6,7 +6,12 @@ Editableform based on jQuery UI
     
     $.extend($.fn.editableform.Constructor.prototype, {
         initButtons: function() {
-            this.$form.find('.editable-buttons').append($.fn.editableform.buttons);                
+            var $btn = this.$form.find('.editable-buttons');
+            $btn.append($.fn.editableform.buttons);
+            if(this.options.showbuttons === 'bottom') {
+                $btn.addClass('editable-buttons-bottom');
+            }
+                          
             this.$form.find('.editable-submit').button({
                 icons: { primary: "ui-icon-check" },
                 text: false

src/editable-form/editable-form.css

@@ -17,6 +17,12 @@
    *display: inline;
 }
 
+.editable-buttons.editable-buttons-bottom {
+   display: block; 
+   margin-top: 7px;
+   margin-left: 0;
+}
+
 .editable-input {
     vertical-align: top; 
     display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */

src/editable-form/editable-form.js

@@ -33,7 +33,11 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
             this.$form = $($.fn.editableform.template); 
         },
         initButtons: function() {
-            this.$form.find('.editable-buttons').append($.fn.editableform.buttons);
+            var $btn = this.$form.find('.editable-buttons');
+            $btn.append($.fn.editableform.buttons);
+            if(this.options.showbuttons === 'bottom') {
+                $btn.addClass('editable-buttons-bottom');
+            }
         },
         /**
         Renders editableform
@@ -505,11 +509,11 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
         **/        
         ajaxOptions: null,
         /**
-        Whether to show buttons or not.  
+        Where to show buttons: left(true)|bottom|false  
         Form without buttons is auto-submitted.
 
         @property showbuttons 
-        @type boolean
+        @type boolean|string
         @default true
         @since 1.1.1
         **/