Question

我在打开jquery-mobile面板时遇到问题-滑动手指/鼠标时它可以很好地打开，但是CSS似乎丢失了。我以前遇到过这种情况，并使用过..

tx = t.xcor() 
ty = t.ycor()

但是，如果我这样做，则该面板中包含的listview会完全消失。

如果我在追加后改用此调用，则会得到图标，但没有更多

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

可能是什么原因？

js文件

$('ul').listview();

html文件（面板）

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");
        });
 }

}

图片1（无CSS）

image2（某些CSS或至少是图标） 正在调用listview（）

image3（空白面板） 调用$（＃menu）.trigger（“ create”）;

Answer 1

如果将其附加到body，则意味着您将以external panel结尾。

将其附加到主体之后，使用$(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">（省略了右引号）。

JQuery Mobile面板-调用.trigger（“ create”）的内容丢失

1 个答案: