<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>User Profile Page - Ace Admin</title>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="../assets/css/font-awesome.min.css" />
<!-- ace styles -->
<link rel="stylesheet" href="../assets/css/ace.min.css" id="main-ace-style" />
<!-- page specific plugin styles -->
<link rel="stylesheet" href="../assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet" href="../assets/css/jquery.gritter.css" />
<link rel="stylesheet" href="../assets/css/select2.css" />
<link rel="stylesheet" href="../assets/css/datepicker.css" />
<link rel="stylesheet" href="../assets/css/bootstrap-editable.css" />
</head>
<body class="no-skin">
<!-- /section:basics/sidebar -->
<div class="main-content">
<div class="profile-info-name"> Username </div>
<!--可编辑内容-->
<div >
<span class="editable" id="username">alexdoe</span>
</div>
<!--/可编辑内容-->
</div><!-- /.main-content -->
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='../assets/js/jquery.min.js'>"+"<"+"/script>");
</script>
<!-- <![endif]-->
<script src="../assets/js/x-editable/bootstrap-editable.min.js"></script>
<script src="../assets/js/x-editable/ace-editable.min.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
jQuery(function($) {
//editables on first profile page
$.fn.editable.defaults.mode = 'inline';
$.fn.editableform.loading = "<div class='editableform-loading'><i class='ace-icon fa fa-spinner fa-spin fa-2x light-blue'></i></div>";
$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="ace-icon fa fa-check"></i></button>'+
'<button type="button" class="btn editable-cancel"><i class="ace-icon fa fa-times"></i></button>';
//editables
//text editable
$('#username')
.editable({
type: 'text',
name: 'username'
});
});
</script>
</body>
</html>
注意：上面的jquery代码放在html页面，并且要可编辑的内容尽量放在本页html上，或一次就可load进来。