Enhance the remove button in list item

We are going to change the Remove Book button into split button. This is done by a minor change.

First we change the list item by making the delete button a second link outside the amazon link.

1<li class='book-entry'>
2  <a class='amazon-link' href='#'>
3    <h1 class='book-title'></h1>
4    <p class='isbn'></p>
5    <p class='tags'></p>
6    <p class='ui-li-count'><a href='#' class='delete-btn' data-isbn=''>X Remove</a></p>
7  </a>
8</li>

1<li class='book-entry'>
2  <a class='amazon-link' href='#'>
3    <h1 class='book-title'></h1>
4    <p class='isbn'></p>
5    <p class='tags'></p>
6  </a>
7  <a href='#' class='delete-btn' data-isbn=''>X Remove</a>
8</li>

Then we add data-split-icon='delete' which defines which icon to use in the split button area.

1<ul data-role='listview' data-filter='true' data-inset='true' id="books"></ul>

1<ul data-role='listview' data-filter='true' data-inset='true' data-split-icon='delete' id="books"></ul>

What’s next? We’re going to take a look at “Books-to-buy challenge”.

◀ Adding Amazon link Books-to-buy challenge ▶

makzan.

Enhance the remove button in list item

Makzan | Mobile web app dev with phonegap | Table of Content