pestañas - jquery ui widgets tabs

Cómo manejar el evento de cambio de jQuery UI Selectmenu

Question

utilizo el menú de selección de jquery ui con la opción de renderizado personalizado

¿Cómo puedo manejar el evento de change ?

lo intento

   $(''#filesA'').on(''change'', function() {
  alert( ''x''); 
});

pero no funciona con jQuery UI Selectmenu

y también lo intento

$( "#filesA" ).selectmenu({
  change: function( event, ui ) {}
});

está funcionando pero es crear otra instancia de menú de selección !!

mi código js

$( document ).ready(function() {

  $( "#filesA" ).selectmenu({ change: function( event, ui ) { alert(''x''); }});



$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
                            _renderItem: function( ul, item ) {
                                var li = $( "<li>", { text: item.label } );

                                if ( item.disabled ) {
                                    li.addClass( "ui-state-disabled" );
                                }

                                $( "<span>", {
                                    style: item.element.attr( "data-style" ),
                                    "class": "ui-icon " + item.element.attr( "data-class" )
                                })
                                .appendTo( li );

                                return li.appendTo( ul );
                            }
                        });

                        $( "#filesA" )
                        .iconselectmenu()
                        .iconselectmenu( "menuWidget" )
                        .addClass( "ui-menu-icons" );




});

y mi código html

                <label class="langLabel" for="filesA">Select your language:</label>
                <select name="filesA" id="filesA">
                    <option value="lan1">Test Lang1</option>
                    <option value="lan2">Test Lang2</option>
                    <option value="lan3">Test Lang3</option>
                    <option value="lan4">Test Lang4</option>
                    <option value="lan5">Test Lang5</option>
                 </select>

Answer 1

Eche un vistazo aquí: http://jsfiddle.net/JLVSM/

Simplemente cambie su código a:

$( "#filesA" ).selectmenu({ change: function( event, ui ) { alert(''x''); }});

$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function( ul, item ) {
        var li = $( "<li>", { text: item.label } );

        if ( item.disabled ) {
            li.addClass( "ui-state-disabled" );
        }

        $( "<span>", {
            style: item.element.attr( "data-style" ),
            "class": "ui-icon " + item.element.attr( "data-class" )
        })
        .appendTo( li );

        return li.appendTo( ul );
    },
});

$( "#filesA" ).addClass( "ui-menu-icons" );

Answer 2

Lo solucioné de esta manera:

$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
    var li = $( "<li>", { text: item.label } );

    if ( item.disabled ) {
        li.addClass( "ui-state-disabled" );
    }

    $( "<span>", {
        style: item.element.attr( "data-style" ),
        "class": "ui-icon " + item.element.attr( "data-class" )
    })
    .appendTo( li );

    return li.appendTo( ul );
},});      
$("#filesA").iconselectmenu({ change: function( event, ui ) { alert("Hi"); s}}).iconselectmenu( "menuWidget" ).addClass( "ui-menu-icons" );

Answer 3

O más específicamente ...

$(function() {
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( li );
return li.appendTo( ul );
}
});

$( "#filesB" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons customicons" );

$(''#filesB'').iconselectmenu({
    change: function( event, ui) {
    alert(''something has changed'');
    }
});
});

Answer 4

Yo tuve el mismo problema. Lo superó eventualmente con iconselectmenu en lugar de selectmenu

$( "#filesA" ).iconselectmenu({ change: function( event, ui ) { alert(''x''); }});

Answer 5

simplemente cambie el disparador ''change'' a ''selectmenuchange''

$(''#filesA'').on(''selectmenuchange'', function() {
    alert( ''x''); 
});