jeudi 8 décembre 2016

convert jquery script for checkboxes to work with radio buttons

I found this very usefull script called BlueToggleButton on jqueryscript.net link

Basically it converts checkboxes to customized buttons of your choice. It works great, though it would be ever greater if there would be a way to do the same for radio buttons. I'm totally not into jQuery and Javascript, so I don't really know where to start. I tried to replace the "checkbox" strings inside the code with "radio" but that didn't seem to do the trick.

The script looks like this. It is connected to a css-file where you can style your buttons and some images to use inside the buttons.

$(function ($) {
$.widget("toggle.toggleButton", {
    options : {
        text : "Toggle",
        toggleOnColor : "green",
        onTitle : "On",
        offTitle : "Off",
        onImg: "toggleON.png",
        offImg: "toggleOFF.png",
        change : null
    },

    _create : function() {
        var id = this.element.attr("id");
        var checkBoxStyle = this.element.attr("style");

        this.element.css({
            "display" : "none"
        });

        this.checkboxButton = $("<label>", {
            text : this.options.text,
            "class" : "toggleButton",
            "for" : id,
            "style" : checkBoxStyle
        });

        this.element.after(this.checkboxButton);

        if (this.element.is(":checked")) {
            this.element
                .next("label").css({ "background" : this.options.toggleOnColor, "color" : "white" })
                .prop({ "title" : this.options.onTitle })
                .prepend('<span class="toggle-img" style="background:url(' + this.options.onImg + '); background-position:center;" />');

        } else {
            this.element
                .next("label").css({ "background" : "", "color" : "grey" })
                .prop({ "title" : this.options.offTitle })
                .prepend('<span class="toggle-img" style="background:url(' + this.options.offImg + '); background-position:center;" />');

        };

        this._on(this.element, {
            "change" : function(event) {
                if (this.element.is(":checked")) {
                    this.element
                        .next("label").css({ "background" : this.options.toggleOnColor, "color" : "white" })
                        .prop({ "title" : this.options.onTitle })
                        .find(".toggle-img")
                        .css({"background" : "url(" + this.options.onImg + ")" });
                } else {
                    this.element
                        .next("label").css({ "background" : "", "color" : "grey" })
                        .prop({ "title" : this.options.offTitle })
                        .find(".toggle-img")
                        .css({"background" : "url(" + this.options.offImg + ")" });
                };
            }
        });
    }
});
}(jQuery)); 

Any ideas? I tried to get in contact with the creator but didn't get a response. Thanks alot in advance!

Aucun commentaire:

Enregistrer un commentaire