jquery EditInPlace插件之(Jeditable)
先来看下效果：http://www.appelsiini.net/projects/jeditable/default.html
http://www.appelsiini.net/projects/jeditable/custom.html
官方网站：
http://www.appelsiini.net/projects/jeditable
使用方法：
先定义XHTML元素，如：<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>当我们调用Jeditable插件的时候，必须有一个参数即 将内容提交到服务器的那个网址， $(document).ready(function() {
$('.edit').editable('http://www.example.com/save.php');
});以上代码实现了几个事件：edit元素 通过鼠标单击可以形成一个可编辑的input元素，他的长度和宽度，都取决于它的父元素。 如果用户点击页面的其他地方,那么edit元素将会还原．当然如果用户安esc操作，效果也是一样的，如果用户安enter(回车)键form将会被提交。
更有趣的是：我们可以为等待返回的时候加入文字提示和图片提示$(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'
});
});当我们点击提交时，发送了些什么呢，数据格式如下：
elementid=elements_id&newvalue=user_edited_content
有些情况下我们不想用默认的参数名称，想自己定义参数名称 如下面形式
elementid=elements_id&newvalue=user_edited_content
那我们在js里面需要加两个参数 如:$(document).ready(function() {
$('.edit').editable
('http://www.cnjquery.com/demo/Jeditable/save.php', {
id : 'elementid',
name : 'newvalue'
});
});看看支持的其它小部件：$(document).ready(function() {
$(".charcounter").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
indicator : "<img src='img/indicator.gif'>",
type : "charcounter",
submit : 'OK',
tooltip : "Click to edit",
onblur : "ignore",
charcounter : {
characters : 60
}
});
$(".autogrow").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
indicator : "<img src='img/indicator.gif'>",
type : "autogrow",
submit : 'OK',
tooltip : "Click to edit",
onblur : "ignore",
autogrow : {
lineHeight : 16,
minHeight: 32
}
});
$(".masked").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
indicator : "<img src='img/indicator.gif'>",
type : "masked",
mask : "99/99/9999",
submit : 'OK',
tooltip : "Click to edit"
});
$(".datepicker").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
indicator : "<img src='img/indicator.gif'>",
type : 'datepicker',
tooltip : "Click to edit"
});
$(".timepicker").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
indicator : "<img src='img/indicator.gif'>",
type : 'timepicker',
submit : 'OK',
tooltip : "Click to edit"
});
$(".time").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
indicator : "<img src='img/indicator.gif'>",
type : 'time',
submit : 'OK',
tooltip : "Click to edit"
});
$(".ajaxupload").editable("http://www.appelsiini.net/projects/jeditable/php/upload.php", {
indicator : "<img src='img/indicator.gif'>",
type : 'ajaxupload',
submit : 'Upload',
cancel : 'Cancel',
tooltip : "Click to upload"
});from:http://go.cxweb.com.cn/zh-8h
页:
[1]