Есть ли способ управления расположением кнопки закрытия в меню пользовательского выбора jQuery Mobile? - PullRequest
Новая
       17

Есть ли способ управления расположением кнопки закрытия в меню пользовательского выбора jQuery Mobile?

0 голосов
/ 03 января 2012

У меня есть пользовательское меню выбора (несколько), определенное следующим образом: 

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

Все работает нормально, за исключением того, что я хочу переместить значок кнопки заголовка вправо И отобразить текст Закрыть.(Я обнаружил, что у некоторых мобильных пользователей есть проблема либо с пониманием того, для чего предназначен значок X, либо с затруднениями при нажатии на него, поэтому я хочу, чтобы оно было справа, а слово «Закрыть» стало слишком большим, чтобы его можно было пропустить.)чтобы это можно было сделать для выбора, поскольку его параметры применяются к самой панели выбора.

Я попытался перехватить событие create и найти там привязку кнопки и добавить для этого обработчик создания, делаячто-то вроде этого (я пробовал несколько вариантов, как вы можете видеть из комментариев): 

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

Итак, я попытался сбросить параметры кнопки и вызвать обновление (не работало), а также изменитьCSS.Ни одна из них не сработала, и у меня возникли странные проблемы с форматированием, когда значок закрытия имел разрыв строки.

Кто-нибудь знает, как это сделать?

Ответы [ 3 ]

0 голосов
/ 04 января 2012

То, как я этого добился, было немного изменить мобильный код jquery, так что кнопка закрытия всегда появлялась вправо, без значка и с текстом «Закрыть» - не самый лучший способ, с которым я согласен.но работает ..

0 голосов
/ 13 марта 2014

У меня похожий случай, и я сделал несколько грязных попыток по этому поводу: 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);
} );
0 голосов
/ 04 января 2012

Я получил это, чтобы работать чисто после просмотра исходного кода для плагина selectmenu. На самом деле это не использование кнопки; тег привязки является источником для плагина buttonMarkup, который уже был создан (natch) до возникновения события Create.

Это означает, что разметка уже создана. Моя первая попытка (см. Мой вопрос), где я пытаюсь исказить существующую разметку, слишком грязная. Чище и надежнее убрать кнопку разметки и воссоздать ее с моими желаемыми опциями. Обратите внимание, что селектор «#search» является идентификатором JQ page-div, а «#DanceStyles» - это идентификатор моего собственного элемента select. Я мог видеть, что последний используется для идентификатора меню, поэтому я сначала выбираю его и перемещаюсь вверх и вниз к якору; Я не мог найти другой надежный способ добраться до якоря. 

$('#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 и должны быть удалены, как и внутренний html, созданный buttonMarkup (дочерний диапазон и т. Д.). По какой-то причине атрибут title не был воссоздан, поэтому я установил его сам.

PS Если кто-нибудь знает о лучшем способе достижения этого (например, buttonMarkup («удалить»)?), Сообщите нам об этом.

...