作者TonyQ (沉默是金)
看板Ajax
标题Re: [问题] jquery - thiekbox
时间Sat Jul 4 11:55:33 2009
※ 引述《sdallan ()》之铭言:
: 其实我也不是很明白,在这边问是否适切XD
: a.php 中一个超链结 按下後开启 plugin thickbox
: 在box中把条件选一选,按下submit 後 再送值回去给a.php
: 然後a.php 显示结果。 以上是理想状态
: 现在遇到的问题是,
: box中按下submit 送值给 a.php 是成功了,
: 不过,a.php的结果画面出现在 thickbox 中。
这个问题其实不只有一种解 , 应该说每种解都可以 , 端看流程设计而已.
要先了解的是 thickbox 有两种主要模式 , 在显示上没有很明显的不同 ,
但是运作流程却有些微不同 .也因此适用环境、能选用的取舍条件也不同.
a.ajax mode .
在使用者要求开启子页面时 ,
对子页面url 发 ajax request 取得子页面 body,
并在主页面上建立能容纳并显示子页面内容的 dom 物件 ,
关闭时是采用隐藏(或删除)刚建立的 dom物件的方式进行
基本上采用这项设定 ,
最大的差异在子页面载入後是主页的一部分
子页是视为主页的一个附属元件. 你不太容易只改变子页的内容 ,
或者只将子页区域做刷新(refresh)/送出(submit)动作.
(通常就是要手工撰写重作一次ajax的流程 )
但是也因为同一页面的关系 , 如果有需要透过子页面的动作,
来改变、影响父页面的页面元素 , 用ajax mode是比较理想的.
可以在同一个dom tree , 不需要透过 parent 来作多层调用.
还有一个不常出现的缺点 , 因为是同一个页面 ,
所以主页面跟子页面有时候会有 css冲突、重复载入script的状况.
这些是你要依据你选择的模式不同去进行的微调 ,
当然大部分状况下是不见得会碰到这些状况 ,
端看你的设计方法.
b.iframe mode
在使用者要求开启子页面时 ,
建立一 iframe 并设定其 url 为欲显示的子页面 .
刚刚描述 ajax 模式的反过来说就是 iframe 的 ,
基本上相对於 ajax mode , 他就是有主页面跟子页面两个区块 ,
你可以只针对子页面来进行submit 或 refresh 而不影响主页面 ,
对於子页面区块是功能独立或者需要特别具有时效性的页面 ,
是很适合用 iframe mode 的.
缺点就是当你想要比方说送出後让主页转向或修改主页的内容 ,
需要透过 parent 来取得主页来作处理, 流程上会稍微繁复一点.
(但对dom 操作得熟一点这就不是问题.)
────────────────────────────────
两种模式选择的不同 , 通常会影响你在设计接受 ajax 调用的 html 内容.
就我过去经验 , 会使用到 thickbox 的状况大概可以分成以下几种,
我也分别会建议采用一些不同的对策:
1.在子页面操作後主页切换
以登入( Login ) 为例 , 按下去之後跳出登入子页面 ,
如果登入失败或者取消登入 , 就取消 thickbox效果回到原页面 ,
如果登入成功就将原本主页面跳往登入後的页面.
以这种情形而言 , 我个人是认为 ajax mode 比较适合使用 ,
因为这种情形的操作流程主要还是在於主页 , 子页只是附属.
2.子页面的行为是独立区块
以"要删除一项资讯"为例 ,
我可能会需要列出可能影响到的范围 , 请使用者确认 ,
在使用者进行确认送出後 , 在子页面单独显示删除完成的讯息 .
在这种状况下就适合采用 iframe mode , 因为流程的进行主要在子页面.
3.子页面的行为具有时效性
以"浏览即时统计资料" 为例 , 因为该资讯可能会需要一直刷新 ,
我们又不希望更新时更新整个主页 , 只想针对子页来进行更新 ,
这时我们会采用 iframe mode.
当然采用ajax mode , 并在其中撰写定期 ajax 的code也是可行的 ,
只是相较之下 iframe mode 撰写定期 refresh 相对容易.
当然也还有一些其他的状况 , 要怎麽设计 , 其实是 case by case 的 .
就算因为某些其他的理由必须选择其中一种 mode ,
但要达成那个mode 所有的缺陷 , 除了部份 iframe 本身所无法改变的问题外 ,
几乎都可以透过撰写额外的script 来达成目标 .
单看原问题所给的资讯 , 显然是透过 iframe mode 来进行设计 ,
这时候可选择改成 ajax mode (也有可能需要跟着修改对应response page) ,
也可以继续沿用 iframe mode , 但是在送出完成後的页面的 onload 中 ,
下 parent.window.location ='某特定网址'. 来改变主页的连结 .
这个中巧妙 , 可以按照自己需要来进行撰写 ,
我个人是认为先以能达成最低要求为主 ,
再了解相关资讯来了解其他处理问题的方法罗.
--
What do you want to have ? / What do you have?
从书本中,你可以发现我的各种兴趣。
从CD中,你可以了解我所喜欢的偶像明星。
或许从文字你很难以了解一个人,但从物品可以。
My PPolis , My past. http://ppolis.tw/user/Tony
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 59.105.101.26
1F:推 kewang:大推这篇!!! 07/04 13:17
2F:→ TonyQ:补充一下 , 所谓ajax mode跟iframe mode 指的是 07/04 13:58
4F:→ TonyQ:content , 至於inline content算是偏ajax content. 07/04 14:01
5F:→ TonyQ:剩下的single image/gallery 适用范围小,不另讨论. 07/04 14:01
6F:推 chrisQQ:这人放假很闲~~ 07/04 17:03
7F:推 kewang:XDDDDD 07/04 20:12