Question

我正在尝试在JQuery Mobile中创建一个应用程序，我可以使用弹出窗口动态创建按钮。我有这个代码，但每当我刷新页面时，它会自动在屏幕顶部打开，与所有其他弹出窗口不同。

＆＃13;

coefficient

＆＃13;

$(document).on("pageinit", "#home", function() {
    $(".img-holder").append(
        $("<div />", {"class" : "spot_holder"}).append(
            $("<a />", {
                "href" : "#ashcloud",
                "data-rel" : "popup",
                "class" : "spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all",
                "data-transition" : "flip",
                "style" : "top: 35px; left: 240px"
            })
        ).append(
            $("<div />", {
                "data-role" : "popup",
                "id" : "ashcloud"
            }).append(
                $("<p />").text("Ash Cloud")
            ).popup()
        )
    )
})

＆＃13;

Answer 1

没关系我找到了解决方案。不是为每个按钮创建弹出窗口，而是创建一个在所有按钮上切换的弹出窗口，然后通过JS，在每次单击时更改弹出窗口中的文本。

Answer 2

看起来你正试图用纯jQuery方式而不是jQuery Mobile创建对话。

以下是如何创建jQuery Mobile对话的示例。请注意，这里没有Javascript代码。您只需要使用 data-dialog =＆＃34; true＆＃34; 属性创建页面，并从[main]页面链接它。

   <!--...-->

   <!-- page Help -->
 <div data-role="page" id="help" data-theme="b">
  <!-- header (same data-id for persistent toolbar) -->
  <div data-role="header" data-id="tabnav-header" data-position="fixed"    
     data-theme="b">
     <h1>MyApp</h1>

  </div>
  <!-- content -->
  <div data-role="content" class="content_div">
     <ul data-role="listview">
        <li><a href="#about" data-transition="flip">About</a></li>
     </ul>
  </div>
  <!-- footer -->
  <div data-role="footer" data-id="tabnav-footer" data-position="fixed">
     <div data-role="navbar">
        <ul>
           <li><a href="#home" data-theme="b" style="font-weight: normal;" data-icon="home" data-transition="slide">Home</a></li>

           <li><a href="#help" data-theme="b" class="ui-btn-active ui-state-persist" style="font-weight: normal;" data-icon="bars" data-transition="slide">Help</a></li>
        </ul>
     </div>
    </div>
 </div>
  <!-- This page is actually a dialogue window -->
  <div data-role="page" data-dialog="true" id="about" data-theme="b">
    <div data-role="header" data-theme="b">
       <h1>About</h1>
  </div>
    <div data-role="main" class="ui-content" data-theme="b">
        MyApp. All rights deserved.
   </div>
   <div data-role="footer" data-theme="b"></div>
  </div>
  ...

Answer 3

JQ mobile上有一个例子如何动态创建弹出窗口。 http://demos.jquerymobile.com/1.4.1/popup-dynamic/

首先，它们会附加到pagecreate事件而不是＆＃34; pageinit＆＃34;。其次，我认为这是诀窍，他们称之为＆＃34;触发器（＆＃34; pagecreate＆＃34;）＆＃34;追加后。

$.mobile.activePage.append( popup ).trigger( "pagecreate" );

通过JS创建弹出窗口 - Jquery Mobile

3 个答案: