简体   繁体   English

jQuery移动导航功能?

[英]Jquery mobile navigation functionality?

I would like to implement a jquery mobile navigation. 我想实现一个jQuery的移动导航。 But build my own from the jquery load() function. 但是从jquery load()函数构建我自己的。 I have looked at history.js but its so hard to understand. 我看过history.js,但是很难理解。 It would be great to see the correct url for the page in the adressbar. 在地址栏中看到该页面的正确网址将是很棒的。 Please can someone help pushing me in the right direction. 请有人帮助我朝正确的方向前进。

Here is a simple History.js example. 这是一个简单的History.js示例。

Our markup. 我们的标记。

<!DOCTYPE HTML>
<html>
<head>
    <script src="jquery.js"></script>
    <script src="jquery.history.js"></script>
<title>History.js</title>
</head>
<body>

        <a href="page1.html">Page 1</a>
        <a href="Page2.html">Page 2</a>
     <div id="content">
        <p>Content within this box is replaced with content from
            supporting pages using javascript and AJAX.</p>
    </div>
</body>
</html>

The javascript. JavaScript。

$(function() {

            // Note: We are using a capital H instead of a lower 'h'
            var History = window.History; 
            if (!History.enabled) {
                // History.js is disabled for this browser.
                // This is because we can optionally choose to support HTML4 browsers or not.
                return false;
            }

            // Bind to StateChange Event
            History.Adapter.bind(window, 'statechange', function(e) {
                // Note: We are using statechange instead of popstate
                var State = History.getState();
                $('#content').load(State.url + " #content").html();
            });

            $('a').on('click',function(evt) {
                evt.preventDefault();
                History.pushState(null, $(this).text(), $(this).attr('href'));
            });
        });

Insert that script either in the head tag or bottom of the page. 将该脚本插入页面的head标签或底部。 basically pages1.html and page2.html should contain a div called content, and it would return you the contents using the method load from $('#content').load(State.url + " #content").html(); 基本上pages1.html和page2.html应该包含一个名为content的div,它将使用$('#content').load(State.url + " #content").html();方法返回内容$('#content').load(State.url + " #content").html();

and that's about it. 就是这样。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM