web-dev-qa-db-fra.com

Afficher les tables dans un curseur

Je développe un site sur lequel j'aimerais que l'utilisateur puisse parcourir des tableaux, un peu comme une galerie. Je voudrais voir une table à la fois, et pouvoir cliquer sur une flèche et voir la table suivante.

Ces tableaux seront souvent mis à jour avec de nouvelles données. Actuellement, j'ai les tables dans TablePress, et elles sont affichées sous la forme d'un format de blog, l'un en dessous de l'autre. L'utilisateur doit faire beaucoup de défilement, et ce n'est pas une configuration très propre.

J'ai essayé de chercher un plugin qui ferait cela, mais tous ceux que j'ai trouvés étaient uniquement pour des images et ne fonctionnaient pas avec les tables Tablepress.

Que puis-je faire pour mieux afficher ces tableaux?

table
3
ellen

Voici une façon de le faire. Vous devriez être capable de créer un simple curseur jQuery et CSS pour mieux afficher les tables TablePress.

Voici un bon exemple de simple curseur jQuery que vous pouvez utiliser: https://codepen.io/doodlemarks/pen/aFcly

Vous devez ajouter les CSS et jQuery à votre site, puis insérer les éléments HTML requis dans votre post/page:

Par exemple (CSS et jQuery d'ici - https://codepen.io/doodlemarks/pen/aFcly ):

HTML

<div id="slider">
    <a href="#" class="control_next">></a>
    <a href="#" class="control_prev"><</a>
    <ul>
        <li>[table id=1 /]</li>
        <li>[table id=2 /]</li>
        <li>[table id=3 /]</li>
    </ul>

CSS

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
    position: absolute;
    top: 40%;
    z-index: 999;
    display: block;
    padding: 4% 3%;
    width: auto;
    height: auto;
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
 }

a.control_prev:hover, a.control_next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
}

a.control_prev {
    border-radius: 0 2px 2px 0;
}

a.control_next {
    right: 0;
    border-radius: 2px 0 0 2px;
}

.slider_option {
    position: relative;
    margin: 10px auto;
    width: 160px;
    font-size: 18px;
}

jQuery 

jQuery(document).ready(function ($) {

    jQuery('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
});

var slideCount = jQuery('#slider ul li').length;
var slideWidth = jQuery('#slider ul li').width();
var slideHeight = jQuery('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

jQuery('#slider').css({ width: slideWidth, height: slideHeight });

jQuery('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

jQuery('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    jQuery('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        jQuery('#slider ul li:last-child').prependTo('#slider ul');
        jQuery('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        jQuery('#slider ul li:first-child').appendTo('#slider ul');
        jQuery('#slider ul').css('left', '');
    });
};

jQuery('a.control_prev').click(function () {
    moveLeft();
});

jQuery('a.control_next').click(function () {
    moveRight();
});

});

Le CSS devra être modifié en fonction de la taille de votre tableau, de la mise en page, etc., mais il devrait suffire à vous aider à démarrer :-)

3
junkrig