我正在尝试向我的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-->
此popUp充满了数据,并在单击特定按钮时打开：
$('#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将位于textarea agein的底部.但是当我再次打开popUp时,我想总是把它放在textarea的顶端.为了实现这一点,我在这个popUp中实现了一个“Ok”-Button,如下所示,它关闭popUp并将scrollingTop设置为0：
$('#btn_textArea').click(function() {
// Setting position of the textArea to "0" -> But doesn't work.....
$('#popupTextArea').scrollTop(0);
);
});
我在这一点上有点兴奋,因为textArea的外观仍然相同.我需要刷新还是什么？我会非常感谢每一个帮助….
解决方法
您可以使用popupbeforeposition事件来操作textarea的scrollTop属性：
$(document).ready(function(){
$("#exampleWindow").on("popupbeforeposition",function(evt,ui){
$(this).find("textarea").scrollTop(0);
});
});
在这里你有一个带示例的jsfiddle,用一些文本填充textarea并测试在滚动后打开弹出窗口：http://jsfiddle.net/elchininet/eBp7S/