Jeditable - jQuery就地编辑插件的使用
来源:互联网 发布:淘宝lolita鞋子 编辑:程序博客网 时间:2024/05/22 05:40
jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件。(注: 就地编辑,也有称即时编辑?一般的流程是这样的,当用户点击网页上的文字时,该文字就会出现在一个编辑框中,用户对文字进行修改完成后点击提交按钮,新的文本将发送到服务器上,然后表单消失,显示最新编辑的文本。),你可以通过这个演示页面来亲自体验下。
官网:http://www.appelsiini.net/projects/jeditable
基本的使用方法如下:
首先编辑一个 html 文件,包含这么一段:
<div class="edit" id="div_1">Dolor</div><div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
然后我们使用如下的 JS 代码来实现即时编辑(要先引入 Jeditable 插件):
$(document).ready(function() { $('.edit').editable('http://www.example.com/save.php');});
实现不同内容的编辑以及更多的定制项:
$(document).ready(function() { $('.edit').editable('http://www.example.com/save.php', { indicator : 'Saving...', tooltip : 'Click to edit...' }); $('.edit_area').editable('http://www.example.com/save.php', { type : 'textarea', cancel : 'Cancel', submit : 'OK', indicator : '<img src="img/indicator.gif">', tooltip : 'Click to edit...' });});
上面的定制项包括按钮的文本,提示信息以及提交时的 loading 图片显示等等。
那么当用户点击了确定按钮时,发送到服务器上的是什么数据呢?
数据内容包含了编辑框的 ID 以及新的内容:id=elements_id&value=user_edited_content
你也可以使用下面的方法来修改默认的参数名:
$(document).ready(function() { $('.edit').editable('http://www.example.com/save.php', { id : 'elementid', name : 'newvalue' });});
修改后传递的数据变成:elementid=elements_id&newvalue=user_edited_content
如果单行文本框不注意满足你的要求,可以使用 textarea 多行文本编辑框:
$(document).ready(function() { $('.edit_area').editable('http://www.example.com/save.php', { loadurl : 'http://www.example.com/load.php', type : 'textarea', submit : 'OK' });});
另外 Jeditable 还支持下拉选择框哦:
$('.editable').editable('http://www.example.com/save.php', { data : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}", type : 'select', submit : 'OK'});
或者你也可以从服务器获取下拉选择的数据内容:
<?php /* http://www.example.com/json.php */ $array['E'] = 'Letter E'; $array['F'] = 'Letter F'; $array['G'] = 'Letter G'; $array['selected'] = 'F'; print json_encode($array);?>
然后通过 loadurl 指定这个服务器输出数据的 URL 地址:
$('.editable').editable('http://www.example.com/save.php', { loadurl : 'http://www.example.com/json.php', type : 'select', submit : 'OK'});
如果你希望给组件设定不同的样式,可以这样:
$('.editable').editable('http://www.example.com/save.php', { cssclass : 'someclass'});$('.editable').editable('http://www.example.com/save.php', { loadurl : 'http://www.example.com/json.php', type : 'select', submit : 'OK', style : 'display: inline'});
或者:
$('.editable').editable('http://www.example.com/save.php', { loadurl : 'http://www.example.com/json.php', type : 'select', submit : 'OK', style : 'inherit'});
最后来点高级的内容,如果你希望使用一个 JS 函数而不是 URL 来处理提交,可以这样:
$('.editable').editable(function(value, settings) { console.log(this); console.log(value); console.log(settings); return(value); }, { type : 'textarea', submit : 'OK',});
处理回调:
$('.editable').editable('http://www.example.com/save.php', { type : 'textarea', submit : 'OK', callback : function(value, settings) { console.log(this); console.log(value); console.log(settings); }});
使用附加参数:
$(".editable").editable("http://www.example.com/save.php";, { submitdata : {foo: "bar"};});
直接从URL获取显示内容:
$(".editable").editable("http://www.example.com/save.php";, { loadurl : "http://www.example.com/load.php"});
英文原文:http://www.appelsiini.net/projects/jeditable
- Jeditable - jQuery就地编辑插件的使用
- Jeditable 即时编辑 Jquery 插件用法 (.Net)
- jQuery的Jeditable插件使用web Service回传数据
- jEditable jQuery技术使用
- 创建完美的表DataTable和Jeditable的jQuery插件
- 可编辑的表格:jQuery+PHP+jeditable实现实时编辑表格字段内容
- jQuery - plugins插件 - Jeditable原位置编辑器插件
- 在线编辑插件的使用
- 可编辑的jquery表格插件
- 可编辑的jquery表格插件
- jquery编辑插件
- jquery插件【编辑表格】
- jquery 插件编辑
- jquery 点即可编辑插件
- 实现类Excel表格编辑功能的jQuery插件:Handsontable
- jquery fckediter插件的使用
- jquery 验证插件的使用
- jquery 验证插件的使用
- 《跨界杂谈》企业商业模式(七):其他
- 单元测试注意事项总结
- list 对象排重
- Selenium Webdriver firefox 浏览器问题
- hdu 1997 汉诺塔VII(递归)
- Jeditable - jQuery就地编辑插件的使用
- 两道练习题
- JS 调用函数时有括号跟没括号的区别
- Codeforces Round #297 (Div. 2) -- D. Arthur and Walls (判断矩形)
- 设计模式-适配器模式(adapter pattern)
- iOS入门
- html表格标签
- 红桃3
- (window,parent,opener,top).location.reload方法汇总