4

I know that I can style the "Ok" and "Cancel" buttons created by Jeditable with a css file like this:

form.editable > button {
color : #F00
}

I want Jeditable to use the existing Bootstrap classes btn btn-danger and btn btn-success.

I know I can just copy and paste the CSS from bootstrap into my custom css file but this seems disgusting.

What is the proper way to do this? I have googled around without much success and read the jeditable docs, but the solution is not obvious to me.

John Shedletsky
  • 7,110
  • 12
  • 38
  • 63

3 Answers3

7

I just got interested in this and I found out that it is as simple as this :) 

$('.edit_area').editable('http://www.example.com/save.php', {
     type: 'textarea',
     cancel: '<button class="btn btn-danger" type="cancel" >Cancel</button>',
     submit: '<button class="btn btn-success" type="submit" >Ok</button>'
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//rawgit.com/tuupola/jquery_jeditable/master/jquery.jeditable.js"></script>

<div class="edit_area">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae officiis reprehenderit tempora rerum quaerat sed totam recusandae sint doloremque perspiciatis omnis illum facilis odio perferendis quibusdam sequi ab consectetur repudiandae.</div>
brasofilo
  • 25,496
  • 15
  • 91
  • 179
Bojan Petkovski
  • 6,835
  • 1
  • 25
  • 34
1
  1. Visit the Bootstrap CSS customize page: http://getbootstrap.com/customize/
  2. Click 'Toggle All' and select only 'Buttons'
  3. Click Compile and Download
  4. Open the zip file and load the bootstrap-theme.css file into your app
  5. Add the btn classes your buttons: <button class="button btn btn-success" type="submit" >Ok</button>

This will give you just the Bootstrap you need (not the entire CSS library) and allow you to style your buttons as Bootstrap buttons.

Marty Cortez
  • 2,325
  • 1
  • 17
  • 22
0

try below:

$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit">'+
'<i class="icon-ok icon-white"></i></button>'+
'<button type="button" class="btn editable-cancel"><i class="icon-remove"></i></button>';
digitalRage
  • 1
  • 4