我对 JavaScript/jQuery 比较陌生,使用 ASP.NET 的经验还不到 6 个月。我在使用 colorbox 时遇到问题带有 SQL Server 应用程序的 ASP.NET 插件。
现在,我正在使用 colorbox 在我一直在开发的 PhotoGallery 中打开更大的缩略图显示。一切似乎都很好,我可以在 colorbox 显示中将照片组合在一起。
一切正常,除了我的 ListView
有分页,所以每页只显示 40 张图片。 Colorbox 只会对当前位于 ListView
页面上的照片进行分组。
.ASPX 页面 ListView
(不漂亮但可以用)
<ItemTemplate>
<td id="Td2" runat="server" style="padding:10px">
<a class='colorbox' href="/Photos/AllPhotos/<%#Eval("FileName") %>"
title="<strong><%# Eval("Title") %></strong> photo by: <%#Eval("Name") %>">
<img src="/Photos/AllPhotos/Thumbnail/<%#Eval("FileName") %>"
title="<%# Eval("Title") %>" /></a>
</td>
</ItemTemplate>
用于绑定(bind)颜色框的 JavaScript:
function pageLoad() {
$("a.colorbox").colorbox({
rel: "gal",
maxWidth: "100%",
maxHeight: "100%"
})
};
我想要的是将 colorbox 绑定(bind)到绑定(bind)到 ListView
的所有照片,而不仅仅是当前页面。因此,理想情况下,用户可以翻阅我们图库中的所有照片(通过单击其中一个缩略图),而不必关闭 colorbox --> 转到下一页 --> 再次打开 colorbox。
有没有一种简单的方法可以将颜色框绑定(bind)到 ListView
中的所有照片?我可以想到几个“黑客”方法(例如将照片绑定(bind)到隐藏的 ListView
,并将它们与显示的照片分组)但我正在尝试开发一个很好用的应用程序!
我找到了看起来像 promising 的东西,但我以前从未使用过 JSON/SQL,所以如果我必须那样做的话,我会有一个学习曲线。
如有任何帮助,我将不胜感激,我在工作中经常使用这些论坛,因此这是我第一个寻求建议的地方。
(抱歉,如果我遗漏了什么,这是我的第一篇文章)
编辑
好吧,我想出了一些办法,完成了工作,但可能不如我希望的那么好。我最终做的是创建第二个数组,其中填充了所有未显示的照片,将其绑定(bind)到隐藏的 ListView,然后 colorbox 将隐藏的照片与显示的照片分组。它似乎工作正常,只是不如我希望的那么干净,所以我仍然愿意接受更好的方法(如果有的话),但现在我很满意。
最佳答案
这是一种使用datatables的方法并将所有数据绑定(bind)到服务器上的 ListView(不要在 ListView 上使用分页)并在客户端获得更流畅的分页,这仍然适用于 colorbox。
设置您的 ListView 的 LayoutTemplate。你需要一个类为“datatable”的表,你还需要 thead 和 tbody 才能使数据表工作,再加上一些用 jQuery 选择表的方法(这里我正在制作 id“tblStuff”并确保有不是 runat="server")。此外,如果您在设计 View 中创建 LayoutTemplate,请小心,因为 Visual Studio 习惯于将一个表嵌套在另一个表中。
<LayoutTemplate>
<table id="tblStuff" class="datatable">
<thead><tr><th>...(Your <th> elements go here)...</tr></thead>
<tbody><tr ID="itemPlaceholder" runat="server"></tr></tbody>
</table>
</LayoutTemplate>
现在在脚本中,您可以这样做:
$(document).ready(function() {
$('a.colorbox').colorbox({
// just how you had it before.
});
$('#tblStuff').dataTable({
// here is where you'll want to set some of the many many options for datatables.
// See their documentation.
});
});
这就是它的全部。您应该能够保持 ItemTemplate 不变。
关于javascript - 颜色框和 ListView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11232065/