Display records by list view / grid view

Check it out

Check the above url,

You can find the options like list view/ grid view option for displaying t开发者_高级运维he records.

May I know is there any open source script for that, any jquery plugin can do that, please give suggestion. I want to make same kind of work in my site.

You don't need a plugin ; simply use JS to change class of container ans CSS to change view depending of the class.

Working Fiddle to explain : http://jsfiddle.net/akarun/LJf9p/

note: the JS code can be optimize, Uhh, it's just sample !

Here is an alternative solution. It doesn't require any CSS knowledge. The idea is simple you have the content both in list and grid format in your html file. Initially one of them is hidden with the style="display: none;" property. When the user clicks on "listview" or "gridview" hyperlinks, you will use javascript to hide one and display another. Here is the code snippet in jquery:

<script>
    $(document).ready(function(){
        $("#gridlink").click(function() {
            $("#divlist").hide();
            $("#divgrid").show();
        });
        $("#listlink").click(function() {
            $("#divlist").show();
            $("#divgrid").hide();
        });
    })
</script>

<a id="gridlink" href="#">Grid view</a> |
<a id="listlink" href="#">List view</a>

<div id="divgrid">Grid content here</div>
<div id="divlist" style="display:none">List content here</div>

This approach is not as expensive as it might sounds. Since you are using the same images they will be downloaded only once. Rest of the html for gridview and listview doesnot increase the file size much. So you will be fine unless the number of item you are trying to display is really really big.