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

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

jquery-mobile

Jquery mobile Jquery从外部文件加载弹出窗口,jquery-mobile,popup,loading,Jquery Mobile,Popup,Loading,我需要上传不同的文本文件，每个文件都包含一些弹出窗口。我使用的是jqm1.4.5，我非常确定我没有犯任何语法错误。我的主程序有一个菜单，用户可以选择文本。此时，我必须上传文本文件和与该文本相关的弹出文件。我使用“.load”函数所做的所有尝试都适用于文本，但不适用于弹出窗口。你能给我一些建议吗 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me

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

<!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>


弹出工具提示
$（文档）.ready（函数（）{
$（“#t1”）。单击（函数（）{
$（“#语料库”）.load（“text1/text1.html”）；
$（“#pp”）.load（“text1/popup1.html#popubase”）.enhanceWithin（）；
}); 
$（“#t2”）。单击（函数（）{
$（“#语料库”）.load（“text2/text2.html”）；
$（“#pp”）.load（“text2/popup2.html”）；
}); 
}); 
a:链接{颜色：红色；
字体大小：粗体；
文字装饰：无；
字体大小：100%；
}
#tableMax{
边框：1px纯白；
保证金：0自动；
边界塌陷：塌陷；
}
#tableMax tr{边框底部：1px纯棕色；
}
#tableMax td{padding:18px 25px 18px 20px；
字体系列：“Didot”；
字体大小：20px；
背景色：仿古白色；
颜色：黑色；
}
#tableMax td:n个孩子（1）{
颜色：棕色；
字体大小：100%；
文本对齐：居中；
}
文本1


文本2
1a
此文本包含一个
1b
本文还包含一个

这是弹出窗口1a的内容

这是弹出1b的内容

以下是实现您所需的一些建议：

基本上，我认为最好不要一次又一次地创造和破坏同样是一个JQM小部件。如果可能，在一开始就创建所有所需的小部件和更改内容，即文本和图像当你需要的时候
在我的示例中，我将向您展示这两个方面：动态销毁和实例化一个JQM表，并动态更改一个现有弹出窗口的内容。请注意，对于JQM表，
```
thead
```
和
```
th
```
标记是必需的
在您的示例中，可能需要显示一些与表相关的数据行，但在我的示例中，我将把弹出数据附加到单个单元格。我认为，这是一种更灵活的方法
创建这种关系的最简单方法是设置自定义数据属性。你可以随便叫它什么。就比如说,，数据信息：
之后，将从单击的页面检索弹出内容锚定，就在弹出窗口打开之前
对于菜单，我使用单选按钮代替按钮，因此，只需使用一个事件处理程序，代码就会简单得多
此外，如果你告诉用户某个东西是接下来，在桌子后面使用旋转器和视觉反馈数据已下载（表淡入）

以下是最相关的代码：

$(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'));
  });

$（文档）
.ready（函数（）{
$（'input[name=files]'）。在（'change'，函数（e）上{
var path=e.target.id，$table=$（“#tableMax”）.hide（）.table（“销毁”）；
$.mobile.loading（“show”）；
$.when（$.get（path+'/popup.html'），$.get（path+'/text.html'））.done(
函数（PopUpdatea、tableData）{
$.mobile.load（“隐藏”）；
/*每个数据[0]将包含响应文本*/
$table.html（tableData[0]）.table（{create:function（）{
var allPopups=$（''）.append（PopUpdatea[0]）；
$（this）.fadeIn（“slow”）.data（“mobile table”）.allHeaders.each（function（）{
$（this）.data（“单元格”）.each（函数（）{
$（this.find（“a[href=”#pp']）。每个（函数（）{
var populink=$（this）.attr（“数据信息”），
popupContent=$（所有弹出窗口）.find（弹出链接）；
$（此）.data（“弹出内容”，弹出内容）；
});
});
});
}
});
});
});
})
.on（'pagebeforechange'，函数（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'））；
});

这是一个完整的工作演示：

您的代码非常完美，完全符合我的需要。非常感谢。