jQuery插件之jquery editable plugin--点击编辑文字插件
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
jQuery插件之jquery editable plugin--点击编辑文字插件的更多相关文章
- Jeditable 点击编辑文字插件
Jeditable - jQuery就地编辑插件使用 jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件.(注: 就地编辑,也有称 ...
- 关于div文字点击编辑的插件
(function(w,i){ w.inputOut = new i(); })( window, function(){ var inputOut = function(){ this.into = ...
- (转)jQuery Validation Plugin客户端表单证验插件
jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...
- Eclipse安装插件支持jQuery智能提示
Eclipse安装插件支持jQuery智能提示 最近工作中用到jQuery插件,需要安装eclipse插件才能支持jQuery智能提示,在网上搜索了一下,常用的有三个插件支持jQuery的智能提示:1 ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jQuery时间轴插件:jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用 ...
- mydate97时间插件集成jquery插件
1.初始化JS: //把mydate97时间插件集成jquery插件 (function ($) { $.fn.mydatePicker = function (options) { return t ...
- 如何使用jQuery写一个jQuery插件
jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...
随机推荐
- 为什么在我眼里你是一只傻逼——傻逼“常所用”句型之(2)——“当当网的就有XXX人评论,YYY%的推荐”
A:这东西里面尽是大粪. B:这东西当当网的就有325人评论,98.8%的推荐.京东的整体评论是五星,37人评价,31人给好评,1人差评,5人中评:亚马逊有6条好评,1条中评. http://news ...
- C语言初学者代码中的常见错误与瑕疵(4)
问题 小学生数学 很多小学生在学习加法时,发现“进位”特别容易出错.你的任务是计算两个数在相加时需要多少次进位.你编制的程序应当可以连续处理多组数据,直到读到两个0(这是输入结束标记). 样例: 输入 ...
- Couchbase
Couchbase介绍,更好的Cache系统 在移动互联网时代,我们面对的是更多的客户端,更低的请求延迟,这当然需要对数据做大量的 Cache 以提高读写速度. 术语 节点:指集群里的一台服务器. 现 ...
- s3c2440 lcd 显示图片裸机程序
因为前面的裸机程序非常的简单,就不写博了. 程序的流程: 1,初始化C SP 2,关看门狗 3,初始化SDRAM 4,读出 NAND FLASH 中的 包含图片的程式放到SDRAM里面 5,跳转到SD ...
- php用jquery-ajax上传多张图片限制图片大小
php用jquery-ajax上传多张图片限制图片大小 /** * 上传图片,默认大小限制为3M * @param String $fileInputName * @param number $siz ...
- Backup: Flow Control in Perl6
Control Flow 注意空格,注意空格,注意空格 和 Perl5不同的是,这些结构都可以返回值,而且即使倒置结构也可以用 block 了 block 可以有逗号 with without orw ...
- WEB前端常用网站收集
WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap 官网 h ...
- ASP.NET MVC3 Dynamically added form fields model binding
Adding new Item to a list of items, inline is a very nice feature you can provide to your user. Thi ...
- 使用ResourceBundle访问资源文件(properties)帮助类
import java.util.ResourceBundle; /** * 读取properties文件的帮助类 * @author */ public class PropertiesUtil { ...
- YTU 3001: 判断操作是否合法(栈和队列)
3001: 判断操作是否合法(栈和队列) 时间限制: 1 Sec 内存限制: 128 MB 提交: 4 解决: 2 题目描述 假设以I和O分别表示进栈和出栈操作,栈的初态和终态均为空,进栈和出栈的 ...