x-editable教程

来源：互联网发布：unity3d开发编辑：程序博客网时间：2024/05/29 18:44

http://www.cnblogs.com/landeanfen/p/5821192.html

http://vitalets.github.io/x-editable/docs.html#editable

http://vitalets.github.io/x-editable/demo-bs3.html?c=popup

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="bootstrap_table/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap_table/css/bootstrap-table.min.css">
<link rel="stylesheet" href="bootstrap_table/css/bootstrap-editable.css">

<script src="bootstrap_table/js/jquery.min.js"></script>
<script src="bootstrap_table/js/bootstrap.min.js"></script>
<script src="bootstrap_table/js/bootstrap-table.min.js"></script>
<script src="bootstrap_table/js/bootstrap-editable.js"></script>
<script src="bootstrap_table/js/bootstrap-table-editable.js"></script>


<meta charset="UTF-8">
<title></title>
<style>
.test {
background-color: red;
width: 50px;
height: 20px;
}
#test {
background-color: red;
width: 20px;
height: 20px;
}
</style>
</head>

<body>
<div>
<button type="button" class="btn btn-default" id="btn-action">按钮</button>
</div>
<table id="table">
</table>
<a href="#" id="username">用户名</a>
<input type="text" value="test" class="test"/>
</body>
<script>

$(function() {
$('#username').editable({
type: "text", //编辑框的类型。支持text|textarea|select|date|checklist等
// title: "用户名", //编辑框的标题
disabled: false, //是否禁用编辑
emptytext: "空文本", //空值的默认文本
mode: "inline", //编辑框的模式：支持popup和inline两种模式，默认是popup
placement:'bottom',
validate: function(value) { //字段验证
if(!$.trim(value)) {
return '不能为空';
}
}
});
});
</script>

</html>

阅读全文

0 0