簡體   English   中英

jQuery移動插件彈出窗口支持

[英]jQuery mobile plugin popup support

我想使用http://demos.jquerymobile.com/1.4.5/popup/創建一個彈出窗口。

這是jQuery托管的CDN托管文件: https ://jquerymobile.com/download/

據我所知,這是https://jsfiddle.net/hbaecklund/1zoj1pms/2/為什么不起作用?



這是我嘗試使用jquery創建的內容。

$( "head" ).append ('<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>');
$( ".target" ).append('<a href="#popupCloseRight" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Right close button</a><div data-role="popup" id="popupCloseRight" class="ui-content" style="max-width:280px"><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><p>I have a close button at the top right corner with simple HTML markup.</p></div>');
  <!-- Include meta tag to ensure proper rendering and touch zooming -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Include jQuery Mobile stylesheets -->
  <link rel="stylesheet"   href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

  <!-- Include the jQuery library -->
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>
    $(document).bind('mobileinit',function(){
      $.mobile.changePage.defaults.changeHash = false;
      $.mobile.hashListeningEnabled = false;
      $.mobile.pushStateEnabled = false;
    });
  </script> 

  <!-- Include the jQuery Mobile library -->
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
  <body>
    <a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow  ui-btn-inline" id="pop" data-transition="pop">Basic Popup</a>
      <div data-role="popup" id="popupBasic">
        <p>pop!!</p>
      </div>

在JSFiddle中,您必須在“外部資源”下的左側菜單中輸入外部“ css”和“ js”文件:

在此處輸入圖片說明

除此之外,JSFiddle要求使用https而不是http。

完成之后, 您的代碼即可正常工作

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM