0

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?

4

3 回答 3

0

我有一个类似的案例，我对此做了一些肮脏的黑客攻击：P

$("#DanceStyles-button").click(function() {
  setTimeout(function(){
    $("#DanceStyles-dialog a[role=button]").removeClass("ui-icon-delete").addClass("ui-icon-check");
    $("#DanceStyles-dialog .ui-title").html("<span style='float:left;margin-left:25px' id='done'>Done</span>Dance Styles");
    $("#DanceStyles-dialog .ui-title #done").click(function() {
      $("#DanceStyles").selectmenu("close")
    });
  },1);
} );
于 2014-03-13T02:46:54.013 回答
0

在查看了 selectmenu 插件的源代码后，我得到了这个干净的工作。它实际上并没有使用按钮；锚标记是 buttonMarkup 插件的来源，它在 Create 事件触发之前已经创建（natch）。

这意味着已经创建了标记。我尝试破坏现有标记的第一次尝试（请参阅我的问题）太混乱了。删除 buttonMarkup 并使用我想要的选项重新创建它会更干净、更可靠。请注意，“#search”选择器是 JQ page-div 的 id，而“#DanceStyles”是我的原生选择元素的 id。我可以看到后者被用于菜单的 id，这就是为什么我首先选择它并向上和向下导航到锚点；我看不到任何其他可靠的方法可以到达锚点。

$('#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' });
        }
    });
});

buttonMarkup 插件在创建自身时使用 A 元素的文本和类值，但其他数据属性来自前一个 buttonMarkup 并且必须删除，buttonMarkup 创建的内部 html（子跨度等）也是如此。由于某种原因，标题属性没有重新创建，所以我自己设置了它。

PS如果有人知道实现此目的的更好方法（例如buttonMarkup（'remove'）？），请告诉我们。

于 2012-01-04T13:18:22.953 回答
0

我实现它的方式是更改一些 jquery 移动代码，以便关闭按钮始终位于右侧，没有图标和文本，“关闭”不是我同意的最佳方式。但有效..

于 2012-01-04T13:26:19.827 回答