SharePoint 2013 : Liens promus - Réorganiser les tuiles (fr-FR)
Note : Cet article est une traduction de l'article SharePoint Promoted Links - Wrap tiles.
Lorsque vous utilisez le composant WebPart de "Liens promus" sur une de vos pages, il est possible que le composant WebPart utilise beaucoup d'espace horizontal du fait que vous pouvez avoir une certaine quantité de tuiles à afficher; par exemple 12 tuiles. Pour un affichage agréable sans boutons de défilement, vous auriez besoin d'un énorme moniteur 16:9.
Alors ne serait-il pas préférable d'avoir une option pour réorganiser les tuiles ? Comme splitter les 12 tuiles en 3 lignes de 4 tuiles chacune ?
Avec ce petit **JavaScript **, c'est possible.
Ajoutez juste un composant WebPart "Script Editor" dans la page et collez le code suivant.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js "></script>
<script type="text/javascript">
$(document).ready(function () {
// Update this value to the number of links you want to show per row
var numberOfLinksPerRow = 4;
// local variables
var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";
var post = "'></div></td></tr>";
var numberOfLinksInCurrentRow = numberOfLinksPerRow;
var currentRow = 1
// find the number of promoted links we're displaying
var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;
// if we have more links then we want in a row, let's continue
if (numberOfPromotedLinks > numberOfLinksPerRow) {
// we don't need the header anymore, no cycling through links
$('.ms-promlink-root > .ms-promlink-header').empty();
// let's iterate through all the links after the maximum displayed link
for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {
// if we're reached the maximum number of links to show per row, add a new row
// this happens the first time, with the values set initially
if (numberOfLinksInCurrentRow == numberOfLinksPerRow) {
// i just want the 2nd row to
currentRow++;
// create a new row of links
$('.ms-promlink-root > table > tbody:last').append(pre + currentRow + post);
// reset the number of links for the current row
numberOfLinksInCurrentRow = 0 } // move the Nth (numberOfLinksPerRow + 1) div to the current table row
$('.ms-promlink-body > .ms-tileview-tile-root:nth-child(' + (numberOfLinksPerRow + 1) +')').appendTo($('#promlink_row_' + currentRow));
// increment the number of links in the current row
numberOfLinksInCurrentRow++; }
}
});
</script>
Notez que ce script ajoute également une référence à la librairie jQuery. Quand vous avez déjà accès à **jQuery **sur votre site SharePoint vous pouvez supprimer la première ligne.
Après avoir sauvegardé, votre page modifiée devrait ressembler à ceci :
Grâce à la variable "numberOfLinksPerRow", vous pouvez contrôler le nombre de tuiles par ligne.
Autres langues
Cet article est également disponible dans les langues suivantes :
English (en-US)