Customize control buttons tag "buttons" or "a", to simply use twitter…

… bootstrap icons
caphun · Sep 24, 2012 · 52e2dab · 52e2dab
1 parent af07356
commit 52e2dab
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/demos/default_with_icons.html b/demos/default_with_icons.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>jQuery: Inline Edit Plugin Demo</title>
+<link rel="stylesheet" href="http://yelotofu.com/labs/jquery/master.css" media="screen">
+<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
+<style type="text/css">
+    .ui-state-hover { background-color: #ffC }
+    .inlineEdit-placeholder { font-style: italic; color: #555; }
+</style>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+<script type="text/javascript" src="../jquery.inlineedit.js"></script>
+<script type="text/javascript">
+
+$(function(){
+    $('.editable').inlineEdit({
+      buttons: '<a href="#" class="save"><i class="icon-ok"></i></a> <a href="#" class="cancel"><i class="icon-remove"></i></a>',
+      buttonsTag: 'a'
+    });
+});
+
+</script>
+</head>
+<body>
+    <div id="page">
+        <div id="header">
+            <h1>jQuery: Inline Edit Plugin Demo</h1>
+        </div>
+        <div id="content">
+            <p>A demonstration of the inline edit plugin.</p>
+            <table>
+                <tr><td><span class="editable">Joe Blogg</span></td></tr>
+                <tr><td><span class="editable">John Doe</span></td></tr>
+                <tr><td><span class="editable">Paul White</span></td></tr>
+                <tr><td><span class="editable"></span></td></tr>
+            </table>
+            <br /><br />
+            <p><a href="http://yelotofu.com/2009/08/jquery-inline-edit-tutorial/">Read original blog post</a></p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/jquery.inlineedit.js b/jquery.inlineedit.js
@@ -83,6 +83,7 @@ $.inlineEdit.defaults = {
     value: '',
     save: '',
     buttons: '<button class="save">save</button> <button class="cancel">cancel</button>',
+    buttonsTag: 'button',
     placeholder: 'Click to edit',
     control: 'input',
     cancelOnBlur: false,
@@ -125,14 +126,14 @@ $.inlineEdit.prototype = {
         return self
             .element
             .html( self.mutatedHtml( self.value() ) )
-            .find( 'button.save' )
+            .find( this.options.buttonsTag + '.save' )
                 .bind( 'click', function( event ) {
                     self.save( self.element, event );
                     self.change( self.element, event );
                     return false;
                 })
             .end()
-            .find( 'button.cancel' )
+            .find( this.options.buttonsTag + '.cancel' )
                 .bind( 'click', function( event ) {
                     self.change( self.element, event );
                     return false;