Question

我把一个简单的例子放在一起：

我有一个缩略图列表，我想在选择列表中的图像时显示更大的图像：

@if (Model.GalleryIcon.Any())
{
    foreach (var cell in Model.GalleryIcon)
    {  
        <a href="/Logo/MobileImage?url=@cell.TargetImagePath" data-rel="dialog" data-transition="pop" ><img src="@cell.ThumbInvPath" /></a>        
    }    
}

/Logo/MobileImage?url=@cell.TargetImagePath返回部分视图，其中@Model是imagePath字符串：

@model string

<div id="logo-image-wrap">
      <img src='@Model' id="logo-wrap-mobile-image"/>
      <br />
      <a href="#" data-role="button" data-rel="back" data-icon="arrow-l">Back</a>
 </div>

这项工作是我在锚点上设置rel =“external”，只是在新的单独页面中打开图像，但它不能用作对话框。从列表中选择缩略图图像时，会出现一个空白对话框，显示“未定义”

当从列表中选择缩略图时，如何使用对话框中的图像详细信息加载我的部分视图加载？

谢谢。

Answer 1

编辑三：

我向任何试图利用我的答案的人道歉。我在某种程度上错过了问题的整个“移动”部分，所以我在这里的例子和解释完全无关紧要。如果您想查看以前编辑中的代码和诸如此类的内容，请单击答案下方的“已编辑”链接。

在与OP讨论这个问题之后，我们认为这样的事情可能有用（但需要在我们知道之前进行测试）：

修改生成的锚点以为我们的jQuery绑定添加一个钩子：

<ul>
...
    <li><a class="btn" href="someurl">Art</a></li>
...
</ul>

然后，我们需要为这些链接的click事件添加一个处理程序：

$('a.btn').on('click', function(event){
    event.preventDefault();
    var href = $(this).attr('href');
    $.mobile.changePage( href, { role: 'dialog', transition: 'slide' } );
});

这应该做什么，它向我们想要显示的页面发出请求，这是由jQuery Mobile框架进行的。第二个参数告诉框架将页面显示为对话框而不是“导航”它。

Answer 2

我认为您可能会尝试通过onclick事件调用对话框，而不是动态dom加载的内联语句。通过这种方式，您可能有机会加载创建的dom元素而不是正在处理的元素。在onclick事件中，您还可以在发送到对话框之前通过.load刷新dom。

Answer 3

详细解决方案发布在此处：

http://usnitch.blogspot.com/2012/08/jquery-mobile-how-to-dynamically-load.html

无法将部分视图显示为JQuery Mobile对话框

3 个答案: