可即时编辑插件x-editable 

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

posted @ 2015-11-13 17:21  山档子  阅读(596)  评论(0)  编辑  收藏  举报