Question

我想要做的是将导航栏HTML标记放在一个地方（以便于编辑）。现在我的index.html正文内容如下：

<div data-role="page" id="SomePage">
    <div data-role="header">
        <h1>This is Page 1</h1>
    </div>
    <div data-role="navbar"></div>
</div>

我正在标题中调用我的文件：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" language="javascript" src="app.js"></script>

在我的app.js文件中的

是我尝试加载导航栏的地方。我已经尝试了两种方式

第一个：

var NavBar = function() {
$('div[data-role="navbar"]').html('<ul>' +
    '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
    '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
    '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
    '</ul>');
}

$(document).ready(function() {
    NavBar();
});

这导致页面让应用程序显示我的链接，但它们像普通的ul一样没有列表样式的堆栈

我试过的第二种方式是：

var NavBar = function() {
$('div:jqmData[role="navbar"]').html('<ul>' +
    '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
    '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
    '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
    '</ul>');
}

$(document).ready(function() {
    NavBar();
});

这导致根本看不到链接。

如何创建一个函数来在一个地方加载'navbar'并使用jQuery Mobile样式？

Answer 1

document ready 不应与 jQuery Mobile 一起使用，它通常会在页面加载到 {{1 }} 即可。要了解有关此主题的更多信息，请查看此 ARTICLE 或找到 HERE 。

相反，您应该使用正确的 DOM 页面事件。

我让你成为一名工作人员 example 。

jQuery Mobile

如何调用函数来自动加载jquery移动站点中的元素

1 个答案: