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移動切換網格和列表視圖

回答

相關問題