Extending jQuery plugin

Question

Extending jQuery plugin

Navigation

#1 by (6 votes)

7

I'm working on a project that uses the X-editable library with Bootstrap 3. Throughout the page are multiple instances of the plugin, however, there was a need for some instances to have a different template. By reading the library's documentation I have found that I can make the changes through:

$.fn.editableform.buttons

However, this affects all other X-editable pages. My question here is how can I make this modification only for certain instances. Here's how to extend this plugin and change this default behavior, being referenced as something like this:

$(selector).customEditable();

I do not really know much about jQuery, what I have so far is this:

(function($){
$.fn.customEditable = function(options) {

    // var defaults = {
        editableform = {
            buttons: '<button type="button" class="btn btn-primary btn-sm editable-trigger"><i class="glyphicon glyphicon-edit"></i></button>',
        }
    // };

    var options = $.extend({}, editableform, options);

    //Here you can create your extended functions, just like a base plugin.

    return this.each(function() {

        //Execute your normal plugin
        $(this).editable(options);

        console.log('customEditable');
    });
};

})(jQuery);

But I still can not do the editableform.buttons overwrite for this custom plugin!

javascript jquery

asked by anonymous 24.09.2015 / 16:45

1 answer

Manipulate an open window from the parent window with Javascript How to use the first-child selector for a specific class

score 6 · Answer 1

Example

In this example you can use a specific class to indicate who will have the custom behavior. In the example I mounted I used the class 'editableCustom'.

Running

The operation of the code is very simple. I overwritten the part of the plugin that shows the buttons to see if there is a class 'editableCustom' in the element that will show the popover. If it exists it will show the popover with the variable 'editableCustom' data. This variable contains the custom template.

$.fn.editableform.customButtons = 
    '<button type="submit" class="btn btn-success editable-submit"><i class="icon-ok icon-white"></i></button>'+
    '<button type="button" class="btn btn-danger editable-cancel"><i class="icon-remove"></i></button>'+
    '<button type="button" class="btn editable-cancel3 editable-remove"><i class="icon-trash"></i></button>';
    
$.extend($.fn.editableform.Constructor.prototype, {
    initButtons: function() {
        var el = this.options.scope;
        var isCustom = $(el).hasClass("editableCustom");
        
        var $btn = this.$form.find('.editable-buttons');
        $btn.append($.fn.editableform[isCustom? 'customButtons' : 'buttons']);
        
        if(this.options.showbuttons === 'bottom') {
            $btn.addClass('editable-buttons-bottom');
        }
        
        this.$form.find('.editable-submit').button({
            icons: { primary: "ui-icon-check" },
            text: false
        }).removeAttr('title');
        this.$form.find('.editable-cancel').button({
            icons: { primary: "ui-icon-closethick" },
            text: false
        }).removeAttr('title');
    }
});

$('.editableDefault,.editableCustom').editable();

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" href="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script><scripttype="text/javascript" src="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>

<h4>X-editable: display checklist as UL</h4>
<ul id='lista'>
    <li class='editableDefault'>Editable Default</li>
    <li class='editableDefault'>Editable Default</li>
    <li class='editableCustom'>Editable Custom</li>
    <li class='editableCustom'>Editable Custom</li>
</ul>