私はあなたがJquery Mobileの使い方を学んでいます.listviewを使ってリストを作成するためにいくつかのコードを組み合わせています.listからアイテムを削除したり、選択したアイテムの位置をリストに変更したりできます.
まず、jquery モバイル ヘルプの削除の例を使用し、ページ フッターにテスト用のボタンを追加して、ダミー項目をリストに追加します。ここまでは部分的に動作します。以前に定義されたリストの削除アイテムをクリックしないと、追加機能が機能しません。ただし、最初に削除アイコンをクリックしてから追加ボタンをクリックすると、これは機能しますが、新しいアイテムの削除ボタンでは削除ボタンのクリックイベントが有効になりません。どうすればこれを解決できるか、アイデアや提案があれば教えてください。前もって感謝します。コードは次のとおりです。
<!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>