分享一个简单的列表效果了(显示：列表|详细)

最新推荐文章于 2024-09-25 00:10:17 发布

nextuntil

最新推荐文章于 2024-09-25 00:10:17 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js/jquery 文章标签： javascript list jquery function server div

本文链接：https://blog.youkuaiyun.com/nextuntil/article/details/5721375

js/jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的列表和详细视图切换功能实现方法。通过使用jQuery和cookie插件来记录用户的显示偏好，并确保在翻页后仍能保持该偏好。此功能通过简单的jQuery脚本和ASP.NET服务器控件实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做的单子里有一个列表页效果，要求可以切换显示模式。

列表：显示发布者，发布时间，标题等基本信息。、

详细：显示图文并茂的发布信息、

当然翻页以后还是保持和上一页的状态。

因为时间比较充裕，所以没动手着急做，结果胡思乱想了一阵子，以为很复杂，呵呵。

研究了下，发现其实挺简单，一审通过，OY！

通过cookie保存列表显示模式，用到了jquery里操作cookie的插件(因为有改动，所以是后面一篇里的)。

jquery代码：

$(function(){ var type = $.cookie("ltype"); if(type == null||type==""){ type="list"; $.cookie("ltype",type); } if(type == "list"){ $(".list").show(); $(".detail").hide(); }else{ $(".list").hide(); $(".detail").show(); } }); function switchlisttype(o){ if($.cookie("ltype") != o){ $.cookie("ltype",o); if(o == "list"){ $(".list").show(); $(".detail").hide(); }else{ $(".list").hide(); $(".detail").show(); } } }

列表部分：

<div> 显示 <a href="javascript:;" onclick="switchlisttype('list')">列表</a>|<a href="javascript:;" onclick="switchlisttype('detail')">详细</a> </div> <div> <ul> <asp:Repeater ID="rptAdsList" runat="server"> <ItemTemplate> <li class="list"> 绑定列表模式信息 </li> <li class="detail"> 绑定详细模式信息 </li> </ItemTemplate> </asp:Repeater> </ul> </div> <div> <webdiyer:AspNetPager ID="AspNetPager1" UrlPaging="true" runat="server" PageSize="3" OnPageChanged="AspNetPager1_PageChanged"> </webdiyer:AspNetPager> </div>