Jeditable 点击编辑文字插件
Jeditable - jQuery就地编辑插件使用
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插件之jquery editable plugin--点击编辑文字插件
jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件.(注: 就地编辑,也有称即时编辑?一般的流程是这样的,当用户点击网页上的文字时,该 ...
- 关于div文字点击编辑的插件
(function(w,i){ w.inputOut = new i(); })( window, function(){ var inputOut = function(){ this.into = ...
- 【C#/WPF】TextBlock/TextBox/Label编辑文字的问题
标题有点描述不清,就当是为了方便自己用时易于搜索到. 总之需求是:显示用户信息(文字)时,允许用户编辑自己的信息. 效果图如下: 点击[编辑]按钮前: 点击[编辑]按钮后,允许编辑: 别吐槽为甚性别还 ...
- 点击复制文字到剪贴板兼容性安卓ios
一般那种活动H5分享可能会用到点击复制文字到剪贴板,很简单的功能 于是搜了一搜:js复制文字到剪贴板,可用结果大致分为两类: 一类是js原生方法,这种方法兼容性不好,不兼容ios: https://d ...
- 鼠标点击输入框文字消失 value placeholder 以及JQ实现效果 (仿京东的输入框效果)
鼠标点击输入框文字消失 value实现方法 placeholder实现方法 以及JQ实现placeholder效果 <input type="text" value ...
- 点击按钮文字变成input框,点击保存变成文字
<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content ...
- jquery - 通过点击切换文字内容
今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...
- ASP.NET - GridView实现点击编辑列
加载: 点击编辑: 数据库设计: 前端代码: DataKeyNames="ID" 设置点击“编辑”选项的时候,要获取的值,一般获取ID主键,便于修改数据. AutoGenerat ...
- SpannableString可以被点击的文字
1 TextView tv= (TextView) findViewById(R.id.textview_z); String text="一段可以被点击点击的文字,文字可以变成图片&quo ...
随机推荐
- MySQL命令行数据操作使用心得(总结版)
Char 0~255 Varchar 0~65535 text 0~65535(只能保存字符) Longtext 0~4294967295(只能保存字符) CMD登陆mysql mysql -u ro ...
- ecshop 浏览历史样式的修改
ecshop的浏览历史的样式,例如我修改的是只让浏览历史显示浏览历史的商品名称 而不显示浏览历史的商品的价格和图片 首先找到要修改 的文件includes\lib_insert.php 找到函数fun ...
- 用C++语言开发Android程序 配置开发环境
转自:http://www.cnblogs.com/yaotong/p/3622430.html 用C++语言开发Android程序 配置开发环境 如果你是一个C++语言的死忠,你喜欢C++语言到 ...
- Python学习入门基础教程(learning Python)--3.1Python的if分支语句
本节研究一下if分支语句. if分支语句是Python下逻辑条件控制语句,用于条件执行某些语句的控制操作,当if后的条件conditon满足时,if其下的语句块被执行,但当if的控制条件condito ...
- 编辑简单的 shell程序
编辑简单的 shell程序 知道了vi编辑器的使用规则之后,结合shell的使用规则,可以编辑简单的 shell程序试试手 题目如下: 1.用while语句创建一个根据输入的数值求累加和(1+2+3+ ...
- Windows Phone开发(30):图形
原文:Windows Phone开发(30):图形 图形如矩形.椭圆.路径等都从Shape类派生,它们一般表示规则或不规则图形,这些图形都是简单的二维图形,我相信大家都能理解的. 例一:矩形. 请看下 ...
- AMD宣布裁员7% 约710员工将失去工作
10 月 17 日.美国芯片生产商 AMD 周四宣布将裁员7%.并公布了不及预期的第四季度业绩展望.这将是 AMD 自 2011 年以来的第三轮大裁员. 就在一周之前,AMD 宣布罗瑞德(Rory R ...
- HDU 4982 Goffi and Squary Partition(推理)
HDU 4982 Goffi and Squary Partition 思路:直接从全然平方数往下找,然后推断是否能构造出该全然平方数,假设能够就是yes,假设都不行就是no.注意构造时候的推断,因为 ...
- 为什么android你用的越多,速度较慢的手机
依据第三方的调研数据显示,有 77% 的 Android 手机用户承认自己曾遭遇过手机变慢的影响,百度搜索"Android+ 卡慢",也有超过 460 万条结果. 在业内.Andr ...
- 三白话经典算法系列 Shell排序实现
山是包插入的精髓排序排序,这种方法,也被称为窄增量排序.因为DL.Shell至1959提出命名. 该方法的基本思想是:先将整个待排元素序列切割成若干个子序列(由相隔某个"增量"的元 ...