CODEWITHSUNDEEP
jquerycsslistviewjquery-mobile
adibouf
adibouf

Reputation: 171

Listview separator JQuery Mobile

I'm using Jquery Mobile Flat UI Theme. It's great but i want to add a separator between each listview .

Here is the listview :

Listview

Which code I have to add in my .css file ?

Upvotes: 2

Views: 2942

Answers (3)

Gajotres
Gajotres

Reputation: 57309

Solution 1

Just add this li element before every classic listview element:

Example:

<li data-role="list-divider">Some text here</li>

Solution 2

Or it can be done automatically if you add an attribute data-autodividers="true" to your listview ul element.

Example:

<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    <li><a href="index.html">Adam Kinkaid</a></li>
    <li><a href="index.html">Alex Wickerham</a></li>
    <li><a href="index.html">Avery Johnson</a></li>
    <li><a href="index.html">Bob Cabot</a></li>
    <li><a href="index.html">Caleb Booth</a></li>
    <li><a href="index.html">Christopher Adams</a></li>
    <li><a href="index.html">Culver James</a></li>
</ul>

Solution 3

Working example: http://jsfiddle.net/Gajotres/JHDsq/

$(document).on('pagecreate', '#index', function(){ 
    $( "#mylistview li" ).each(function() {        
        $(this).before('<li data-role="list-divider"></li>');
    });
});

This solution will add an divider to every existing li element. Also take a notice at an attribute data-divider-theme="a", it will create black deviders.

Upvotes: 1

yeyene
yeyene

Reputation: 7380

If you want list style css to separate each list.

Check DEMO http://jsfiddle.net/2qgtA/1/

Add this css.

ul li.ui-li {
    border-top:1px solid #ccc !important;
}
ul li.ui-li-divider{
    border-top:none !important;
}

Upvotes: 3

Abdul Malik
Abdul Malik

Reputation: 2642

<ul data-role="listview">
  <li>Acura</li>
  <li>Audi</li>
  <li>BMW</li>
</ul>

Upvotes: 0

Related Questions