首页>>Jquery文字>>无刷新更新list添加删除内容(2014-08-26)

无刷新更新list添加删除内容

本例不能修改内容，如果想要完整的带数据库的php版本，请看《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》，或者搜索本站相关内容

 

无刷新更新list添加删除内容
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <ul id="list" data-role="listview">  
  2.             <li>Apple</li>  
  3.             <li>Orange</li>  
  4.             <li>Banana</li>  
  5.             <li>Mango</li>  
  6. </ul>  
  7.   
  8. <form id="editing-form" data-editable-form="true">  
  9.             <input type="text" data-item-name="fruitName" data-item-template="<h3>%%</h3>">  
  10.             <input type="text" data-item-name="fruitShape" data-item-template="<p><em>Shape:</em> <strong>%%</strong></p>">  
  11.             <input type="text" data-item-name="fruitColor" data-item-template="<p><em>Color:</em> <strong>%%</strong></p>">  
  12.             <button class="ui-btn ui-corner-all" data-add-button="true">Add</button>  
  13.             <button class="ui-btn ui-corner-all" data-clear-button="true">Clear</button>  
  14.         </form>  

 

JavaScript Code
  1. <script>  
  2.         var $list = $( "#list" ).listview({  
  3.             editable: true,  
  4. //            editableType: "simple",  
  5. //            collapsed: false,  
  6.             title: "Fruits",  
  7.             emptyTitle: "No Fruits"  
  8.         });  
  9.   
  10. //        $("#list3").listview().listview("disable")  
  11. //        console.log($("#list3").listview().listview("dis")[0])  
  12.   
  13.         $("#list3").on('listviewchange', function(e, data) {  
  14.             console.log('listviewchange fired', data)  
  15.         })  
  16.     </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_415.html