跑调生活志

Uchome弹出框ajax操作代码

作者：跑调/ 发布时间：June 26, 2011/ 分类：开源路漫漫兮

进公司以来，一直做的Uchome的二次开发（包括一部分全新功能），按照广大人民群众的说法，uchome是一个比较垃圾的代码集合体，另外按照站长们的说法，这个东西还是很成功的。当然，现在的dx系列还是在站长中间非常受欢迎。谨记，地方门户和行业是互联网的大半壁。
说一下uchome的ajax操作示范，会弄这个效果的话，很多交互就可以简简单单的实现了。
uchome ajax常用的效果，就是点击链接或者按钮弹出一个对话框，我一般叫它弹出层，因为弹出的确实是一个层。弹出层上可以有表单，可以有文字，可以进行操作。这里用到的一个常用的js方法就是uchome自带js库里的ajaxmenu()方法。

function ajaxmenu(e, ctrlid, isbox, timeout, func) {}

参数的说明：
* e 事件，一般是click
* ctrlid，e事件发生的对象id，就是click的链接的id，这个必须有，没有就弹不出来。
* isbox, 是否跟随，设置弹出层的位置，这个无关紧要，改成1或者0，自己试一下就出来了。
* 刷新时间，弹出来以后多少时间自动消失。
* func，回调函数，执行完以后的回调方法。
说一下目录结构：
* php逻辑文件在./source/
* htm模版文件在./template/default/

看图：

图中的“我要隐身”点击后会弹出一个层，供用户操作。
链接的内容看一下：

我要隐身

这是一个购买隐身草的弹出层。在firebug中查看一下dom结构。

图中可以看到,在点击链接以后，ajaxmenu在append_parent这个div中添加一段html代码，这段代码是链接的响应内容，链接的id是必需的。
要执行在一个弹出层里的连续提交，有一点是必须注意的。
可以看到，在a_magic_invisible_menu（这里的id就是链接id+menu构造的）,__magicbuy_invisible这个div内部有一个magicbuy_invisible为id的form，这种作法的效果就是为了让magicbuy_invisible提交以后返回的内容呈现在__magicbuy_invisible这个div里。以此为例，点击购买以后，弹出了这样的内容：

这表明提交已经成功，看看返回了什么。

返回的内容还是一个id为magicbuy_invisible的表单。这样就相当于返回了初始的状态，我们就可以继续进行下一步操作了。
漏了一点，关于提交按钮的。提交按钮要用uchome的ajaxpost方法，具体可以查看一下实例代码。
总结：
点击链接返回的是

ajaxpost返回的内容是

标签: uchome / 弹出层 / ajax / ajaxmenu