CODEWITHSUNDEEP
jquerycssjquery-mobilejquery-mobile-listviewjquery-mobile-grid
Joe Taylor
Joe Taylor

Reputation: 579

jquery mobile switch between grid and list view

I'm trying to create a jquery function which switches betweena grid and list type layout of elements on my jqm page. Here's my html structure:

<div data-role="page" id="portfolio">
<div data-role="header">
    <a href="#main" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true"></a>
    <h1>Projects</h1>
    <a href="javascript:changeLayout()" id="changelayout" class="ui-btn-right" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true"></a>
</div>
<div data-role="content">
    <ul id="projects">
        <li><a href="#incarpi"><img src="images/incarpi.jpg" ><div class="portfoliotext">Raspberry Pi In-car computer</div></a></li>

...

and heres my function:

function changeLayout() {
if ($('#changelayout').attr('data-icon') == 'grid'){
    $('#changelayout').attr('data-icon', 'bars');
    $('#changelayout .ui-icon').addClass('ui-icon-bars').removeClass('ui-icon-grid');
    $('#changelayout').buttonMarkup('refresh');
    $('#projects li img').width('100%');
    $('#projects li').display('none');
    $('.portfoliotext').show();
}
else {
    $('#changelayout').attr('data-icon', 'grid');
    $('#changelayout .ui-icon').addClass('ui-icon-grid').removeClass('ui-icon-bars');
    $('#changelayout').buttonMarkup('refresh');
    $('#projects li img').width('20%');
    $('#projects li').margin('0');
    $('#projects li').display('inline-block');
    $('.portfoliotext').hide();
}

}

However the elements still just stay one on top of the other. What am I doing wrong?

Thanks

Upvotes: 0

Views: 1237

Answers (2)

Raji
Raji

Reputation: 845

Did you try this?

$("#changelayout").attr('data-icon','bars').button().trigger("refresh");

Or You can do like this also. 

$("#changelayout").find(".ui-icon").removeClass("ui-icon-bars").addClass("ui-icon-grid");

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

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

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#changelayout', function(){             
        if ($('#changelayout').attr('data-icon') == 'grid'){
            $('#changelayout').buttonMarkup({ icon: "bars" });
            $( "#projects li" ).each(function( index ) {
                $(this).width('100%');
                $(this).css('float','clear');            
                $(this).find('.portfoliotext').css('display','none');
            });            
        } else {
            $('#changelayout').buttonMarkup({ icon: "grid" });            
            $( "#projects li" ).each(function( index ) {            
                $(this).width('20%');
                $(this).css({'float':'left','margin':'0'});                        
                $(this).find('.portfoliotext').css('display','block');                   
            });                         
        }
    });        
});

I hope this is it.

Upvotes: 1

Related Questions