Question

我有一个自定义选择菜单（多个）定义如下：

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

除了我想将标题的按钮图标移到右边并显示关闭文本外，一切正常。（我发现一些移动用户有问题要么意识到X图标是什么，要么他们点击它是有困难的，所以我想在右边用“关闭”这个词做得太大而不能错过。）似乎没有作为选择在select上执行任何选项，因为它的选项适用于选择栏本身。

我试过拦截创建事件并在那里，找到按钮锚点并为其添加一个创建处理程序，做这样的事情（我已经尝试了几种变体，你可以通过注释看到）：

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

所以我尝试重置按钮选项并调用refresh（不起作用），并更改CSS。两个都没有工作，我得到奇怪的格式问题，关闭图标有一个换行符。

任何人都知道正确的方法吗？

Answer 1

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

这意味着已经创建了标记。我尝试破坏现有标记的第一次尝试（请参阅我的问题）太乱了。删除buttonMarkup并使用我想要的选项重新创建它更干净，更可靠。请注意，'＃search'选择器是JQ page-div的id，'＃DanceStyles'是我的native select元素的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（子跨度等）也是如此。由于某种原因，没有重新创建title属性，所以我自己设置了它。

PS如果有人知道更好的方法（例如buttonMarkup（'删除'）），请告诉我们。

Answer 2

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

Answer 3

我有一个类似的案例，我对此做了一些肮脏的黑客：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);
} );

有没有办法控制jQuery Mobile自定义选择菜单上的关闭按钮的布局？

3 个答案: