Afficher les enregistrements par vue en liste / vue en grille

Check it out

Vérifier l'url ci-dessus,

Vous trouverez les options comme l'affichage de la liste/grid afficher l'option pour afficher les enregistrements.

Mai je sais, c'est là tout l'open source du script pour que, tout de plugin jquery qui peut le faire, veuillez donner des suggestion. Je veux faire le même genre de travail dans mon site.

source d'informationauteur Bharanikumar

  1. 28

    Vous n'avez pas besoin d'un plugin ; il suffit d'utiliser JS pour changer de classe de conteneur sna CSS pour modifier l'affichage en fonction de la classe.

    De travail Violon à expliquer : http://jsfiddle.net/akarun/LJf9p/

    remarque: le code JS peut être optimiser, Heu, c'est juste de l'échantillon de !

  2. 1

    Ici est une solution de rechange. Il ne nécessite pas de connaissances CSS. L'idée est simple, vous avez le contenu à la fois dans la liste et le format de grille dans votre fichier html. Initialement, l'un d'eux est cachée avec le style="display: none;" de la propriété. Lorsque l'utilisateur clique sur "listview" ou "gridview" hyperliens, vous allez utiliser javascript pour masquer et afficher un autre. Voici l'extrait de code en 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>

    Cette approche n'est pas aussi cher qu'il pourrait paraître. Puisque vous êtes en utilisant les mêmes images qu'ils seront téléchargés qu'une seule fois. Reste de l'html pour gridview et listview n'est pas d'augmenter la taille du fichier de beaucoup. Ainsi, vous serez bien moins que le nombre d'élément que vous tentez d'afficher est vraiment très très grand.