CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
user2066880
user2066880

Reputation: 5034

Use JQuery Mobile to slide and delete list elements

I'm experimenting with a JQuery Mobile page that has a simple list set up:

page

When I click the list elements, they are highlighted and stored by id into a local array. Is there a simple (or not so simple) way to make the selected elements slide to the right off the screen and the rest of the elements collapse to fill the gaps?

Relevant code:

var selectedItems = []; // This is updated as items are selected

var deleteButtonTapped = function() {
    // code here
};

Edit: If it is of any pertinence, in the actual implementation of the page, the items that I am populating the list with will be drawn from a database, so I will be able to reload the page and the deleted elements will no longer appear.

Upvotes: 0

Views: 2283

Answers (1)

Schmalzy
Schmalzy

Reputation: 17324

jsFiddle - This is close to what you are looking for... using .animate()

EDIT: Adding code...

The .animate() function is saying, if the elements left property is 0, then move it to the right as many pixels as it is wide, then hiding it using the .fadeOut() function. This same formula can also be used to slide the element back into place if needed.

HTML

<ul id="list" data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ul>
<button id='btnDelete'>Delete</button>

CSS

.yellow{
    background-color: yellow;
}

jQuery

$('#list li').click(function(){
    $(this).addClass('yellow'); 
});

$('#btnDelete').click(function(){
    $('.yellow').each(function(){
       $(this).animate({ marginLeft: parseInt($(this).css('marginLeft'),10) === 0 ?   $(this).outerWidth() : 0 }).fadeOut('fast');
    });
});

Upvotes: 5

Related Questions