<!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进来。