Jquery mobile listview 如何在jquery mobile listview中删除和添加项
我正在学习使用Jquery Mobile，我已经结合了几个代码，以便使用listview创建一个列表，在这里我可以从列表中删除和删除项目，或者修改列表中所选项目的位置 首先，我使用jquerymobile帮助中的delete示例，并在页脚中添加一个额外的按钮用于测试目的，以便在列表中添加一个虚拟项。到目前为止，它部分起作用。如果我没有在先前预定义的列表中单击删除项，则添加功能将不起作用。但是，如果我先单击删除图标，然后单击我的添加按钮，这会起作用，但是新项目删除按钮没有启用删除按钮单击事件。你们中有谁能提出我如何解决这个问题的想法或建议吗。非常感谢，下面是代码：Jquery mobile listview 如何在jquery mobile listview中删除和添加项,jquery-mobile-listview,Jquery Mobile Listview,我正在学习使用Jquery Mobile，我已经结合了几个代码，以便使用listview创建一个列表，在这里我可以从列表中删除和删除项目，或者修改列表中所选项目的位置 首先，我使用jquerymobile帮助中的delete示例，并在页脚中添加一个额外的按钮用于测试目的，以便在列表中添加一个虚拟项。到目前为止，它部分起作用。如果我没有在先前预定义的列表中单击删除项，则添加功能将不起作用。但是，如果我先单击删除图标，然后单击我的添加按钮，这会起作用，但是新项目删除按钮没有启用删除按钮单击事件。你们
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Swipe list - jQuery Mobile Demos</title>
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css">
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/_assets/css/jqm-demos.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/_assets/js/jquery.mobile.demos.js"></script>
<script src="http://jquerymobile.com/demos/1.3.0-beta.1/js/jquery.mobile-1.3.0-beta.1.js"></script>
<script>
$( document ).on( "pageinit", "#demo-page", function() {
// Swipe to remove list item
$( document ).on( "swipeleft swiperight", "#list li.ui-li", function( event ) {
var listitem = $( this ),
// These are the classnames used for the CSS transition
dir = event.type === "swipeleft" ? "left" : "right",
// Check if the browser supports the transform (3D) CSS transition
transition = $.support.cssTransform3d ? dir : false;
confirmAndDelete( listitem, transition );
});
// If it's not a touch device...
if ( ! $.mobile.support.touch ) {
// Remove the class that is used to hide the delete button on touch devices
$( "#list" ).removeClass( "touch" );
// Click delete split-button to remove list item
$( ".delete" ).on( "click", function() {
var listitem = $( this ).parent( "li.ui-li" );
confirmAndDelete( listitem );
});
}
function confirmAndDelete( listitem, transition ) {
// Highlight the list item that will be removed
listitem.addClass( "ui-btn-down-d" );
// Inject topic in confirmation popup after removing any previous injected topics
$( "#confirm .topic" ).remove();
listitem.find( ".topic" ).clone().insertAfter( "#question" );
// Show the confirmation popup
$( "#confirm" ).popup( "open" );
// Proceed when the user confirms
$( "#confirm #yes" ).on( "click", function() {
// Remove with a transition
if ( transition ) {
listitem
// Remove the highlight
.removeClass( "ui-btn-down-d" )
// Add the class for the transition direction
.addClass( transition )
// When the transition is done...
.on( "webkitTransitionEnd transitionend otransitionend", function() {
// ...the list item will be removed
listitem.remove();
// ...the list will be refreshed and the temporary class for border styling removed
$( "#list" ).listview( "refresh" ).find( ".ui-li.border" ).removeClass( "border" );
})
// During the transition the previous list item should get bottom border
.prev( "li.ui-li" ).addClass( "border" );
}
// If it's not a touch device or the CSS transition isn't supported just remove the list item and refresh the list
else {
listitem.remove();
$( "#list" ).listview( "refresh" );
}
});
// Remove active state and unbind when the cancel button is clicked
$( "#confirm #cancel" ).on( "click", function() {
listitem.removeClass( "ui-btn-down-d" );
$( "#confirm #yes" ).off();
});
$("#btn-agre").click(function(listitem){
$("#list").append('<li><a href="#demo-mail"><h3>Agregado</h3><p class="topic"><strong>Re: Agregado</strong></p><p>veamos si funciona en la hora y cosa adecuada</p><p class="ui-li-aside"><strong>4:48</strong>PM</p></a><a href="#" class="delete" data-inline="false">Delete</a></li>');
$( "#list" ).listview( "refresh" );
});
}
});
</script>
<style>
/* Left transition */
li.ui-li.left {
-webkit-transition: -webkit-transform 250ms ease;
-webkit-transform: translateX(-100%);
-moz-transition: -moz-transform 250ms ease;
-moz-transform: translateX(-100%);
-o-transition: -o-transform 250ms ease;
-o-transform: translateX(-100%);
transition: transform 250ms ease;
transform: translateX(-100%);
border-top-width: 0; /* We switch to border bottom on previous list item */
border-right-width: 1px;
}
/* Right transition */
li.ui-li.right {
-webkit-transition: -webkit-transform 250ms ease;
-webkit-transform: translateX(100%);
-moz-transition: -moz-transform 250ms ease;
-moz-transform: translateX(100%);
-o-transition: -o-transform 250ms ease;
-o-transform: translateX(100%);
transition: transform 250ms ease;
transform: translateX(100%);
border-top-width: 0; /* We switch to border bottom on previous list item */
border-left-width: 1px;
}
/* Border bottom for the previous list item during the transition*/
li.ui-li.border {
border-bottom-width: 1px;
}
/* Hide the delete button on touch devices */
.touch .delete {
display: none;
}
.touch .ui-link-inherit {
padding-right: 15px !important;
}
/* Custom styling for the popup */
#confirm {
border: 1px solid;
border-color: #044062; /* Fallback for older browsers */
border-color: rgba(4,64,98,.4);
background: #456f9a; /* Fallback for older browsers */
background: rgba(69,111,154,.8);
-moz-box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
-webkit-box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
max-width: 250px;
}
#confirm p {
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
margin-bottom: .75em;
}
/* Make the buttons inherit the popup border-radius (.ui-corner-all) */
#confirm div, #confirm .ui-btn-corner-all {
-webkit-border-radius: inherit;
border-radius: inherit;
}
#confirm #cancel {
background-image: none;
}
#confirm .topic.ui-li-desc {
font-size: inherit; /* The cloned topic will have class ui-li-desc so we negate the font-size settings of this class */
text-align: center;
}
</style>
</head>
<body>
<div data-role="page" id="demo-page" data-title="Inbox" data-theme="d">
<!--
NOTE: If you modify this page make sure you copy your modifications over to
#sample-page below so that your modifications will be reflected in the source
code view
-->
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Inbox</h1>
</div><!-- /header -->
<div data-role="content">
<ul id="list" class="touch" data-role="listview" data-icon="false" data-split-icon="gear" data-split-theme="d" data-inset="true">
<li>
<a href="#demo-mail">
<h3>Avery Walker</h3>
<p class="topic"><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
<a href="#" class="delete" data-inline="false">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Amazon.com</h3>
<p class="topic"><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Mike Taylor</h3>
<p class="topic"><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Redfin</h3>
<p class="topic"><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Angela Smith</h3>
<p class="topic"><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>1:24</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Stephen Weber</h3>
<p class="topic"><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>jQuery Team</h3>
<p class="topic"><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
</ul>
<div data-role="footer" data-position="fixed" data-theme="b">
<a id="btn-agre" data-role="button" data-shadow="false" data-theme="b" data-icon="gear" >agregar</a>
</div>
</div><!-- /content -->
<div id="confirm" class="ui-content" data-role="popup" data-theme="none">
<a id="cancel" href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">cerrar</a>
<p id="question">Are you sure you want to delete</p>
<a id="btn-arriba" data-role="button" data-shadow="false" data-theme="b" data-rel="back" data-icon="arrow-u" >subir</a>
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c">
<a id="yes" data-icon="delete" data-role="button" data-shadow="false" data-theme="d" data-iconpos="notext" data-rel="back" data-align="right">eliminar</a>
</div>
</div>
<a id="btn-bajar" data-role="button" data-shadow="false" data-theme="b" data-rel="back" data-icon="arrow-d" >bajar</a>
</div><!-- /popup -->
</div><!-- /page -->
<div data-role="page" id="sample-page" data-title="Inbox" data-theme="d">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Inbox</h1>
<a href="#demo-intro" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
<a href="#" onclick="window.location.reload()" data-icon="back" data-iconpos="notext">Refresh</a>
</div><!-- /header -->
<div data-role="content">
<ul id="list" class="touch" data-role="listview" data-icon="false" data-split-icon="delete" data-split-theme="d">
<li>
<a href="#demo-mail">
<h3>Avery Walker</h3>
<p class="topic"><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Amazon.com</h3>
<p class="topic"><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Mike Taylor</h3>
<p class="topic"><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Redfin</h3>
<p class="topic"><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Angela Smith</h3>
<p class="topic"><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>1:24</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Stephen Weber</h3>
<p class="topic"><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>jQuery Team</h3>
<p class="topic"><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Avery Walker</h3>
<p class="topic"><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Amazon.com</h3>
<p class="topic"><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Mike Taylor</h3>
<p class="topic"><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Redfin</h3>
<p class="topic"><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Angela Smith</h3>
<p class="topic"><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>1:24</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Stephen Weber</h3>
<p class="topic"><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>jQuery Team</h3>
<p class="topic"><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
</ul>
</div><!-- /content -->
<div id="confirm" class="ui-content" data-role="popup" data-theme="none">
<p id="question">Are you sure you want to delete</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a id="yes" data-role="button" data-mini="true" data-shadow="false" data-theme="b" data-rel="back">Yes</a>
</div>
<div class="ui-block-b">
<a id="cancel" data-role="button" data-mini="true" data-shadow="false" data-theme="b" data-rel="back">Cancel</a>
</div>
</div>
</div><!-- /popup -->
</div><!-- /page -->
<div data-role="page" id="demo-mail" data-title="Demo" data-theme="d">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Demo</h1>
<a href="#demo-page" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
</div><!-- /header -->
<div data-role="content">
<p>This is just a landing page for demo purposes.</p>
<p><a href="#demo-page" data-rel="back" data-role="button" data-inline="true" data-icon="arrow-l" data-iconpos="left">Back</a></p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
滑动列表-jQuery移动演示
$（文档）。在（“pageinit”，“演示页”，函数（）上）{
//滑动以删除列表项
$（文档）.on（“swipeleft swiperight”、“#list li.ui li”，函数（事件）{
var listitem=$（此），
//这些是用于CSS转换的类名
dir=event.type==“swipeleft”？“left”：“right”，
//检查浏览器是否支持转换（3D）CSS转换
transition=$.support.cstransform3d？dir:false；
确认删除（列表项，转换）；
});
//如果不是触摸设备。。。
如果（！$.mobile.support.touch）{
//删除用于隐藏触摸设备上的删除按钮的类
$（“#列表”）.removeClass（“触摸”）；
//单击删除拆分按钮以删除列表项
$（“.delete”）。在（“单击”，函数（）{
var listitem=$（this.parent（“li.ui-li”）；
确认删除（列表项）；
});
}
函数确认删除（列表项，转换）{
//突出显示将被删除的列表项
listitem.addClass（“ui-btn-down-d”）；
//删除任何以前插入的主题后，在确认弹出窗口中插入主题
$（“#confirm.topic”）.remove（）；
listitem.find（“.topic”）.clone（）.insertAfter（“#问题”）；
//显示确认弹出窗口
$（“确认”）。弹出（“打开”）；
//用户确认后继续
$（“#确认#是”）。在（“单击”，函数（）{
//以过渡方式移除
如果（过渡）{
列表项
//删除突出显示
.removeClass（“ui-btn-down-d”）
//为过渡方向添加类
.addClass（转换）
//当转换完成时。。。
.on（“WebKittTransitionEnd transitionend transitionend和otransitionend”，函数（）{
//…列表项将被删除
remove（）；
//…将刷新列表，并删除用于边框样式设置的临时类
$（“#list”）.listview（“刷新”）.find（.ui li.border”）.removeClass（“border”）；
})
//在转换过程中，上一个列表项应具有底部边框
.prev（“li.ui li”）.addClass（“边界”）；
}
//如果它不是触摸设备或CSS转换不受支持，只需删除列表项并刷新列表即可
否则{
remove（）；
$（“#列表”）.listview（“刷新”）；
}
});
//单击“取消”按钮时，删除活动状态并解除绑定
$（“#确认#取消”）。在（“单击”，函数（）{
listitem.removeClass（“ui-btn-down-d”）；
$（“#确认#是”）.off（）；
});
$（“#btn agre”）。单击（函数（列表项）{
$（“#列表”）。追加（“”）；
$（“#列表”）.listview（“刷新”）；
});
}
});
/*左过渡*/
li.ui-li.左{
-webkit转换：-webkit转换250ms易用性；
-webkit转换：translateX（-100%）；
-moz转换：-moz转换250ms易用性；
-moz变换：translateX（-100%）；
-o型转换：-o型转换250ms易用性；
-o-转换：translateX（-100%）；
转换：转换250ms轻松；
转化：translateX（-100%）；
边框顶部宽度：0；/*我们在上一个列表项上切换到边框底部*/
右边框宽度：1px；
}
/*右转*/
对{
-webkit转换：-webkit转换250ms易用性；
-webkit转换：translateX（100%）；
-moz转换：-moz转换250ms易用性；
-moz变换：translateX（100%）；
-o型转换：-o型转换250ms易用性；
-o-转换：translateX（100%）；
转换：转换250ms轻松；
转化：translateX（100%）；
边框顶部宽度：0；/*我们在上一个列表项上切换到边框底部*/
左边框宽度：1px；
}
/*转换期间上一个列表项的底部边框*/
li.ui-li.border{
边框底宽：1px；
}
/*隐藏触摸设备上的删除按钮*/
触摸
$('div').append("<h1>Hello World</h1>");