javascript - 如何使用 OnClick 事件设置 Jquery Mobile 导航
问题描述
我正在用 Jquery Mobile、Cordova 和 WordPress 构建一个混合应用程序。我目前的问题是关于我在 index.html 中具有该data-role="page"
属性的“页面”之间的导航。
当前设置:我在data-role="navbar"
内部使用data-role="header"
,每个页面都有以下标题:
<div data-role="navbar">
<ul>
<li><a class="blue-button home-button" href="#" data-transition="slidefade">HOME</a></li>
<li><a class="blue-button artist-refresh artist-button" href="#" data-transition="slidefade">ARTIST</a></li>
<li><a class="blue-button show-button" href="#" data-transition="slidefade">SHOW INFO</a></li>
</ul>
</div><!-- /navbar -->
main.js 文件我试图通过类名和 .ui-page-active 类向每个导航元素添加事件侦听器我还捆绑了其他一些具有 clickEvents 但我通过 ID 引用它们的独特元素:
function setupMainNav() { console.log("Settign Up SUB NAV");
$('.ui-page-active .show-button').on('click', function () {
console.log("In the show info click");
$.mobile.changePage("#show-info", {
transition: "slide"
});
});
$('.ui-page-active .home-button').on('click', function () {
console.log("In the show info click");
$.mobile.changePage("#home", {
transition: "slide"
});
});
$('#artistContactButton').on('click', function () {
console.log("Show Contact Form");
$.mobile.changePage("#artist-contactpage", {
transition: "slide"
});
});
$('div.ui-page-active a.artist-button').on('click', function () {
console.log("artist button click");
$.mobile.changePage("#cyan-home", {
transition: "slide"
});
});
$('#show_link').on('click', function () {
$.mobile.changePage("#cyan-home", {
transition: "slide"
});
});
$('#shop_link').on('click', function () {
$.mobile.changePage("#shop-home", {
transition: "slide"
});
});
}
我所做的是每次页面更改时尝试所有 setupMainNav() 函数,.on('pagecreate')
但只有加载的第一页具有带有这些 ID 的 #show_link 和 #shop_link 元素,当然这些是仅有的两个。
设置通过 JS 而不是<a href>
解决方案
免责声明:这些是我认为的“最佳实践”中的一些。其他人可能不同意;YMMV。这也是假设您不想使用像 Vue.js 或 React.js 这样的库或框架,它们通常会以完全不同的方式做事。根据具体情况,这些库可能既有优点也有缺点。
但在这些限制内,总体思路是这样的:
- 保持事件处理程序的通用性,以便一个函数可以执行多项操作。
- 传递链接之间不同的东西作为属性。这将与活动相关的事物保持在链接中。
- 我喜欢将事件侦听器附加到 DOM 中更高的位置,然后在事件冒泡时处理它们。在这种情况下,我们将事件附加到
ul
标签,并捕获click
从标签冒出的任何事件a
。恕我直言,这有几个优点:- 如果您改变列表,新链接将自动使用当前事件处理程序。
- 您只有一个附加到 DOM 的事件处理程序,而不是 3 个(无论
a
您有多少标签) a
如果您想在(或代替)默认操作之前做一些特别的事情,这也使您有机会直接将其他事件侦听器添加到特定标签。因为直接附加的事件首先发生,然后事件冒泡。如果您希望它发生而不是,您只需调用e.stopPropagation()
以防止事件冒泡。
此外,我过去有时所做的是拥有一个带有标题和导航栏的通用页面,然后通过 ajax 加载主要内容 div。这具有非常视觉上令人愉悦的效果,当您转到不同的页面时,导航栏保持不变,并且不会重新加载。您可以在下面的示例代码中轻松做到这一点,如果changePage
正在执行 XHR/fetch,然后将内容加载到主内容 div 中。
在这个大大简化的示例中,我展示了如何使用 href、innerText 和 data 属性根据单击的链接执行不同的操作。当然,您可以在这方面做尽可能多(或尽可能少)的工作。
$('ul.navbar').on('click', 'a', function(e) {
var t = e.target;
var info = t.dataset.info || '';
console.log("click " + t.innerText + ' ' + info);
$.mobile.changePage(t.href, {
transition: "slide"
});
e.preventDefault();
return false;
});
// stub of $.mobile.changePage
$.mobile = {
changePage: function(href, opts) {
console.log('changePage', href);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class='navbar'>
<li><a href="#home" data-info="let's go home!">HOME</a></li>
<li><a href="#artist">ARTIST</a></li>
<li><a href="#info">SHOW INFO</a></li>
</ul>
推荐阅读
- c# - Unity文本未更新
- wix - 在卸载期间将参数传递给自定义操作
- ruby - 谷歌日历 API 红宝石,日期时间时区
- reporting-services - IsNothing 在 SSRS 表达式中没有按预期工作
- spring - spring 配置文件中的系统属性值
- amazon-web-services - 如何手动设置 AWS ElasticSearch 并通过浏览器使用 kibana?
- apache-kafka - Kafka 使用 Key 发送消息来决定分区还是手动
- angular - 如何以角度更改剑道网格中选定行的颜色
- amazon-ecs - Splunk 与 ECS
- docker - 如何从命令行到 Docker Hub 获取图像?