Jquery Mobile是一款基于html5的前端框架,許多的企業和個人的Web應用程序也是基于這個框架搭建的。其中,列表是Jquery Mobile中最常用的UI控件之一。在實際應用中,可能需要對某些列表項進行刪除操作。本文將向您介紹如何在Jquery Mobile中完成列表的刪除操作。
首先,我們需要在html文件中引入Jquery Mobile的庫文件:
<link rel="stylesheet" href="jquery.mobile.css"><script src="jquery.js"></script><script src="jquery.mobile.js"></script>
接著,我們需要在HTML文件中添加列表,代碼如下:
<ul data-role="listview" data-inset="true" id="list"><li>Apple</li><li>Orange</li><li>Banana</li></ul>
為了方便操作,我們為列表項添加一個刪除按鈕,代碼如下:
<ul data-role="listview" data-inset="true" id="list"><li>Apple<a href="#" class="delete">刪除</a></li><li>Orange<a href="#" class="delete">刪除</a></li><li>Banana<a href="#" class="delete">刪除</a></li></ul>
現在,我們需要編寫JavaScript代碼來實現刪除操作。代碼如下:
$('a.delete').click(function() { $(this).closest('li').remove(); });
在點擊刪除按鈕時,尋找到最近的列表項,然后將其刪除。
以上便是在Jquery Mobile中實現列表刪除操作的步驟。通過簡單的代碼實現,可以讓我們省去繁瑣的手工操作,提高生產效率。
下一篇點擊后保留樣式css