如何使用 OnClick 事件设置 Jquery 移动导航
How to setup Jquery Mobile navigation using OnClick Events
我正在使用 Jquery Mobile、Cordova 和 WordPress 构建一个混合应用程序。我当前的问题是关于我在具有 data-role="page"
属性的 index.html 中的 "pages" 之间的导航。
当前设置:我在 data-role="header"
中使用 data-role="navbar"
并且 EACH 页面具有以下 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 文件我正在尝试通过 class 名称和 .ui-page-active class 将事件侦听器添加到每个导航元素我也捆绑了一些其他具有 clickEvents 但我通过 ID 引用它们的独特元素:
函数 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() 函数 every-time 使用 .on('pagecreate')
更改页面,但只有加载的第一页具有 #show_link 和#shop_link 具有这些 ID 的元素,当然只有这两个。
设置通过 JS 而不是 <a href>
控制的导航的最佳做法是什么
免责声明:这些是我认为的一些 "best practices." 其他人可能不同意; YMMV。此外,这是假设您不想使用像 Vue.js 或 React.js 这样的库或框架,它们通常会做一些完全不同的事情。根据具体情况,这些库既有优点也有缺点。
但在这些限制内,总体思路是这样的:
- 保持事件处理程序的通用性,以便一个函数可以做多件事。
- 将 link 之间不同的东西作为属性传递。这将与 activity 相关的内容放在 link.
中
- 我喜欢将事件侦听器附加到 DOM 中更高的位置,然后在事件冒泡时对其进行处理。在这种情况下,我们将事件附加到
ul
标签,并捕获从 a
标签冒出的任何 click
事件。恕我直言,这有几个优点:
- 如果您更改列表,新的 links 将自动使用当前事件处理程序。
- 您只有一个事件处理程序附加到 DOM,而不是 3 个(无论您有多少
a
标签)
- 如果您想在默认操作之前(或代替)做一些特殊的事情,这也让您有机会直接将其他事件侦听器添加到特定的
a
标签。因为直接附加的事件先发生,然后事件冒泡。如果你想让它发生而不是,你只需调用 e.stopPropagation()
来防止事件冒泡。
此外,我过去有时所做的是创建一个带有 header 和导航栏的通用页面,然后通过 ajax 加载主要内容 div。这具有非常视觉上令人愉悦的效果,当您转到不同的页面时,导航栏保持不变,并且不会重新加载。您可以在下面的示例代码中轻松执行此操作,如果 changePage
正在执行 XHR/fetch,然后将内容加载到主要内容 div.
在这个大大简化的示例中,我展示了如何使用 href、innerText 和数据属性根据单击的 link 执行不同的操作。当然,在这方面,您可以want/need做多少(或多少)。
$('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>
我正在使用 Jquery Mobile、Cordova 和 WordPress 构建一个混合应用程序。我当前的问题是关于我在具有 data-role="page"
属性的 index.html 中的 "pages" 之间的导航。
当前设置:我在 data-role="header"
中使用 data-role="navbar"
并且 EACH 页面具有以下 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 文件我正在尝试通过 class 名称和 .ui-page-active class 将事件侦听器添加到每个导航元素我也捆绑了一些其他具有 clickEvents 但我通过 ID 引用它们的独特元素:
函数 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() 函数 every-time 使用 .on('pagecreate')
更改页面,但只有加载的第一页具有 #show_link 和#shop_link 具有这些 ID 的元素,当然只有这两个。
设置通过 JS 而不是 <a href>
免责声明:这些是我认为的一些 "best practices." 其他人可能不同意; YMMV。此外,这是假设您不想使用像 Vue.js 或 React.js 这样的库或框架,它们通常会做一些完全不同的事情。根据具体情况,这些库既有优点也有缺点。
但在这些限制内,总体思路是这样的:
- 保持事件处理程序的通用性,以便一个函数可以做多件事。
- 将 link 之间不同的东西作为属性传递。这将与 activity 相关的内容放在 link. 中
- 我喜欢将事件侦听器附加到 DOM 中更高的位置,然后在事件冒泡时对其进行处理。在这种情况下,我们将事件附加到
ul
标签,并捕获从a
标签冒出的任何click
事件。恕我直言,这有几个优点:- 如果您更改列表,新的 links 将自动使用当前事件处理程序。
- 您只有一个事件处理程序附加到 DOM,而不是 3 个(无论您有多少
a
标签) - 如果您想在默认操作之前(或代替)做一些特殊的事情,这也让您有机会直接将其他事件侦听器添加到特定的
a
标签。因为直接附加的事件先发生,然后事件冒泡。如果你想让它发生而不是,你只需调用e.stopPropagation()
来防止事件冒泡。
此外,我过去有时所做的是创建一个带有 header 和导航栏的通用页面,然后通过 ajax 加载主要内容 div。这具有非常视觉上令人愉悦的效果,当您转到不同的页面时,导航栏保持不变,并且不会重新加载。您可以在下面的示例代码中轻松执行此操作,如果 changePage
正在执行 XHR/fetch,然后将内容加载到主要内容 div.
在这个大大简化的示例中,我展示了如何使用 href、innerText 和数据属性根据单击的 link 执行不同的操作。当然,在这方面,您可以want/need做多少(或多少)。
$('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>