Edit in Place

wgzhao — Tue, 03 Jan 2006 01:19:36 +0000

AJAX的一个最大特点是可以尽量的减少页面跳转，比如我们可以把浏览和编辑文字内容放到一个页面，先看看下面的这个例子
edit in place

这个例子使用了XAJAX工具，php的Smarty工具。
当然如果仅仅只是为了演示这样的一个功能，你完全可以使用自己简单的使用xmlhttprequest这个类，我这里这样写只是想展示如何利用这些工具来构建这样的页面。

上面的这个例子报行了四个文件:edit.css,edit.tpl,edit.php,edit.js，edit.css是一个简单的改变元素表示行为的css标签；
edit.tpl是简单的一个模板；edit.php简单实现如果保存用户修改的数据，演示代码中没有采用把用户修改的数据保存到数据的做法，只是简单的回应而已；edit.js是实现元素的显示和隐藏，并使用AJAX调用php函数。
下面是这些文件的内容
$cat edit.css
body{
[color=blue]font-family:[color=orange] arial, helvetica, sans-serif
[color=blue]font-size:[color=orange] small
}

[color=green].editable, textarea{
[color=blue]background-color:[color=orange] #ffffd3
}

textarea{
[color=blue]width:[color=orange] 95%
[color=blue]font-size:[color=orange] 100%
}

img[color=green].progress{
[color=blue]vertical-align:[color=orange] middle
[color=blue]padding:[color=orange] 0 10px
}

$cat edit.tpl

{$xajax_javascript}

Linux|系统管理|WEB开发 » xajax

Edit in Place