Is there any way to control the layout of the close button on a jQuery Mobile custom select menu?

Question

I have a custom select menu (multiple) defined as follows:

 <select name="DanceStyles" id="DanceStyles" multiple="multiple" data-native-menu="false">

Everything works fine except that I want to move the header's button icon over to the right AND display the Close text. (I have found some mobile users have a problem either realising what the X icon is for or they have trouble clicking it, so I want it on the right with the word 'Close' making too big to miss.) There don't seem to be any options for doing that on the select since its options apply to the select bar itself.

I have tried intercepting the create event and in there, finding the button anchor and adding a create handler for that, doing something like this (I have tried several variations, as you can see by the commenting out):

        $('#search').live('pagecreate', function (event) {
           $("#DanceStyles").selectmenu({
            create: function (event, ui) {
               $('ul#DanceStyles-menu').prev().find('a.ui-btn').button({
                    create: function (event, ui) {
                        var $btn = $(this);
                        $btn.attr('class', $btn.attr('class').replace('ui-btn-left', 'ui-btn-right'));
                        $btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
   //                             $(this).button({ iconpos: 'right' });
   //                            $btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
       //                            //                            $btn.attr('data-iconpos', 'left');
                        $(this).button('refresh');
                    }
                });
            }
        });
    });

So I have tried resetting the button options and calling refresh (didn't work), and changing the CSS. Neither worked and I got weird formatting issues with the close icon having a line break.

Anyone know the right way to do this?

Answer 1

I got this to work cleanly after looking at the source code for the selectmenu plugin. It is not in fact using a button; the anchor tag is the source for the buttonMarkup plugin, which has already been created (natch) before the Create event fires.

This means that the markup has already been created. My first attempt (see my question) where I try to mangle the existing markup is too messy. It is cleaner and more reliable to remove the buttonMarkup and recreate it with my desired options. Note that the '#search' selector is the id of the JQ page-div, and '#DanceStyles' is the id of my native select element. I could see the latter being used for the id of the menu, which is why I select it first and navigate back up and down to the anchor; I couldn't see any other reliable way to get to the anchor.

$('#search').live('pagecreate', function (event) {
    $("#DanceStyles").selectmenu({
        create: function (event, ui) {
            $('ul#DanceStyles-menu').prev().find('a.ui-btn')
                .empty()
                .text('Done')
                .attr('class', 'ui-btn-right')
                .attr("data-" + $.mobile.ns + "iconpos", '')
                .attr("data-" + $.mobile.ns + "icon", '')
                .attr("title", 'Done')
                .buttonMarkup({ iconpos: 'left', icon: 'arrow-l' });
        }
    });
});

The buttonMarkup plugin uses the A element's text and class values when creating itself but the other data- attributes result from the previous buttonMarkup and have to be removed, as does the inner html that the buttonMarkup creates (child span, etc). The title attribute was not recreated, for some reason, so I set it myself.

PS If anyone knows of a better way to achieve this (buttonMarkup('remove')? for example), please let us know.