[原创] 即时编辑 html JQuery 库 - Jeditable_jquery.jeditable.js-优快云博客

本文链接：https://blog.youkuaiyun.com/u012731379/article/details/79710769

官网地址: https://appelsiini.net/projects/jeditable/
Github 地址: https://github.com/NicolasCARPi/jquery_jeditable

这是实现的仅仅是修改 HTML 的展示, 所以不需要发请求提交更改.
editable 第一个参数设置为 function 即可替换默认的函数.

示例

<html>
    <head>
        <script type="text/javascript" src="/static/js/jeditable-2.0.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-3.3.7.min.css" />
    </head>
    <body>
        <p class="edit-area">Q: Test question</p>
        <p class="edit-area">A: Test for answer</p>

        <script language="javascript">
            $(document).ready(function() {
                $(".edit-area").editable(function(input, settings, elem) {
                    console.info("Changed Value: ", input)
                    // WARNING: $(elm).data 必须调用, 否则元素只能编辑一次
                    console.info($(elem).data('_'));
                    $(this).html(input);
                }, {
                    // submit: 'OK', // 设置后会显示确认按钮
                    // cancel: "Cancel", // 设置后会显示取消按钮
                    event: "dblclick", // 默认为 click, 这里修改为双击进入编辑模式
                    cssclass: "bs-example bs-example-form", // css class name, 编辑模式会生成 form, 这里使用的 bootstrap 的一个表单样式
                    select: false, // 是否默认全选
                    onblur: "submit", // 鼠标失去光标的操作. submit 保留更改. cancel 会取消标记. 默认为 calcel.
                    type: "textarea", // input 类型
                    style: 'color: blue' // 设置样式, 会覆盖 cssclass 中的设置
                });
            };
        </script>
    </body>
</html>