Панель JQuery Mobile - потерянный контент, вызывающий .trigger («создать») - PullRequest
Новая
       26

Панель JQuery Mobile - потерянный контент, вызывающий .trigger («создать»)

0 голосов
/ 24 апреля 2019

У меня проблема при открытии панели jquery-mobile - хорошо, она прекрасно открывается при проведении пальцем / мышью, НО, кажется, теряется CSS. Я сталкивался с этим раньше и использовал такие функции, как .. 

$(#menu).trigger("create");

Но если я сделаю это, список, содержащийся на панели, полностью исчезнет.

если я вместо этого использую этот вызов после добавления, я получаю значки, но не более 

$('ul').listview();

В чем может быть причина?

JS-файл 

var menu = {

menu_: null,
menuIsLoaded: false,
loadMenu: function(){

    var me = this;

    $.ajax({
        url: "html/menu.html",
        success: function(data){
            me.menu_ = $(data);
            me.menu_.appendTo("body");
            me.menuIsLoaded = true;

            console.log("menuloaded: " + me.menuIsLoaded);
            me.bindPanel();

        }
    }); 
},

bindPanel: function() {

    var me = this;
    var myMenu = me.menu_;

            $('body').on('swiperight', function () {

            console.log("open panel1");
            if(me.menuIsLoaded) {

                $(myMenu).panel().panel("open");
                //$('ul').listview();   
                //$(myMenu).trigger("create");                  
            }

        });

        $('body').on('swipeleft', function () {

            $(menu).panel().panel("close");
            console.log("close panel1");
        });
 }

}

html-файл (панель) 

   <div id="panelcontent">
<div data-role = "panel" id = "panel1" data-display="overlay" data- theme="b">
             This is Panel Header
    <div class="panel-content">

      <ul data-role="listview id="mylistview">
        <li data-icon="shop"><a href="page1.html">Page2</a></li>
        <li data-icon="tag"><a href="#campaign-list">Offers</a></li>
        <li data-icon="eye"><a href="#info-exhibition-map">area</a></li>
        <li data-role="list-divider"></li>
        <li data-icon="calendar"><a href="#info-program">Program</a></li>
        <li data-icon="calendar"><a href="#info-seminar">Seminars</a></li>
        <li data-icon="grid"><a href="#info-parking">Parking</a></li>

        <li data-icon="bars"><a href="#info-food">Beverage</a></li>
        <li data-icon="bars"><a href="#info-simulator">History</a></li>
        <li data-icon="user"><a href="#info-service">Callcenter</a></li>
        <li data-icon="location"><a href="#info-map">Vacation</a></li>
        <li data-role="list-divider"></li>
        <li data-icon="delete"><a href="javascript:;" data-rel="close">Hide menu</a></li>
      </ul>
    </div>

image1 (без css)

enter image description here

image2 (некоторые css или хотя бы значки) вызывая listview ()

enter image description here

image3 (пустая панель) вызов $ (# menu) .trigger ("create");

enter image description here

1 Ответ

0 голосов
/ 24 апреля 2019

Если вы добавляете его к body, это означает, что у вас будет внешняя панель .

После того, как вы добавите его к телуиспользуйте $(myMenu).panel().enhanceWithin();, чтобы создать экземпляр панели, а также сообщить JQM, что внутри есть только что добавленный контент, который должен быть улучшен (Ваш listview).

После этого был создан экземпляр panel, и Вы можете открыть его с помощью: $(myMenu).panel("open"); и закрыть его с помощью: $(myMenu).panel("close");.Не нужно копировать его снова.

Кстати, для внешнего материала, вам нужно предоставить data-theme возможно внутри разметки или использовать options во время создания, т.е. для вашей панели что-то вроде этого ниже: 

$(myMenu).panel({
  display: "overlay",
  theme: "b"
}).enhanceWithin();

Более того, вам даже не нужен обработчик swipeleft, потому что он уже встроен в панели JQM.

Кстати, обратите внимание, что в Вашей разметке есть опечатка: data- theme="b" (нежелательный лишний пробел), а также здесь: <ul data-role="listview id="mylistview"> (пропущенная закрывающая кавычка).
...