jquery-ui - 使用 jquery-ui 编辑可排序的可选 li

Question

我想允许编辑可选/可排序列表中的列表项。

这是一个列表示例： http : //jsbin.com/aweyo5 credits to rdworth

所以我会允许用户编辑项目吗？我知道如何更新/更改他们的文本，但我如何让用户直接将文本输入到列表项中？

Answer 1

这是一个有效的答案：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript" src="jeditable.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        function makeEditable()
        {
            $('.editable').editable(function(value, settings)
            { 
                /* Debug

                 console.log(this);
                 console.log(value);
                 console.log(settings);
                */
                return(value);
            });
        }
        function makeDeletable()
        {
            $('a.delete').click(function(e) 
            {
                e.preventDefault();
                $(this).parent().remove();
            });
        }
        function addTopic(topicName)
        {
            $("ul.#topics").append('<li><span class="editable">' + topicName +'</span><a class="delete" href="">delete</a></li>');
            makeEditable();
            makeDeletable();
        }
        makeEditable();
        makeDeletable();

        $( "#topics" ).sortable();
        $("form").submit(function() {
            addTopic($('input[name=topic]').val());
            return false;
        });
        $('a#add').click(function(e)
        {
            e.preventDefault();
            addTopic($('input[name=topic]').val());
        });
    });
</script>

<ul id="topics">
    <li><span class="editable">topic 1</span><a class="delete" href="">delete</a></li>
    <li><span class="editable">topic 2</span><a class="delete" href="">delete</a></li>
    <li><span class="editable">topic 3</span><a class="delete" href="">delete</a></li>
</ul>
<form>
New topic: <input type="text" name="topic" /><br />
</form> 
<a id="add" href="">add</a>

希望它有帮助:) 你可以在这里得到 jeditable：http: //www.appelsiini.net/projects/jeditable