listview - jquery plugin to toggle list view and column view for bootstrap -
i'm trying put script toggle grid , list group views. want keep code light possible utilizing bootstrap classes. i'll add additional classes col-lg-* etc... , work on cookie script now, i'm trying wrap classes using wrapall, wrap nwrapper. first time click grid view button, works fine , everytime after list view i'm stuck trying fix grid view after second click. perhaps set of eyes can me see doing wrong.
here demo of i'm working on: toggle list grid view.
this script far:
$(document).ready(function() { $('#grid').click(function() { $('#products').fadeout(300, function() { $(this).addclass('row-group').fadein(300); $(this).removeclass('list-group').fadein(300); $('#grid').addclass('disabled'); $('#list').removeclass('disabled'); $('.item').removeclass('list-group-item row'); $('.item').wrap( '<div class="col-md-4" />'); $(this).nwrapper({ wrapevery : 3, defaultclasses : false, extraclasses : ['row'] }); $.cookie('list_grid', 'g'); }); return false; }); $('#list').click(function() { $('#products').fadeout(300, function() { $(this).removeclass('row-group').fadein(300); $(this).addclass('list-group').fadein(300); $('#grid').removeclass('disabled'); $('#list').addclass('disabled'); $('.col-md-4').unwrap(); // unwraps nwrapper above $('.item').addclass('list-group-item row'); $('.item').unwrap( '<div class="col-md-4" />'); $('.inner').nwrapper({ wrapevery : 2, defaultclasses : false, extraclasses : ['col-md-9'] }); $('.list-group-image').wrap( '<div class="col-md-3" />'); $.cookie('list_grid', null); }); return false; });
});
in example provide (switching between grid / list view) wrapping seems kind of complex.
i think switch between grid , list view making grid view default (using bootstrap's grid classes). switch list view adding list-group-item class , undo grid styles width , floating. see: http://bootply.com/78753
css:
.item.list-group-item { /*reset grid float , width , add background fun */ float: none; width: 100%; background-color:green; } /* give image left float in list view */ .item.list-group-item img{float:left;} /* , clearfix left float of image */ .item.list-group-item:before, .item.list-group-item:after { display: table; content: " "; } .item.list-group-item:after { clear:both; }
javasacript:
$('#list').click(function(){$('#products .item').addclass('list-group-item');}); $('#grid').click(function(){$('#products .item').removeclass('list-group-item');});
html
<div class="container"> <div class="btn-group"> <a href="#" id="list" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-th-list"></span> list</a> <a href="#" id="grid" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th"></span> grid</a> </div> <div id="products" class="row list-group"> <div class="item col-lg-4"> <img class="group list-group-image" src="http://dummyimage.com/300x150/000/fff&text=logo" /> <h4 class="group inner list-group-item-heading">list group item heading 1</h4> <p class="group inner list-group-item-text">...</p> </div> <!--repeat items here --> </div> </div> </div><!--/.container-->
update make sense add / remove clearfix class jquery too:
$('#list').click(function(){alert('tolist');$('#products .item').addclass('list-group-item clearfix');}); $('#grid').click(function(){$('#products .item').removeclass('list-group-item clearfix');});
above reduce css to:
.item.list-group-item { float: none; width: 100%; background-color:green; } .item.list-group-item img{float:left;}
Comments
Post a Comment