jquery移动切换网格和列表视图

我想创建一个jquery函数，它在我的jqm页面上的元素的网格和列表类型布局之间切换。这是我的HTML结构：jquery移动切换网格和列表视图

<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>

...

和我的继承人功能：

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(); 
}

}

然而元素仍然只是停留一个在另一个之上。我究竟做错了什么？

谢谢

来源

2013-04-12 Joe Taylor

你试过这个吗？

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

或者你也可以这样做。

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

来源

2013-04-12 12:05:41 Raji

我想你已经误解了我，按钮图标变化不错，但HTML元素（#projects li）改变了大小，但仍然是一个列表，我希望它们并排放置在一个网格中 –

工作例如：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');     
      });       
     } 
    });   
});

我希望这是它。

来源

2013-04-12 12:08:28 Gajotres

jquery移动切换网格和列表视图

回答

相关问题