大家好,最近遇见一个麻烦的问题。
我正在建设一个产品展示的网站。需要一个这样的效果。
主页面有许多产品的目录表,点击每一个目录条后,提交该目录条的名字,到一个JQUERY弹出页面里,进行数据库查询,竖列出该目录的所有产品。
该JQUERY弹出页面的结构如图所示。下面是一个搜索分页。十条一显示,只显示每个产品的名字。上面是一个单产品的详细内容展示,有点像JQUERY画廊。JQUERY弹出页面另有一个搜索框。可以方便游客查询其他产品,查询结果的显示结构如上。
现在我需要的是,在JQUERY弹出页面里做任何的搜索和翻页动作,主页面不刷新。找了许久,终于找到了一个类似效果的网站。MSN的,可供大家参考。http://powerwall.msnbc.msn.com大家可以打开尝试一下。它的主页面是照片(而我的是文字,应该差不多),点击任意一张照片,打开一个弹出页面,在弹出页面里进行翻页,主页面不刷新。(它可能是静态页面。而我提交给了数据库)它上面还有一个BING的搜索框,任意搜索后,显示的结果排列在弹出页面上,主页面始终不刷新(这一步大家都调用了数据库)。效果就是这样,本人学识浅陋,参不透它那种#后面还可以传递变量值的方法。期待哪位高手,能给些简单的代码,可以实现我的需求,谢谢。
我正在建设一个产品展示的网站。需要一个这样的效果。
主页面有许多产品的目录表,点击每一个目录条后,提交该目录条的名字,到一个JQUERY弹出页面里,进行数据库查询,竖列出该目录的所有产品。
该JQUERY弹出页面的结构如图所示。下面是一个搜索分页。十条一显示,只显示每个产品的名字。上面是一个单产品的详细内容展示,有点像JQUERY画廊。JQUERY弹出页面另有一个搜索框。可以方便游客查询其他产品,查询结果的显示结构如上。
现在我需要的是,在JQUERY弹出页面里做任何的搜索和翻页动作,主页面不刷新。找了许久,终于找到了一个类似效果的网站。MSN的,可供大家参考。http://powerwall.msnbc.msn.com大家可以打开尝试一下。它的主页面是照片(而我的是文字,应该差不多),点击任意一张照片,打开一个弹出页面,在弹出页面里进行翻页,主页面不刷新。(它可能是静态页面。而我提交给了数据库)它上面还有一个BING的搜索框,任意搜索后,显示的结果排列在弹出页面上,主页面始终不刷新(这一步大家都调用了数据库)。效果就是这样,本人学识浅陋,参不透它那种#后面还可以传递变量值的方法。期待哪位高手,能给些简单的代码,可以实现我的需求,谢谢。
首先你在弹出层里边建立一个div代码如下
<div id='box'></div>
这个div的目的是用来放置详细信息的
弹出层下侧的分页代码这需要你第一次打开弹出层的时候使用ajax计算出来,共有多少页,然后把翻页编号放上就好了
当你点击第二页的时候首先要把div内的内容清理掉,同时显示一个loading图片
此时ajax读取服务器第二页应该现实的资料,读取完成之后返回客户端,使用innerHTML或jquery的append等把新读取来的内容放入div内就好了//js代码
document.getElementById('box').innerHTML='';
document.getElementById('box').innerHTML='新读取来的内容';//jquery代码
$('#box').empty().append('新读取来的内容');
那如果在弹出的页面上,再进行搜索,分页呢?hnxxwyq,colorbox有类似的效果,不过它那个IFRAME的大小是固定死的,我不在搜索结果后,右侧有一根丑陋的拖动条。谢谢你们。
第一个链接,是它原始的搜索页面,搜索如何关键字,都会重新刷新载入页面,典型的URL传输数据。
http://powerwall.msnbc.msn.com/politics/search?searchTerm=usa第二个链接,弹出页面嵌入在DIV层里面(绝对不是IFRAME,大家可以看源码),该弹出页就是第一个页面。两个URL用一个#(锚点)链接,后半部搜索依旧靠URL传输数据,但是锚点是永远不需要刷新页面的。
http://powerwall.msnbc.msn.com/#!wallState=0__/politics/search?searchTerm=usa这个技术我还是第一次看到(我设计我的网站时,还没想那么多,只是想结合JQUERY弹出页,JQUERY画廊什么的),即使怀疑URL只是通过JS或其他规则重写的……CSDN已经算国内最顶级的技术论坛了,可是大家和我一样也只能看到,想到些常规的技术(虽然我学的晚,技术还不如大家)看样子我们中国人是做不出它那种效果了。全世界互联网最顶级的技术,还是要推崇米国……失落……我的设想太超前了,我要的效果,问不到可以实际解决的答案。全世界现今只有一家类似,只有技术先祖微软做到了。看样子要改版了。这个问题,留着大家继续讨论吧。讨论微软的技术,讨论国人技术和世界技术的差距。
过几天散分。
你可以考虑对那个弹出窗口(应该是用div做的吧),在这个div中,你可以用iframe来实现,当然这里面可以嵌入页面。如果是一个页面的话,你就可以在这个页面里面做任何动作了
如果要靠ajax实现,那你就要js来做很多工作,用页面的话,相信你已经有相关的分页组件了
给你个思路不知道能不能解决问题