1

選択/ソート可能なリストでリスト項目の編集を許可したい。

リストの例を次に示します: http://jsbin.com/aweyo5 credits to rdworth

では、ユーザーがアイテムを編集できるようにしますか? テキストを更新/変更する方法は知っていますが、ユーザーがリスト項目にテキストを直接入力できるようにするにはどうすればよいですか?

4

1 に答える 1

2

ここに実用的な答えがあります:

<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

于 2012-04-27T12:11:11.083 に答える