jQuery radioSwitch — Transformez vos boutons radio en Sliders

jQuery radioSwitch est un plugin créé par Ammon Casey dont l’objectif est de transformer des boutonsradio HTML en superbes Sliders d’un coup de magie CSS3 et Javascript. Il suffit d’envelopper les boutons radio avec un container sur lequel s’effectuera l’appel de la fonction. Chaque bouton radio doit posséder un label avec l’attribut for pointant vers l’identifiant du bouton correspondant.

Marquage HTML attendu

<div class="radio-container">
    /** radio buttons and labels go in here. **/
    <input type="radio" name="radioset" id="radio1" value="one"/>
    <label for="radio1">one</label>
    <input type="radio" name="radioset" id="radio2" value="two"/>
    <label for="radio2">Two</label>
    <input type="radio" name="radioset" id="radio3" value="three"/>
    <label for="radio3">Three</label>
</div>

Appel Javascript

$(".radio-container").radioSwitch({width:60});

Paramétrer radioSwitch

var settings = {
    track_class: 'radioSwitch-track',
    handle_class: 'radioSwitch-handle',
    label_class: 'radioSwitch-label',
        mouse_over: 'pointer',
        mouse_out:  'default',
        hide_radio: true,
        sync_checked: true,
        use_images: false,
        speed: '250',
        width: 50,
        height: 25,
        radius: 4,
        padding: 1,
        track_img: 'images/switch_track.png',
        track_bg_color: '#5f6777',
        track_dropshadow_color: 'rgba(255, 255, 255, 0.15)',
        handle_img: 'images/switch_handle.png',
        handle_bg_color: '#f9f9f9',
        handle_border_color: '#d0d0d0',
        label_text_color: "#ffffff",
        label_font_size: 12
};

Via Phollow. Voir la démo.