numéro de la liste de navigation

Je travaille sur une petite application ci-dessous où il y a une collection d'éléments de liste tous les éléments de liste devraient être dans la boîte, peu importe combien ils sont comme ils peuvent être dans la deuxième colonne. Aussi je veux garder une limite sur le nombre d'éléments de liste qui peuvent être affichés comme pas plus alors disons 10 de sorte que le moment il y a 10 éléments, le 10ème élément devrait être omis et "Voir tout" devrait être affiché. Ainsi, une fois que l'utilisateur clique sur Afficher tout, il peut être dirigé vers la deuxième page et tous les éléments peuvent être affichés.numéro de la liste de navigation

ci-dessous est mon code.

Merci

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
    #container { 

border: 1px dotted #D7D7D7; 
padding: 0px 5px 5px 8px; 
height: 250px; 
width: 250px; 


} 


#heading { 

} 
ul { 
    display: inline; 
} 
ul li{ 
    display: block; 
} 

</style> 
</head> 
<div id="container"> 
    <div id="heading">Style </div> 
    <ul> 
     <li> >>1 </li> 
     <li> >>2 </li> 
     <li> >>3 </li> 
     <li> >>4 </li> 
     <li> >>5 </li> 
     <li> >>6 </li> 

    </ul> 



</div> 
<body> 
</body> 
</html>

Source

2010-01-17 Josh

Voir cette question d'hier: http://stackoverflow.com/questions/2077045/how-to-show-more-list-using-jquery –

Si vous cherchez à limiter la quantité d'éléments affichés, vous pouvez le faire avec une largeur fixe sur vos éléments de liste et overflow cachés pour couper des éléments supplémentaires d'être affiché.

<style> 
    ul { 
     height: 20px; 
     overflow: hidden; 
     width: 180px; 
     } 

    li { 
     display: block; 
     float: left; 
     height: 20px; 
     width: 20px; 
     } 

    ul.unlimited { 
     height: auto; 
    } 

    #view_all { 
     display: none; 
    } 
</style>

Non pour afficher la vue tout le lien. Je conseillerais de générer cela du côté serveur. Toutefois, si vous ne disposez pas de contrôle sur cela, vous pouvez le faire avec javascript par exemple, vous pouvez faire un simple script jquery:

<script> 
     $(document).ready(function() { 
      if ($("#container ul li").length > 9) { 
      $("#view_all").show().click(function() { 
       $("#container ul").addClass("unlimited"); 
       return false; 
      }); 
      } 
     }); 
</script>

ici Je suppose que vous avez un point d'ancrage intégré dans votre code html avec un id de "view_all". Vous pouvez voir ce que nous faisons ici. Le CSS cache l'affichage de tous les liens par défaut et utilise une largeur et une hauteur fixes dans la liste. S'il y a plus de 10 éléments, ils ne seront pas visibles car le style par défaut permet seulement d'afficher 9. Cependant, le script jquery dira au navigateur Web de rendre visible tout le lien. Ensuite, nous assignons un gestionnaire d'événement click sur ce lien. Cela applique une classe à la liste qui supprime la hauteur fixe permettant à tous les éléments de la liste d'être affichés.

Vous pouvez gérer cela de différentes façons, mais c'est une solution simple. Notez également que vous souhaitez ajouter un ID ou une classe à la liste non triée afin d'être un peu plus explicite dans votre code CSS/JS.

Source

2010-01-18 05:29:37

Répondre

Questions connexes