Question

编辑斜体 =在问题中添加了更详细的解释。感谢。

我正在构建一个包含Gallery部分的jQuery Mobile网站。该画廊在屏幕顶部有一系列缩略图。用户点击缩略图加载新内容，这是一个更大的图像，文本，以及其中一些的潜在音频。

在这一点上，我不知道该怎么做：jQuery Mobile的工作方式，它适用于加载新页面或视图。但我只是想在当前页面的容器中注入新内容。

要明确的是，当用户点击另一个缩略图时，新图像会用新内容替换容器的内容。

我有两个问题：我不确定如何构建动态内容。我在想我会为每个项目创建一个html文件，通常它总是包含标题，信息和有时音频。

我不确定如何在jQuery Mobile中编写此功能的脚本。它显然是Ajax，但我还不熟悉它，特别是因为jQuery Mobile已经拥有它自己的方法，这似乎重新定义了行为，这种方式与这里描述的方法相矛盾。

以下是我正在尝试做的代码说明：

    <!-- Galleries -->
    <div data-role="page" id="galleries">
        <div data-role="content" role="main">
            This is the Selection UI, if i click on thumb2.jpg, it'd 
            fill #content-holder with the whatever html is in content2.php
            <div id="thumb-carousel">
                <a href="content1.php"><img src="thumb1.jpg"></a>
                <a href="content2.php"><img src="thumb2.jpg"></a>
                <a href="content3.php"><img src="thumb3.jpg"></a>
                <a href="content4.php"><img src="thumb4.jpg"></a>
                <a href="content5.php"><img src="thumb5.jpg"></a>
                <a href="content6.php"><img src="thumb6.jpg"></a>
                <a href="content7.php"><img src="thumb7.jpg"></a>
                <a href="content8.php"><img src="thumb8.jpg"></a>
                <a href="content9.php"><img src="thumb9.jpg"></a>
            </div>
            <!-- This is the container, currently it's filled
            with the kinda stuff i need to put in it. -->
            <div id="content-holder">
                <img src="myimage1.jpg"/>
                <p>Artwork Title</p>
                <p>Caption</p>
                <audio>//mp3</audio>
            </div>
        </div>
    </div>

enter image description here

Answer 1

//remember to use event delegation because you never know when the page will be in the DOM
$(document).delegate('#galleries', 'pageinit', function () {

    //bind a `click` event handler to each thumbnail link
    $('#thumb-carousel').children().bind('click', function () {
        $.ajax({
            url     : $(this).attr('href'),
            success : function (serverResponse) {

                //select the container,
                //then fade it out,
                //change it's HTML to the response from the AJAX request,
                //and fade it back in
                $('#content-holder').fadeOut(500, function () {
                    $(this).html(serverResponse).fadeIn(500);
                });
            },
            error   : function (jqXHR, textStatus, errorThrown) {
                //remember to handle errors so your page doesn't seem broken to the user
            }
        });

        //prevent the default behavior of the link, which is to navigate to the `href` attribute
        return false;
    });
});

这要求您的服务器响应是有效的HTML标记，可以注入DOM，这意味着没有<html>或<body>标记，只是您要添加到DOM中的内容：

<img src="..." />
<span>TITLE</span>
<audio src="..."></audio>

以下是ya的一些文档：

$.ajax()：http://api.jquery.com/jquery.ajax
.closest()：http://api.jquery.com/closest
.fadeIn()：http://api.jquery.com/fadein

在同一页面中动态插入内容，而不是转到新页面

1 个答案: