Jquery 从外部文件加载弹出窗口

Question

我需要上传不同的文本文件，每个文件都包含一些弹出窗口。 我正在使用 JQM 1.4.5，我很确定我没有犯任何语法错误。 我的主程序有一个菜单，用户可以选择文本。 此时，我必须上传文本文件和与该文本相关的弹出文件。 我使用'.load' function 所做的所有尝试都适用于文本，但不适用于弹出窗口。 你能给我一些建议吗？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Popup Tooltip</title>

  <link rel = "stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <link rel = "stylesheet" href="style/style.css">
  <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script type="text/javascript">
    
$(document).ready(function(){   
    
    $("#t1").click (function(){ 
        $("#corpus").load("text1/text1.html");
        $("#pp").load("text1/popup1.html #popupBasic").enhanceWithin();
        }); 

    $("#t2").click (function(){
        $("#corpus").load("text2/text2.html");
        $("#pp").load("text2/popup2.html");
    }); 
}); 
</script>   

<style type="text/css">
a:link {color:red;
    font-weight:bold;
    text-decoration: none;
    font-size:100%;
}
#tableMax{
  border: 1px solid white;
  margin:0 auto;
  border-collapse:collapse;
    }
#tableMax tr {border-bottom: 1px solid brown;  
    }
#tableMax td {padding: 18px 25px 18px 20px;
    font-family: "Didot";
    font-size: 20px;
    background-color: antiquewhite;
    color:black;
    }
#tableMax td:nth-child(1) {  
  color:brown;
  font-size:100%;
  text-align:center;
    }
</style>
</head>

<body>
<div data-role="page">
     <div data-role="content">
    <div id="menu" style="display:block;">
        <button class="ui-btn ui-btn-b ui-btn-inline" id="t1">text 1</button>
        <br>
        <button class="ui-btn ui-btn-b ui-btn-inline" id="t2">text 2</button>
    </div>

    <div id="corpus"></div> 
    <div data-role="popup" id="pp"></div>
    
    </div>  <!-- chiude content -->
</div>

</body>
</html>

<!-- text1.html> -->
<table id="tableMax">
    <tr><td>1a</td>
    <td>This text contains a <a href="#popup_1a" data-rel="popup"> popup</a>
    </td></tr>

    <tr><td>1b</td>
    <td>This text also contains a <a href="#popup_1b" data-rel="popup"> popup</a>
    </td></tr>
</table>

<!-- popup1.html  -->
<p id="popup_1" style="background:lightgreen; color:#000; max-width:500px;">
    This is the content of popup 1a.</p>

<p id="popup_2" style="background:lightgreen; color:#000; max-width:500px;">
    This is the content of popup 1b.</p>

Answer 1

以下是实现您想要的一些建议：

基本上，恕我直言，最好不要一次又一次地创建和销毁 JQM 小部件。 如果可能，请在开始时创建所有需要的小部件并在需要时更改内容，即文本和图像。
在我的示例中，我将向您展示两者：动态销毁和实例化 JQM 表以及动态更改现有弹出窗口的内容。 请注意，对于 JQM 表， thead和th标签是强制性的。
在您的示例中，您可能需要显示一些与表格行相关的数据，但在我的示例中，我会将弹出数据附加到单个单元格。 我相信，这是一种更灵活的方法。
创建这种关系的最简单方法是设置自定义数据属性。 你可以随心所欲地称呼它。 例如，数据信息： <a href="#pp" data-rel="popup" data-info="#1a"> popup</a>
之后，弹出内容将从单击的锚点中检索，就在弹出窗口打开之前。
对于菜单，我使用的是单选按钮而不是按钮，因此代码会简单得多，只使用一个事件处理程序。
此外，如果您在下载表格数据（表格淡入）后使用微调器和视觉反馈告诉用户正在发生某事，那就太好了。

这是最相关的代码：

$(document)
  .ready(function () {
    $('input[name=files]').on('change', function (e) {
      var path = e.target.id, $table = $("#tableMax").hide().table("destroy");
      $.mobile.loading("show");
      $.when($.get(path + '/popup.html'), $.get(path + '/text.html')).done(
        function (popupData, tableData) {
          $.mobile.loading("hide");
          /* each data[0] will contain the response text */
          $table.html(tableData[0]).table({create: function() { 
            var allPopups = $('<div></div>').append(popupData[0]);
            $(this).fadeIn("slow").data("mobile-table").allHeaders.each(function() {
              $(this).data("cells").each(function(){
                $(this).find("a[href='#pp']").each(function () {
                  var popupLink = $(this).attr("data-info"),
                      popupContent = $(allPopups).find(popupLink);
                  $(this).data("popup-content", popupContent);
                });
              });
            });
          }
        });
      });
    });
  })
  .on('pagebeforechange', function (e, ui) {
    var link = ui.options.link, ctx = link && link.context, hash = ctx && ctx.hash;
    if (hash == '#pp') $(hash).empty().html($(ctx).data('popup-content'));
  });

这是一个完整的工作演示： https://plnkr.co/edit/3IXDqQJMVn2QYOed?open=lib%2Fscript.js

Jquery 从外部文件加载弹出窗口

问题描述

1 个解决方案

解决方案1
0 2021-05-25 14:06:32

Jquery 从外部文件加载弹出窗口

问题描述

1 个解决方案

解决方案1 0 2021-05-25 14:06:32

解决方案1
0 2021-05-25 14:06:32