So passen Sie die checkbox , ein Hintergrundbild hinzufügen

Ich brauchen, um zu konvertieren das Kontrollkästchen Standard, um diese

So passen Sie die checkbox , ein Hintergrundbild hinzufügen

Es ist ok zu verwenden, etwas, Ein hintergrund-Bild, CSS3, jQuery.

http://jsfiddle.net/jitendravyas/uGYv6/

Ein Kontrollkästchen hat in der Regel mindestens zwei optischen Zuständen (vier, wenn Sie Ihren enabled Attribut berücksichtigt), aber Sie sind nur zu zeigen. Wie wollen Sie differenzieren die aktivierten Zustand von der ungebremsten Zustand?

InformationsquelleAutor Jitendra Vyas | 2011-10-03

  1. 3

    Wenn Sie nicht gegen die Verwendung einer bestehenden toolkit, jQuery UI Button können, aktivieren Sie Kontrollkästchen in benutzerdefinierte gestaltete buttons, die die Unterstützung der vier visual basic-Staaten (plus eine weitere hover-Zustand):

    So passen Sie die checkbox , ein Hintergrundbild hinzufügen

    Jedoch in der Lage sein, diese Funktion zu verwenden, wie Sie möchten (mit der value Attribut als label), haben Sie id Attribute, um Ihre Kontrollkästchen, und fügen Sie <label> Elemente, die sich auf diese ids und setzen Ihre Kontrollkästchen den Wert Ihrer inneren text. Sie können entweder ändern Sie Ihr markup von hand:

    <input type="checkbox" id="nutri" name="nutri" value="select">
<label for="nutri">select</label>

    Oder es ändern sich dynamisch:

    $("input:checkbox").each(function(index) {
    $("<label>").text(this.value)
                .attr("for", this.id = "checkbox" + index + 1)
                .insertAfter(this);
});

    Von dort aus auf, es ist so einfach wie das aufrufen button() auf das Kontrollkästchen oder buttonset() auf einem container. Natürlich, wenn keine der Standard-jQuery-UI-themes für Ihr Vorhaben geeignet sind, können Sie entwerfen Sie Ihre eigenen Stil für jeden visuellen Zustand mit ThemeRoller.

    Finden Sie eine live-demo in diese Geige.

    InformationsquelleAutor Frédéric Hamidi

  2. 3

    Können Sie Reine css-Dateien. Nur fügen Sie ein label nach Ihren checkbox:

    #check_box {

    display:none;

}

#check_box + label{

    background:url('images/check-box.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}


#check_box:checked + label{

    background:url('images/check-box-checked.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;

}
    Wie können Sie dies tun, haben aber das Etikett, bevor Sie die checkbox?

    InformationsquelleAutor ali mokrani

  3. 1
    $('#yourCheckbox').hide().after($('<img/>', { src: 'blah.png', alt: 'whatever' }).click(function(){
    $(this).prev('input:checkbox').click();
}));

    Könnte Sie wahrscheinlich auch ein label erstellen, die ein Bild enthält. Dann könnten Sie loszuwerden, die click() hf.

    habe ich gemacht und das Beispiel hier jsfiddle.net/jitendravyas/hNRRR
    ist es immer ausgewählt?
    Ja. Sie hätte getestet, ohne die .hide(). Sie verbessern sollten, den code zu zeigen, beide ungeprüft und geprüft allerdings.
    Können wir das Bild ändern, nach ausgewählten wie @Frédéric Hamidi kommentiert. Ich meine, wenn Benutzer deaktivieren, dann wieder will ich zeigen ein anderes Bild

    InformationsquelleAutor ThiefMaster

Schreibe einen Kommentar