1

我想要做的是将我的导航栏 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();
});

这导致根本看不到链接。

如何创建一个函数来在一个地方加载“导航栏”并使用 jQuery Mobile 样式？

4

1 回答 1

1

document ready不应与 a 一起使用jQuery Mobile，它通常会在页面加载到DOM. 要查找有关此主题的更多信息，请查看此文章或在此处找到它。

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

我给你做了一个工作的 jsFiddle例子。

$(document).on('pagebeforecreate', '#index', function(){       
    $('[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>');
});
于 2013-03-20T15:30:28.940 回答