效果-jquery ajax仿文件夹层级打开

问题描述

jquery ajax仿文件夹层级打开

小弟最近在写个仿360或百度的云盘效果。
不知道他们的文件夹列表加载,然后点击打开下一层是如何实现的?
小弟自己写了个,虽然实现了,但js调试的时候出现了无限加载的问题。
因为需要服务器端的支持,就贴一下核心函数。

 //加载列表数据
function loadListData() {
    //列表加载
    $.post("ListHandler.ashx", { folderId: curFolderId(), isPublic: isPublic(), operate: "list" }, function (data) {
        $("#list").html(data);
        //点击文件夹进入子列表
        $("#list li .text").on("click", function (e) {
                //加载面包屑
                loadCrumb();
                //加载列表数据
                loadListData();
            }
        });
    });
}
 //加载面包屑
function loadCrumb() {
    $.post("ListHandler.ashx", { folderId: curFolderId(), isPublic: isPublic(), operate: "crumb" }, function (data) {
        $("#crumb .crumb-path").html(data);
        //面包屑点击事件
        $("#crumb .crumb-path span").on("click", function () {
            //加载列表
            loadListData();
            //加载面包屑
            loadCrumb();
        });
    });
}

然后用到需要列表刷新的地方发就用loadListData();
loadCrumb函数就是为了加载导航栏的

整体效果请参考360云盘,打开文件夹,文件列表的显示以及导航栏的变化,然后导航栏中点击可返回上一级或全部文件等。

感觉这样的写法是否正确,请大神指点

时间: 2024-08-03 05:19:40

效果-jquery ajax仿文件夹层级打开的相关文章

jQuery实现仿美橙互联两级导航菜单效果完整实例_jquery

本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的仿美橙互联两级导航菜单,效果不错吧,更像是一个滑动门,不会让你失望的. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-mchl-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

jQuery实现仿美橙互联两级导航菜单的方法

 这篇文章主要介绍了jQuery实现仿美橙互联两级导航菜单的方法,实例分析了jQuery操作css及setTimeout等实现导航菜单的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery实现仿美橙互联两级导航菜单的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

jQuery实现仿美橙互联两级导航菜单的方法_jquery

本文实例讲述了jQuery实现仿美橙互联两级导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法

        我们都知道在AjaxPro的方法AjaxPro.Utility.RegisterTypeForAjax(typeof(所在类的类名));会将标记有[Ajax.AjaxMethod]方法注册在客户端.在某项目中,设计模板字段引擎,采用html+jquery实现,这里的数据就难免需要ajax获取,但是团队对于js掌握不一,所以我写了下面辅助类,可以像ajaxpro一样简化ajax的开发. 代码-jQueryInvokeMethodAttribute (此处只做标示方法处理,所以为空)

jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法_jquery

在某项目中,设计模板字段引擎,采用html+jquery实现,这里的数据就难免需要ajax获取,但是团队对于js掌握不一,所以我写了下面辅助类,可以像ajaxpro一样简化ajax的开发. 代码-jQueryInvokeMethodAttribute (此处只做标示方法处理,所以为空): 复制代码 代码如下: [AttributeUsage(AttributeTargets.Method, AllowMultiple=false,Inherited=false)] public class jQ

基于jQuery Ajax PHP文件上传程序代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"         "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv=&q

js实现仿京东2级菜单效果(带延时功能)_jquery

本文实例讲述了jquery实现仿京东2级菜单效果.分享给大家供大家参考.具体如下: 这里介绍js实现仿京东2级菜单效果代码,带有延时功能,操作上更加舒适自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fjd-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果_java

写在前面,在笔者完成这个demo的时候,笔者发现现在大家已经不用Ajax来完成联级菜单了,实际上笔者这个demo也并不是为了完成这个,笔者主要的学习方向是JavaWeb后台的业务逻辑开发.但是做后台呢还是需要对前端有所了解,尤其是像Ajax这种异步提交数据的技术需要了解并掌握.所以这里笔者这里用了一个联级菜单来练习Ajax异步提交,当然后续还会写几个异步提交表单的demo. 笔者的后台是用的spring+SpringMVC的框架,这里不对这部分进行解释,重点在jQuery和Ajax. 第一,下载

jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)_jquery

弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用. 效果展示        源码下载 HTML 由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源. <link rel="stylesheet" hre