CODEWITHSUNDEEP
jquery-mobile
neeraj
neeraj

Reputation: 223

Pop up on listing screen using jquery mobile

I'm working on mobile app.I want pop-up to appear on click of icon(carat-r). Actually i'm not gettin where to link. Below is my code. Thanks in advance

  <div data-role="page" data-theme="a" data-content-theme="a">

    <div data-role="header" data-position="fixed" data-theme="b">
    <h1>weekdays</h1>
    </div>
    <div data-role="tabs" id="tabs">
    <ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-inset="true">
    <li ><a href="#">
    <h2>Sunday</h2>
    </a></li>
    <li><a href="#">
    <h2>monday</h2>
    </a></li>
    </ul>
    </div>
    </div>

Upvotes: 0

Views: 66

Answers (1)

ezanker
ezanker

Reputation: 24738

If you want to launch a popup when the icon is clicked, but still have the rest of the listitem be a regular link, you should use the split button option on the listview:

http://demos.jquerymobile.com/1.4.4/listview/#Splitbuttons

You can set the icon to carat-r using the data-split-icon attribute.

In your markup:

<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-inset="true" data-split-icon="carat-r">
    <li>
        <a href="#"><h2>Sunday</h2></a>
        <a href="#popupMenu" data-rel="popup" data-position-to="window" data-transition="pop"></a>
    </li>
</ul>

DEMO

Upvotes: 1

Related Questions