云南网站建设创新企业 昆明多彩网络公司

在线qq:540105663

翻译了一个jquery插件:就地编辑插件jeditable

来源:昆明多彩网络公司 日期:2010-02-05 阅读: 发表评论

jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件。

由多彩原创翻译的jeditable插件文档,转载请注明出自:www.kmwzjs.com

基本用法:再head中插入
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jeditable.mini.js"></script>

<div class="edit" id="div_1">Dolor</div>
<div class="edit_area" id="div_2">test文字</div>

只有一个强制参数,发送内容的后台地址

 $(document).ready(function() {
             $('.edit').editable('http://www.example.com/save.php');
       });
自动匹配被编辑元素的宽高,当提交的时候,就提交到save.php
类edit_area可以做为textarea输入框. 还可以设置编辑后等待时文字信息或图像,编辑前悬停提示框,设置确定或者取消。

 $(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...'
     });
 });
继续...

发送到服务器的内容?
当提交并且发送以下格式的信息给服务器:ID=HTML中的ID号,vause=输入框的内容。

id=elements_id&value=user_edited_content有个时候,如果需要改变参数名称,比如像下面的格式:

elementid=elements_id&newvalue=user_edited_content那么可以添加2个参数

 $(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php', {
         id   : 'elementid',
         name : 'newvalue'
     });
 });
 
加载外部到内容编辑框
设置loadurl参数,示例:

 $(document).ready(function() {
     $('.edit_area').editable('http://www.example.com/save.php', {
         loadurl  : 'http://www.example.com/load.php',
         type    : 'textarea',
         submit  : 'OK'
     });
 });
load.php文件应该返回纯文本的内容,而不XHML,因为要显示在输入框中,而save.php则应该返回XHTML内容,另外还有一个选择就是标记数据源参数。

怎么使用SELECT?
可以使用JSON数组,这个数组通过data参数来设置,可以考虑通过loadur来返回,数组关联名称是<option>标签的name,数组的值则是<option>之间的值

JSON 数组如以下格式:

{'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}注意最后一个选择,当使用 'select'为名称时,后面跟着默认选中的name,示例:

 $('.editable').editable('http://www.example.com/save.php', {
     data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
     type   : 'select',
     submit : 'OK'
 });
也可以通过loadurl外部加载动态的JSON数据:

脚本示范:

 <?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加载:

 $('.editable').editable('http://www.example.com/save.php', {
     loadurl : 'http://www.example.com/json.php',
     type   : 'select',
     submit : 'OK'
 });
如果担心消耗服务器资源,可以直接在javascript脚本中设定,如:

 <?php
 $array['E'] =  'Letter E';
 $array['F'] =  'Letter F';
 $array['G'] =  'Letter G';
 $array['selected'] =  'F';
 ?>
 $('.editable').editable('http://www.example.com/save.php', {
     data   : '<?php print  json_encode($array); ?>',
     type   : 'select',
     submit : 'OK'
 });
如何修饰样式
可以设置输入框的class名称和样式参数,首先,在css中定义css名称,然后设置cssclass参数,第二,可以直接设置css样式参数。如:

 $('.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'
 });
2个方式都可以设置inherit属性,如果不设置inherit就不会继承父属性,如:

 Lorem <span class="editable" style="display: inline">ipsum</span> dolor
 sit amet.
 $('.editable').editable('http://www.example.com/save.php', {
     loadurl : 'http://www.example.com/json.php',
     type    : 'select',
     submit  : 'OK',
     style   : 'inherit'
 });
 
用提交函数的方式代替URL $('.editable').editable(function(value, settings) {
     console.log(this);
     console.log(value);
     console.log(settings);
     return(value);
  }, {
     type    : 'textarea',
     submit  : 'OK',
 });
注意函数必须返回字符串,

Note that function must return string. Usually the edited content. This will be displayed on page after editing is done.

参数参考
(String) method: 提交方法默认为 POST. 最有可能使用Post和Input

(Function) callback: 当提交之后调用的函数,有2个参数(value, settings),Value包括了From的内容,Settings包含了所有插件设置,原来的元素的内部函数。

 $('.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);
     }
 });
(String) name: 设置提交参数的名称,默认是value。

 $('.editable').editable('http://www.example.com/save.php', {
     name     : 'new_value'
 });
(String) id: 设置提交的输入框的ID号. 默认是 id.

 $('.editable').editable('http://www.example.com/save.php', {
     id     : 'element_id'
 });
(Mixed) submitdata: 表单提交时额外的参数,可以是哈西,或者哈书返回的哈西。

$(".editable").editable("http://www.example.com/save.php";, {
   submitdata : {foo: "bar"};
});
$(".editable").editable("http://www.example.com/save.php";, {
   submitdata : function(value, settings) {
       return {foo: "bar"};
   }
});
(String) type: 输入型类型,text, textarea or select. 自己定义的输入类型的API.

(Integer) rows: 使用textarea时定义行数.

(Integer) cols: 使用textarea时定义列数.

(Integer) height: 定义输入框的高度,单位是像素(px),默认是 auto. 意思是自动计算. 也可以设置为 none.

(Integer) width: 定义输入框的宽度,单位是像素(px),默认是 auto. 意思是自动计算. 也可以设置为 none.

(Integer) loadurl: 加载外部数据到输入框中,可以是普通字符串,也是JSON

$(".editable").editable("http://www.example.com/save.php";, {
    loadurl : "http://www.example.com/load.php"
});
注意编辑元素的ID会自动添加到查询字符串,如:

http://www.example.com/load.php?id=element_id
(Integer) loadtype: 使用loadurl时的请求类型. 默认是GET. 可能用的只是GET和 POST之一.

(Mixed) loaddata: 使用loadurl的时候额外的请求参数,可以是一个哈希或函数返回一个哈希。

$(".editable").editable("http://www.example.com/save.php";, {
   loaddata : {foo: "bar"};
});
$(".editable").editable("http://www.example.com/save.php";, {
   loaddata : function(value, settings) {
       return {foo: "bar"};
   }
});
(Mixed) data:

可以是一个字符串或者函数返回的函数. 设置成编辑框的内容。

$(".editable").editable("http://www.example.com/save.php";, {
   data : "Lorem ipsum";
});
$(".editable").editable("http://www.example.com/save.php";, {
    data: function(value, settings) {
      /* Convert <br> to newline. */
      var retval = value.replace(/<br[\s\/]?>/gi, '\n');
      return retval;
    }
});
默认如果点击了编辑框之外就是取消编辑了,也可以设置 onblur 选项,以下选项

•onblur : cancel 点击编辑框之外的区域取消修改,点击submit按钮就提交修改。
•onblur : submit 点击编辑框之外的区域提交修改
•onblur : ignore 忽略编辑框外部的点击和按ESC键,点击submit按钮就提交修改。
可以使用事件响应,所有的Jquery时间都支持,一般使用 click 和 dbclick,单击和双击,还有 mouseover,鼠标感应。

官方地址:http://www.appelsiini.net/projects/jeditable

更多该作者插件:http://www.appelsiini.net/projects
 
.

发表评论评论列表(有 条评论)