当前位置：文江博客话题详情

动态添加 jQuery Mobile 链接

发布于 2024-10-23 20:59:33 字数 395 浏览 1 评论 0原文

我读了很多关于如何在 jquery mobile 中动态添加内容的内容，但我不知道如何添加链接。

目前我的解决方案如下所示：

添加一个新页面 - 带有 id (id="list-1")
为其创建一个链接 (href="#list-1")

此解决方案在静态页面中完美运行，但我想动态地做。我已经尝试了很多 page() 和类似的东西，但没有任何帮助我。

我的问题是：

如何添加动态链接和动态链接？页数？
我是否选择了正确的方式来使用 ids & ？锚点（#list-1）作为链接或者 jquery mobile 有其他解决方案吗？

如果您需要更多信息，请告诉我

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

趴在窗边数星星i 2024-10-30 20:59:33

要添加动态链接，我发现最简单的方法是让事件侦听器等待单击这些链接。然后，此事件侦听器保存您想要传递到您正在访问的下一个页面的任何参数。只需在每个“li”元素中指定参数，即可将参数从列表元素传递到事件侦听器。

(create the HTML for a list dynamically & store it into list-1-html)
$("div#my-page div[data-role=content]").html(list-1-html);
$("div.list-1 ul").listview();
$("div.list-1 ul").listview('refresh');

那么您的事件侦听器将类似于：

$('#my-page').delegate('li', 'click', function() {
    passedParameter = $(this).get(0).getAttribute('passed-parameter');
});

当 jQuery Mobile 加载下一个页面时，您可能希望动态加载此页面，并且您将拥有可用的 PassedParameter 变量。要动态加载页面，只需添加一个等待 JQM 尝试加载页面的侦听器：

$('[data-role=page]').live('pageshow',function(e, ui){ 
    page_name = e.target.id;
    if (page_name == 'my-page-2'){
        (do something with passedParameter)
    }
});

这是我在 jQuery Mobile 中使用的工作流程，并且一直运行良好。不过，我猜测在未来的版本中，它们将构建某种对将动态参数传递到页面的支持。

To add dynamic links, I have found the easiest way is to just have an event listener waiting for a click on those links. This event listener then saves any parameters you want to pass into the next page you are visiting. You pass the parameters from the list element to the event listener by just specifying parameters within each "li" element.

(create the HTML for a list dynamically & store it into list-1-html)
$("div#my-page div[data-role=content]").html(list-1-html);
$("div.list-1 ul").listview();
$("div.list-1 ul").listview('refresh');

Then your event listener would look something like:

$('#my-page').delegate('li', 'click', function() {
    passedParameter = $(this).get(0).getAttribute('passed-parameter');
});

When jQuery Mobile loads your next page, you'll probably want to load this page dynamically and you'll have this passedParameter variable available to you. To load the page dynamically, just add a listener that waits for JQM to try to load the page:

$('[data-role=page]').live('pageshow',function(e, ui){ 
    page_name = e.target.id;
    if (page_name == 'my-page-2'){
        (do something with passedParameter)
    }
});

This is the workflow I use with jQuery Mobile and it has been working just fine. I'm guessing in future releases, though, that they'll build in some kind of support for passing dynamic parameters to pages.

回复收藏 0 原文

污味仙女 2024-10-30 20:59:33

对 DOM 的任何新增强都应该在页面初始化之前完成。但默认情况下，一旦页面加载到浏览器中，JQM 就会自动初始化页面。

因此，首先需要将 autoInitializePage 属性设置为 false，然后在新页面和链接添加到文档后调用initializePage() 方法。希望这有帮助。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
    $(document).bind("mobileinit", function(){
        $.mobile.autoInitializePage = false;
    });
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
    $(document).ready(function() {

        //add a link.
        $("#page1 div[data-role='content']").append('<a href="#page2">Next Page</a>');

        //add a page.
        $('body').append('  <div data-role="page" id="page2" data-title="next page"><header data-role="header" class="header">  <h5>Page 2</h5></header><div data-role="content"><h3>Good Morning...</h3><a href="#page1">Back</a></div><footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer></div>');

    });

    window.onload = function() {
        $.mobile.initializePage();
    };

</script>
</head>
<body>
    <div data-role="page" id="page1">   
        <header data-role="header" class="header">
            <h5>jQuery Mobile</h5>
        </header>
        <div data-role="content">
            <form method="get" action="" data-transition="slideup">
                <label for="email">Email:</label>
                <input type="email" name="email" id="email" value=""/>              
            </form>
        </div>
        <footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer>
    </div>
</body>
</html>

Any new enhancement to the DOM should be done before the page initializes. But by default JQM automatically initializes the page once the page is load in browser.

Hence first you need to set autoInitializePage property to false and then call initializePage() method after the new page and links are add to the document. Hope this helps.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
    $(document).bind("mobileinit", function(){
        $.mobile.autoInitializePage = false;
    });
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
    $(document).ready(function() {

        //add a link.
        $("#page1 div[data-role='content']").append('<a href="#page2">Next Page</a>');

        //add a page.
        $('body').append('  <div data-role="page" id="page2" data-title="next page"><header data-role="header" class="header">  <h5>Page 2</h5></header><div data-role="content"><h3>Good Morning...</h3><a href="#page1">Back</a></div><footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer></div>');

    });

    window.onload = function() {
        $.mobile.initializePage();
    };

</script>
</head>
<body>
    <div data-role="page" id="page1">   
        <header data-role="header" class="header">
            <h5>jQuery Mobile</h5>
        </header>
        <div data-role="content">
            <form method="get" action="" data-transition="slideup">
                <label for="email">Email:</label>
                <input type="email" name="email" id="email" value=""/>              
            </form>
        </div>
        <footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer>
    </div>
</body>
</html>

回复收藏 0 原文

~没有更多了~