x-editable使用小结——用于网页文本即时编辑

1.介绍

x-editable用于即时编辑网页文本，界面美观，非常好用。

x-editable官网：http://vitalets.github.io/x-editable/

x-editable学习推荐网站：http://www.cnblogs.com/landeanfen/p/5821192.html

使用x-editable首先需要在官网下载js和css。

其样式如下：

2.使用小结

需要bootstrap-editable.css和bootstrap-editable.min.js，好像依赖jquery和bootstrap。

html如下：

superuser

js如下：

$(document).ready(function() {
    $('#username').editable();
});

设置文本框中的值：

$("#username").editable('setValue', value)

清空文本框中的值：

$("#username").editable('setValue', null).removeClass('editable-unsaved');

获取文本框中的值：

var username = $("#username").editable('getValue', true);

发送请求即时改变文本值：

$('#username').editable({
			type : 'text',
			placeholder: '请输入用户名',
			url : function(params) {
				return $.post(...);
			},
			validate : function(value) {
				if (value == '') {
					return '不能为空';
				}
			}
		});

通过params.value可以拿到文本框中的值。