CODEWITHSUNDEEP
jquerycssjquery-mobile
user2648752
user2648752

Reputation: 2221

autodividers list view design issue using jQuery mobile

Hi,

I am using jQuery mobile in my demo. I made a simple example using autodividers which works fine; but, I am looking for some different type of list as shown above.

There should be Alphabetical letter, and the name should be followed by the address.

The name and the address should have brown and white background color respectively..

Is it possible to create such a list type using jQuery mobile ?

Here is what I've tried : http://jsfiddle.net/5wZ3E/1/

var name = new Array();
name[0] = "Saab";
name[1] = "Volvo";
name[2] = "BMW";
name[3] = "BOW";
name[4] = "BLW";

var address = new Array();
address[0] = "Sjnnnnvvf";
address[1] = "Vtyubolvo";
address[2] = "BhjhubbMW";
address[3] = "ftyui";
address[4] = "fybmi";

$(document).ready(function () {
    for(var i=0;i<name.length;i++){
        $('#folderData').append('<li><a class="lastname">'+name[i]+'</a></li>');
    }

    $("#folderData").listview({
        autodividers: true,
    });

    $('#folderData').listview('refresh');
});

Upvotes: 0

Views: 333

Answers (3)

ezanker
ezanker

Reputation: 24738

Littm'sanswer will work if you do not need an anchor tag within the li. If you want to keep the anchor as in your original question, try this:

Here is your updated FIDDLE

$(document).on("pagebeforeshow", "#page1",function () {
    var name = ["Saab","Volvo","BMW","BOW", "BLW"];
    var address = ["Sjnnnnvvf","Vtyubolvo","BhjhubbMW","ftyui","fybmi"];

    var lItems = '';
    for(var i=0;i<name.length;i++){
      lItems += '<li data-icon="false" ><a class="lastname"><h3 class="brown">'+name[i]+'</h3><p  class="white">' + address[1] + '</p></a></li>';
    }
    $("#folderData").append($(lItems)).listview({autodividers: true}).listview('refresh');

});

data-icon="false" on the li prevents it from adding the right icon. The classes brown and white handle the styling:

.brown {
    background-color: #774F38 !important;
    color: white;
    text-shadow: none;
    padding: 8px;
    margin: 0 !important;
}
.white {
    background-color: white !important;
    padding: 8px;
}
.lastname{
    padding: 0 !important;
    margin-top: 0px !important;
    background-color: white !important;
}
.ui-li{
    border-top: 0 !important;
}
.ui-li-divider {
    background: #eee;
}

Upvotes: 1

Littm
Littm

Reputation: 4947

You may want something like this: http://jsfiddle.net/Littm/LxvyU/1/

JS:

var name = new Array();
name[0] = "Saab";
name[1] = "Volvo";
name[2] = "BMW";
name[3] = "BOW";
name[4] = "BLW";

var address = new Array();
address[0] = "Sjnnnnvvf";
address[1] = "Vtyubolvo";
address[2] = "BhjhubbMW";
address[3] = "ftyui";
address[4] = "fybmi";

$(document).ready(function () {
    for(var i=0;i<name.length;i++){
        $('#folderData').append('<li><h3>'+name[i]+'</h3><p>'+address[i]+'</p></li>');
    }

    // Refreshing the list
    $('#folderData').listview('refresh');
});

HTML:

<ul data-role="listview" data-autodividers="true" id="folderData" data-divider-theme="d" data-theme="d"></ul>

****CSS :***

.ui-li-static.ui-li {
    padding: 0;
    border: none;
}

.ui-li-divider {
    background: white;
    border: none;
}

.ui-li-heading {
    background-color: gray;
    color: white;
    line-height: 20px;
    padding: 10px;
    margin: 0 0 10px 0;
    border-radius: 5px;
}

.ui-li-desc {
    padding: 10px;
}

Screenshot

Upvotes: 1

Jain
Jain

Reputation: 1249

$(document).ready(function () {

            for(var i=0;i<name.length;i++){
       $('#folderData').append(
      '<li class="test"><a class="lastname">'+address[i]+'</a></li>'
    );

     }
    $("#folderData").listview({
        autodividers: true,
        autodividersSelector:function(li){             
          return name[li.index('.test')];
        }


});
    $('#folderData').listview('refresh');
});

Manage css colors according to you Cheers!!

Upvotes: 0

Related Questions