7

我正在尝试向我的 jQuery 移动应用程序添加“更改日志”。如果出现错误，用户应该有能力查看发生了什么问题。因此，我实现了一个带有 textarea 的弹出窗口（参见下面的代码）

        <!-- DIALOG Start-->
        <div data-role="popup" id="popupLog" data-overlay-theme="a" data-theme="b" style="max-width:400px;" class="ui-corner-all">
        <div data-role="header" data-theme="b" class="ui-corner-top">
        <h1>Logg-Einträge:</h1>
        </div>
        <div data-role="none" data-theme="b" class="ui-corner-bottom ui-content">
        <textarea style="height: 120px; max-height: 120px" readonly="readonly" data-mini="true" cols="40" rows="8" id="popupTextArea"></textarea>
        <a href="#" data-role="button" data-inline="true" id="btn_textArea" data-rel="back" data-theme="c">OK</a>    
        </div>
        </div>
        <!-- DIALOG End-->

此弹出窗口填充了数据，并在单击特定按钮时打开：

$('#showLog').click(function() {
    $("#popupDialog").popup("close");
    // populate the textArea with the text
    $("#popupTextArea").text(sessionStorage.getItem("logStack"));
    // open popUp after a specific time
     setTimeout( function(){$('#popupLog').popup('open'); 
         }, 1000 );
});

到目前为止，所有功能都运行良好。问题是：当用户在 textarea 内向下滚动，关闭 popUp 并重新打开它时，滚动条的位置仍然相同 - 例如用户向下滚动到底部，关闭 popUp 并重新打开它 - popUp 将再次位于文本区域的底部。但是当再次打开弹出窗口时，我想始终处于文本区域的顶部。为了实现这一点，我在这个弹出窗口中实现了一个“Ok”按钮，如下所示，它关闭弹出窗口并将 scrollingTop 设置为 0：

$('#btn_textArea').click(function() {
// Setting position of the textArea to "0" -> But doesn't work.....
     $('#popupTextArea').scrollTop(0);
     );
});

我在这一点上挣扎，因为 textArea 的外观还是一样的。我需要刷新还是什么？我会非常感谢每一个帮助......

4

1 回答 1

4

您可以使用该popupbeforeposition事件来操作scrollToptextarea 的属性：

$(document).ready(function(){

    $("#exampleWindow").on("popupbeforeposition", function(evt, ui){

        $(this).find("textarea").scrollTop(0);

    });

});

在这里，您有一个带有示例的片段，在滚动后测试以关闭和打开弹出窗口textarea：

$(document).ready(function() {

  $("#exampleWindow").on("popupbeforeposition", function(evt, ui) {
    $(this).find("textarea").scrollTop(0);
  });

});
textarea {
  max-height: 100px;
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css">

<div data-role="popup" id="exampleWindow" data-theme="a" class="ui-corner-all" data-history="false">
  <div style="padding:0px 20px 10px 20px;" align="center">
    <h3>Example</h3>
    <textarea class="enableSelect" cols="40" rows="15" name="mytext" id="mytext" style="resize: vertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec quam consectetur, molestie sapien quis, fringilla felis. Vestibulum quam turpis, eleifend vel efficitur vel, pharetra eget lorem. In hac habitasse platea dictumst. Aliquam tincidunt massa vel maximus fermentum. Integer non velit arcu. Curabitur ultricies tincidunt nisi ultrices faucibus. Ut a purus dignissim, varius nisl vitae, ultricies dolor. Integer eget nisi sed ligula imperdiet accumsan ac eget lectus. Curabitur eu lacinia nunc, ac condimentum nunc. Etiam sit amet nulla massa. Etiam porta tortor ac sapien scelerisque, ac posuere mauris lacinia. Morbi id vestibulum nisl. Praesent dolor libero, bibendum quis molestie sit amet, posuere quis mi. Etiam scelerisque porttitor sem id vestibulum. Nullam nec suscipit arcu. Aenean semper in lorem eget aliquet.</textarea>
  </div>
</div>

<a id="openExampleWindow" href="#exampleWindow" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Open popup</a>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js"></script>

于 2014-01-14T17:59:08.340 回答