編輯可排序的可選li與jquery-ui

Question

我想允許在可選/可排序列表中編輯列表項目。

這裏是一個列表例如： http://jsbin.com/aweyo5 學分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