CODEWITHSUNDEEP
jqueryhtmlcsslistviewjquery-mobile
surendra
surendra

Reputation: 2267

Not getting listview features in jquerymobile

I am very new to jquerymobile .I am doing a sample in which i am trying to display a listview and this is my code.

<!doctype html>
<html>
<head>

<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css"/>

<script type="text/javascript" charset="UTF-8" src="jquery.js"></script>
<script type="text/javascript" charset="UTF-8" src="jquery.mobile-1.2.0.min.js"></script>

</head>

<body bgcolor="#e8e8e8">


<div data-role="page" id="emplist-page">

<div data-role="header" data-theme="b">
<h1>Employee Details</h1>
</div>

<div data-role="content">

<ul data-role="listview" id="emplist" data-theme="d">
<li data-role="divider">Names</li>
<li data-icon="arrow-r" >Surendra</li>
<li data-icon="arrow-r" >Bala</li>
</ul>

</div>

<div data-role="footer" data-theme="b" data-position="fixed">
<h1>@2012</h1>
</div>

</div>

</body>
</html>

In this I am not getting the features of listview like the divider not visible as a divider and the arrow icon is not visible for the listitems.

This is the output that I am getting.

enter image description here

I added the images folder also.

What should i do ?

Thanks in advance.

Upvotes: 1

Views: 183

Answers (2)

Saurabh
Saurabh

Reputation: 254

Here is lots of example of listview like Basic linkedList,Nested,Numbered, split button, list dividers, count bubble etc. check below url.

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-ul.html

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

Your li element must have a child a tag inside, only then will arrow be visible and only then you can use data-icon property or data-split-icon property to see a li icon. If a tag is not supposed to act like a link use href="#".

Like this:

        <ul data-role="listview" data-theme="a">
            <li><a href="#">item1</a></li>
            <li><a href="#">item1</a></li>
            <li><a href="#">item1</a></li>
        </ul>

More about this can be found here.

Take a look at this example: http://jsfiddle.net/Gajotres/Defxd/

Now take a look without a tag : http://jsfiddle.net/Gajotres/LwfJ6/

Also if you are just starting take a look at this link, it is a cheat sheet for jQM.

Upvotes: 2

Related Questions