在AJAX jQuery Mobile之后打开其他页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在AJAX jQuery Mobile之后打开其他页面相关的知识，希望对你有一定的参考价值。
我在这里看到http://demos.jquerymobile.com/1.4.5/pages-multi-page/，但第二页打开点击。我想在textarea上用.focus（）打开第二页。
<a href="#other-page" data-icon="gear"></a>
<div id="other-page" data-role="page" data-url="other-page">
<div data-role="header" data-position="fixed">
<a href="#" data-icon="back" class="ui-btn ui-icon-back ui-btn-icon-notext ui-corner-all" data-rel="back"></a>
<h1><?php _( 'Notifications' ); ?></h1>
</div>
<div role="main" class="ui-content">
<p>This is another page that can be reached using the links in the global menu.</p>
</div>
</div>
$( document ).on( 'focus', 'textarea', function() {
// what functions here to open other page?
});
谢谢。
答案
最后，我找到了。希望对某人有所帮助。
$( document ).on( 'focus', 'textarea', function() {
$.mobile.changePage( '#other-page' );
});
另一答案
带有bootstrap 4模态的工作版本。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<!-- START BUTTON for MODAL1 xyz !-->
<button type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#modal1">
Open modal1
</button>
<!-- START BUTTON for MODAL1 xyz !-->
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<!-- ▒ modal1 ▒▒▒▒▒▒▒▒▒▒▒▒ !-->
<!-- ░░░░░░░░░░░░░░░░░░░░░ !-->
<!-- ░░░░░░░░░▒▒▒▒▒░▒▒▒▒▒░ !-->
<!-- START modal1 xyz !-->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="modal1Label" aria-hidden="true">
<!-- START MODAL-DIALOG xyz !-->
<div class="modal-dialog modal-lg" role="document">
<!-- START MODAL-CONTENT xyz !-->
<div class="modal-content">
<!-- START MODAL-HEADER xyz !-->
<div class="modal-header">
<!-- START MODAL-TITTLE xyz !-->
<h5 class="modal-title" id="modal1Label">modal1 title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- END MODAL-TITTLE xyz !-->
</div>
<!-- END MODAL-HEADER xyz !-->
<!-- START MODAL-BODY xyz !-->
<div class="modal-body px-3">
modal1 body - Switch
</div>
<!-- END MODAL-BODY xyz !-->
<!-- START MODAL-FOOTER xyz !-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="btn-modal1-save-changes">Save changes</button>
</div>
<!-- END MODAL-FOOTER xyz !-->
</div>
<!-- END MODAL-CONTENT xyz !-->
</div>
<!-- END MODAL-DIALOG xyz !-->
</div>
<!-- END modal1 xyz !-->
<!-- ▒ modal1 ▒▒▒▒▒▒▒▒▒▒▒▒ !-->
<!-- ░░░░░░░░░░░░░░░░░░░░░ !-->
<!-- ░░░░░░░░░▒▒▒▒▒░▒▒▒▒▒░ !-->
<!-- jQuery first, then Popper, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script>
// Capture modal shown event
$(document).on('shown.bs.modal', '#modal1', function() {
console.log('shown.bs.modal Shown Event for #modal1 fired.');
alert('shown.bs.modal Shown Event for #modal1 fired.');
});
// Capture modal hidden event
$(document).on('hidden.bs.modal', '#modal1', function() {
console.log('hidden.bs.modal Hidden Event for #modal1 fired.');
alert('hidden.bs.modal Hidden Event for #modal1 fired.');
});
// Capture btn-modal1-save-changes click event
$(document).on('click', '#btn-modal1-save-changes', function (e) {
alert('btn-modal1-save-changes Click Event for #modal1 fired.');
// Hide modal
$('#modal1').modal('hide');
});
</script>
</body>
</html>
以上是关于在AJAX jQuery Mobile之后打开其他页面的主要内容，如果未能解决你的问题，请参考以下文章
jquery mobile listview使用ajax动态加载后,跳转到其他页面返回时数据没有保存如何解决?
Jquery mobile collapsible在ajax get中不起作用
jQuery Mobile-jquery Mobile 怎么用ajax提交表单
在 jQuery Mobile 中的 Ajax 调用中显示页面加载微调器