在上一个案例中用的ajax加载html片段实现导航的切换,这次的这个案例用同样的方法却不是很好实现。
案例:在一个导航栏中,实现点击导航出现不同的选择区域,而且每个页面都有下拉分页异步刷新的效果。如图:
图1 图2
图3 图4
上图中,图2和图4都有下拉分页异步刷新的效果,也就是只要有数据,我们可以一直下拉一直加载数据出来,在前面的《jquery.lazyload.min和jquery-jtemplates在Ajax加载页面的应用》这篇博客里面讲到了下拉分页异步刷新的实现方法。
如果我们这次还是使用ajax异步加载html片段的方法,会发现当我们切换导航的时候,图2上半部分可以加载出来,图4是图2下拉分页的下半部分却加载不出来而显示的是空白的,即使在图2的html片段里面引用了下拉分页的JS同样还是显示不出来。然后我觉得,可能是ajax异步加载html片段只能加载静态的数据而不好加载动态刷新的数据,不然也不是只加载出来了一部分。后来用了另外一种方法实现了html片段的加载。
主页面HTML的部分代码:
<body> <div class="teBuyNav"> <ul> <li class="cur" οnclick="temp(0);$(this).addClass('cur');">特卖</li> <li class="" οnclick="temp(1);$(this).addClass('cur');">用品</li> <li class="" οnclick="temp(2);$(this).addClass('cur');">玩具</li> <li class="" οnclick="temp(3);$(this).addClass('cur');">居家</li> <li class="" οnclick="temp(4);$(this).addClass('cur');">食品</li> </ul> </div> <div class="main" id="temp"> //需要替换的Div <div class="promotion"> <div class="flashBuy"> <div class="box" οnclick="window.location='teBuyList.html'"> <h3>限时秒杀</h3> <p>多梅西宽口PP奶瓶</p> <div class="price"> <h1><b>¥</b>88.8</h1> <p>抢购中</p> </div> <div class="showTime"><span>距离结束</span><input type="text" id="time_h">:<input type="text" id="time_m">:<input type="text" id="time_s"></div> <img src="../images/tebuy/ms.png" alt="" /> </div> </div> <div class="marketing"> <div class="w50" οnclick="window.location='teBuyListTwo.html'"> <div class="box btLine"> <h3 style="color:#f18c1a</