码迷,mamicode.com
首页 > 其他好文 > 详细

可即时编辑插件x-editable

时间:2015-11-13 18:36:02      阅读:1038      评论:0      收藏:0      [点我收藏+]

标签:

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

可即时编辑插件x-editable

标签:

原文地址:http://www.cnblogs.com/mailan/p/4962726.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!