Étiquette : data attributes

[jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.

16/12/2015 / admin

Attention : dans le code donné en exemple, vous trouverez dans certains cas des mentions à des variables de type ${repeat/entry/index}. Ce type de variables est utilisé dans le CMS RBS Change (versions 3.x). A moins que vous ne souhaitiez mettre à profit ce code au sein d’un menu Change, il ne faudra pas tenir compte de ces variables et, le cas échéant, les supprimer ou les remplacer par des variables qui fonctionnent dans le CMS que vous utilisez.

Problème : une navigation en vue Desktop, même sous forme de menu déroulant ou géant, laisse parfois la possibilité d’accéder à des pages en cliquant sur les entrées de premier niveau. Typiquement, lorsque cette même navigation est affichée en vue Mobile, l’activation de ces mêmes entrées de premier niveau doit ouvrir un second niveau et pas rediriger vers des pages (sinon la navigation Mobile ne permettra jamais d’atteindre les sous-niveaux).

Solution (avec le composant Collapse de Bootstrap 3 et enquire.js) :

Nous allons tout d’abord nous assurer que les différents classes, IDs et data-attributs nécessaires au fonctionnement du composant Collapse sont en place sur les éléments impliqués.

Sur le lien qui active la partie masquée à afficher :

class= »link collapsed »
role= »button »
data-toggle= »collapse »
href= »${descendantUrl} »
aria-expanded= »false »
aria-controls= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Attention : en plus des attributs requis nativement par le composant Collapse, nous allons rajouter deux attributs data-mobile-target et data-desktop-target dont les valeurs correspondent respectivement à l’ID de l’élément masqué à activer et à l’URL de la page sur laquelle l’utilisateur sera redirigé à l’activation du lien.

data-mobile-target= »collapseShelfSubMenuLevel2${repeat/entry/index} »
data-desktop-target= »${descendantUrl} »

Exemple finalisé :

<a tal:condition="descendantUrl"
  class="link collapsed"
  role="button"
  data-toggle="collapse"
  data-mobile-target="collapseShelfSubMenuLevel2${repeat/entry/index}"
  data-desktop-target="${descendantUrl}"
  href="${descendantUrl}"
  aria-expanded="false"
  aria-controls="collapseShelfSubMenuLevel2${repeat/entry/index}">${entry/getLabelAsHtml}</a>

<a tal:condition="descendantUrl"

class="link collapsed"

role="button"

data-toggle="collapse"

data-mobile-target="collapseShelfSubMenuLevel2${repeat/entry/index}"

data-desktop-target="${descendantUrl}"

href="${descendantUrl}"

aria-expanded="false"

aria-controls="collapseShelfSubMenuLevel2${repeat/entry/index}">${entry/getLabelAsHtml}</a>

Sur l’élément à afficher/masquer :

class= »level${parent/getChildrenLevel} collapse »
id= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Exemple finalisé :

<ul class="level${parent/getChildrenLevel} collapse"
  tal:define="columns php:array_chunk(children, columnItemsLimit)"
  tal:repeat="column columns"
  id="collapseShelfSubMenuLevel2${repeat/entry/index}">

<ul class="level${parent/getChildrenLevel} collapse"

tal:define="columns php:array_chunk(children, columnItemsLimit)"

tal:repeat="column columns"

id="collapseShelfSubMenuLevel2${repeat/entry/index}">

La partie jQuery (en utilisant enquire.js pour simuler des media-queries en JS – très pratique) :

La méthode enquire.register définit que le code qui se trouvera dans match sera exécuté dans le cadre du breakpoint énoncé. Hors breakpoint, c’est le code qui se trouve dans unmatch qui est exécuté.

Les deux attributs data-mobile-target et data-desktop-target ajoutés plus haut dans notre template vont nous servir à switcher les valeurs des attributs href des liens des entrées de premier niveau.

Lorsque le viewport utilisé est dans le scope des 767px minimum (vue Mobile), au clic sur une entrée de premier niveau la redirection vers la page ne s’effectue pas. On affiche les entrées de second niveau à la place.

Lorsque le viewport utilisé est hors scope (768px ou plus, vue Desktop), au clic sur une entrée de premier niveau la redirection vers la page s’effectue. Les entrées de second niveau (sous-menu déroulant ou géant) doivent s’afficher au survol (à vous de gérer ça).

Exemple finalisé de notre code jQuery :

(function($){
  $(document).ready(function(){
    enquire.register("screen and (max-width: 767px)", {
      match : function() {
        $('.main-menu > .level1 > li > a').on('click', function(e){
          $(this).attr('href', '#' + $(this).attr('data-mobile-target'));
        });
      },
      unmatch : function() {
        $('.main-menu > .level1 > li > a').each(function(e){
          $(this).attr('href', $(this).attr('data-desktop-target'));
        });
      }
    });
  });
})(jQuery);

(function($){

$(document).ready(function(){

enquire.register("screen and (max-width: 767px)", {

match : function() {

$('.main-menu > .level1 > li > a').on('click', function(e){

$(this).attr('href', '#' + $(this).attr('data-mobile-target'));

});

unmatch : function() {

$('.main-menu > .level1 > li > a').each(function(e){

$(this).attr('href', $(this).attr('data-desktop-target'));

});

}

});

})(jQuery);

Pour finir – Markup purement HTML (rendu dans le navigateur) :

Vue Mobile, second niveau fermé :

<div class="main-menu">
  <ul class="level1">
    <li>
      <a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="#collapseShelfSubMenuLevel20" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>
      <ul id="collapseShelfSubMenuLevel20" class="level2 collapse" aria-expanded="false" style="height: 0px;">

<li>

<a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="#collapseShelfSubMenuLevel20" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>

Vue Desktop, second niveau fermé :

<div class="main-menu">
  <ul class="level1">
    <li class=" store-menu no-highlight">
      <a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="http://mon-site.fr/fr/bijoux/par-famille" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>
      <ul id="collapseShelfSubMenuLevel20" class="level2 collapse">

<a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="http://mon-site.fr/fr/bijoux/par-famille" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>

On note l’action de notre petit script jQuery par la différence de la valeur affichée par l’attribut href de notre élément <a class="link collapsed"></a>. En vue Mobile, c’est la valeur du data-attribut data-mobile-target="collapseShelfSubMenuLevel20" qui est active. En vue Desktop, celle de data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille".

[jQuery] Au clic, agir sur plusieurs éléments d’une même page qui portent un data-attribute similaire

17/12/2014 / admin

Dans l’exemple ci-dessous, nous avons une liste d’éléments soumise à des critères de tri (Nom, Pertinence, Nouveauté…) par ordre ascendant et descendant. La barre de tri est présente deux fois dans la page, en haut et en bas de la liste d’éléments.
J’ai logiquement souhaité qu’au clic sur un pictogramme ‘ascendant’/’descendant’ se trouvant dans l’une des deux barres de tri, le switch de puce soit automatiquement répercuté dans l’autre barre de tri.

        <div class="sort-criterias">
            <script type="text/javascript">
                (function( $ ){
                  $(function(){
                    // switching between desc and asc sort order
                    $('.sort-order').each(function(){
                        $('a.sort-desc').hide();
                    });

                    $('.sort-order a').on('click', function(){
                        var sortDirection = $(this).attr('data-sort');
                        $('a[data-sort='+ sortDirection +']').hide().siblings().show();
                    });
                  });
                })(jQuery);
            </script>
            <span class="criteria">
                <a class="criteria-label" href="#">Name</a> <span class="sort-order"><a class="sort-desc" data-sort="desc-1" href="#">&dtrif;</a><a class="sort-asc" data-sort="asc-1" href="#">&utrif;</a></span>
            </span>
            <span class="criteria">
                <a class="criteria-label" href="#">Relevance</a> <span class="sort-order"><a class="sort-desc" data-sort="desc-2" href="#">&dtrif;</a><a class="sort-asc" data-sort="asc-2" href="#">&utrif;</a></span>
            </span>
            <span class="criteria">
                <a class="criteria-label" href="#">New</a> <span class="sort-order"><a class="sort-desc" data-sort="desc-3" href="#">&dtrif;</a><a class="sort-asc" data-sort="asc-3" href="#">&utrif;</a></span>
            </span>
        </div>

(function( $ ){

$(function(){

// switching between desc and asc sort order

$('.sort-order').each(function(){

$('a.sort-desc').hide();

});

$('.sort-order a').on('click', function(){

var sortDirection = $(this).attr('data-sort');

$('a[data-sort='+ sortDirection +']').hide().siblings().show();

});

})(jQuery);

</script>

<a class="criteria-label" href="#">Name</a> <span class="sort-order"><a class="sort-desc" data-sort="desc-1" href="#">&dtrif;</a><a class="sort-asc" data-sort="asc-1" href="#">&utrif;</a></span>

</span>

<a class="criteria-label" href="#">Relevance</a> <span class="sort-order"><a class="sort-desc" data-sort="desc-2" href="#">&dtrif;</a><a class="sort-asc" data-sort="asc-2" href="#">&utrif;</a></span>

</span>

<a class="criteria-label" href="#">New</a> <span class="sort-order"><a class="sort-desc" data-sort="desc-3" href="#">&dtrif;</a><a class="sort-asc" data-sort="asc-3" href="#">&utrif;</a></span>

</span>

</div>

[CSS] Des tableaux responsives en full CSS

09/06/2014 / admin

Ressources en ligne :

Responsive Data Tables sur CSS Tricks. Un tableau qui permute les en-têtes sur la 1ère colonne en mobile.
Attention, ne fonctionnera PAS pour des sites multilingues, à moins peut-être de passer le contenu localisé (texte inclus dans la CSS pour cet exemple) via du JS peut-être?
CSS Tricks – Responsive Data Table Roundup
Demo of Tablesaw : A group of plugins for responsive tables.
Responsive table with vertical and horizontal headers, 2 (voir le CodePen)
Responsive Tables (Zurb) avec du JS.

Deux exemples maison pour un tableau comparatif :

Tableau comparatif dont les éléments à comparer deviennent horizontalement scrollables en vue mobile

Simulation JSfiddle.net (avec code source propre), demo.

Tableau comparatif dont les éléments à comparer se désolidarisent pour s’empiler en vue mobile

Nouveau: une version plus flexible basée sur Flexbox (sources core). https://jsfiddle.net/frontenddeveloper/ay5v30p5/

…et la gueule de cette version Flexbox sous IE11:

Simulation JSfiddle.net (avec code source propre). Attention : la partie commentée du code CSS ne semble pas adaptée à notre exemple.

En utilisant display: inline-block; sur les rangées et white-space: nowrap; sur le corps du tableau :

Source et simulation (Flip Scroll) : http://elvery.net/demo/responsive-tables/#flip-scroll.

<table>
<thead>
<tr>
<th>Code</th>
<th>Company</th>
<th class="numeric">Price</th>
<th class="numeric">Change</th>
<th class="numeric">Change %</th>
<th class="numeric">Open</th>
<th class="numeric">High</th>
<th class="numeric">Low</th>
<th class="numeric">Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>AAC</td>
<td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
<td class="numeric">$1.38</td>
<td class="numeric">-0.01</td>
<td class="numeric">-0.36%</td>
<td class="numeric">$1.39</td>
<td class="numeric">$1.39</td>
<td class="numeric">$1.38</td>
<td class="numeric">9,395</td>
</tr>
</tbody>
</table>

<table>

<thead>

<tr>

<th>Company</th>

<th class="numeric">Price</th>

<th class="numeric">Change</th>

<th class="numeric">Change %</th>

<th class="numeric">Volume</th>

</tr>

</thead>

<tbody>

<tr>

<td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>

</tr>

</tbody>

</table>

@media only screen and (max-width: 800px) {
#flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
#flip-scroll * html .cf { zoom: 1; }
#flip-scroll *:first-child+html .cf { zoom: 1; }
#flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }
 
#flip-scroll th,
#flip-scroll td { margin: 0; vertical-align: top; }
#flip-scroll th { text-align: left; }
#flip-scroll table { display: block; position: relative; width: 100%; }
#flip-scroll thead { display: block; float: left; }
#flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
#flip-scroll thead tr { display: block; }
#flip-scroll th { display: block; text-align: right; }
#flip-scroll tbody tr { display: inline-block; vertical-align: top; }
#flip-scroll td { display: block; min-height: 1.25em; text-align: left; }
 
 
/* sort out borders */
 
#flip-scroll th { border-bottom: 0; border-left: 0; }
#flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
#flip-scroll tbody tr { border-left: 1px solid #babcbf; }
#flip-scroll th:last-child,
#flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
}

@media only screen and (max-width: 800px) {

#flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

#flip-scroll * html .cf { zoom: 1; }

#flip-scroll *:first-child+html .cf { zoom: 1; }

#flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }

#flip-scroll th,

#flip-scroll td { margin: 0; vertical-align: top; }

#flip-scroll th { text-align: left; }

#flip-scroll table { display: block; position: relative; width: 100%; }

#flip-scroll thead { display: block; float: left; }

#flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }

#flip-scroll thead tr { display: block; }

#flip-scroll th { display: block; text-align: right; }

#flip-scroll tbody tr { display: inline-block; vertical-align: top; }

#flip-scroll td { display: block; min-height: 1.25em; text-align: left; }

/* sort out borders */

#flip-scroll th { border-bottom: 0; border-left: 0; }

#flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }

#flip-scroll tbody tr { border-left: 1px solid #babcbf; }

#flip-scroll th:last-child,

#flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }

}

Récupérer les hauteurs (en px) de chaque cellule d’en-tête, les stocker dans un tableau et les réattribuer aux cellules correspondantes dans le corps du tableau.

    var listHeight = $.map($('.thead-first-row').children('th:not(.large)'), function(val){
      return $(val).outerHeight();
    });
    // console.log(listHeight);

    $('.table-flip-scroll tbody tr:not(.sort)').each(function(){
      var count = 0;
      $(this).children('td').each(function(){
        $(this).css('height', listHeight[count ++] + 'px');
      });
    });

var listHeight = $.map($('.thead-first-row').children('th:not(.large)'), function(val){

return $(val).outerHeight();

});

// console.log(listHeight);

$('.table-flip-scroll tbody tr:not(.sort)').each(function(){

var count = 0;

$(this).children('td').each(function(){

$(this).css('height', listHeight[count ++] + 'px');

});

Version SASS de flip-scroll

/* flip-scroll table */
.flip-scroll {
  .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
  * html .cf { zoom: 1; }
  *:first-child+html .cf { zoom: 1; }

  table { width: 100%; border-collapse: collapse; border-spacing: 0; }
  th,
  td { margin: 0; vertical-align: top; }
  th { text-align: left; }

  table { display: block; position: relative; width: 100%; }
  thead { display: block; float: left; }
  tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
  thead tr { display: block; }
  th { display: block; text-align: right; }
  tbody tr { display: inline-block; vertical-align: top; }
  td { display: block; min-height: 1.25em; text-align: left; }

  /* sort out borders */
  th { border-bottom: 0; border-left: 0; }
  td { border-left: 0; border-right: 0; border-bottom: 0; }
  tbody tr { border-left: 1px solid #babcbf; }
  th:last-child,
  td:last-child { border-bottom: 1px solid #babcbf; }
}

/* flip-scroll table */

.flip-scroll {

.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

* html .cf { zoom: 1; }

*:first-child+html .cf { zoom: 1; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }

th,

td { margin: 0; vertical-align: top; }

th { text-align: left; }

table { display: block; position: relative; width: 100%; }

thead { display: block; float: left; }

tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }

thead tr { display: block; }

th { display: block; text-align: right; }

tbody tr { display: inline-block; vertical-align: top; }

td { display: block; min-height: 1.25em; text-align: left; }

/* sort out borders */

th { border-bottom: 0; border-left: 0; }

td { border-left: 0; border-right: 0; border-bottom: 0; }

tbody tr { border-left: 1px solid #babcbf; }

th:last-child,

td:last-child { border-bottom: 1px solid #babcbf; }

}

Version SASS de No More Tables

Source : http://elvery.net/demo/responsive-tables/#no-more-tables.

Attention : ajouter un !important à td { padding-left: 50%; } si vous utilisez Twitter Bootstrap pour styler vos tableaux.

Ajout d’une classe .ignore à placer sur les <td /> qui ne doivent pas faire l’objet d’une transformation. La rangée du tableau transformé n’aura alors pas de libellé (en-tête).

/* no-more-tables table */
.no-more-tables {
  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid $table-border-color;
    margin-bottom: $padding-base-vertical;
  }

  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid $table-border-color;
    position: relative;
    padding-left: 50% !important;
    white-space: normal;
    text-align:left;

    &.ignore {
      padding-left: $table-cell-padding !important;
    }
  }

  td:not(.ignore):before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: $table-cell-padding;
    left: $table-cell-padding;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
  }

  /* Label the data */
  td:not(.ignore):before {
    content: attr(data-title) ' :';
    color: $brand-quaternary;
  }
}

@media (min-width: $screen-xs1) {
  .no-more-tables {
    td {
      padding-left: 30% !important;
    }
    td:not(.ignore):before {
      width: 25%;
    }
  }
}

/* no-more-tables table */

.no-more-tables {

/* Force table to not be like tables anymore */

table,

thead,

tbody,

th,

td,

tr {

display: block;

}

/* Hide table headers (but not display: none;, for accessibility) */

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

}

tr {

border: 1px solid $table-border-color;

margin-bottom: $padding-base-vertical;

}

td {

/* Behave like a "row" */

border: none;

border-bottom: 1px solid $table-border-color;

position: relative;

padding-left: 50% !important;

white-space: normal;

text-align:left;

&.ignore {

padding-left: $table-cell-padding !important;

}

td:not(.ignore):before {

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

top: $table-cell-padding;

left: $table-cell-padding;

width: 45%;

padding-right: 10px;

white-space: nowrap;

text-align:left;

font-weight: bold;

}

/* Label the data */

td:not(.ignore):before {

content: attr(data-title) ' :';

color: $brand-quaternary;

}

@media (min-width: $screen-xs1) {

.no-more-tables {

td {

padding-left: 30% !important;

}

td:not(.ignore):before {

width: 25%;

}

En utilisant display: block; et les data attributes HTML5 :

Source : http://codepen.io/geoffyuen/pen/FCBEg.

Simulation : http://jsfiddle.net/frontenddeveloper/gf7R3/.

<table class="rwd-table">
  <tr>
    <th>Movie Title</th>
    <th>Genre</th>
    <th>Year</th>
    <th>Gross</th>
  </tr>
  <tr>
    <td data-th="Movie Title">Star Wars</td>
    <td data-th="Genre">Adventure, Sci-fi</td>
    <td data-th="Year">1977</td>
    <td data-th="Gross">$460,935,665</td>
  </tr>
  <tr>
    <td data-th="Movie Title">Howard The Duck</td>
    <td data-th="Genre">"Comedy"</td>
    <td data-th="Year">1986</td>
    <td data-th="Gross">$16,295,774</td>
  </tr>
  <tr>
    <td data-th="Movie Title">American Graffiti</td>
    <td data-th="Genre">Comedy, Drama</td>
    <td data-th="Year">1973</td>
    <td data-th="Gross">$115,000,000</td>
  </tr>
</table>

<tr>

<th>Movie Title</th>

<th>Genre</th>

<th>Gross</th>

</tr>

<tr>

<td data-th="Genre">Adventure, Sci-fi</td>

</tr>

<tr>

<td data-th="Movie Title">Howard The Duck</td>

<td data-th="Genre">"Comedy"</td>

</tr>

<tr>

<td data-th="Movie Title">American Graffiti</td>

<td data-th="Genre">Comedy, Drama</td>

</tr>

</table>

.rwd-table {
  min-width: 300px;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:first-child {
  padding-top: .5em;
}
.rwd-table td:last-child {
  padding-bottom: .5em;
}
.rwd-table td:before {
  content: attr(data-th) ": ";
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 480px) {
  .rwd-table td:before {
    display: none;
  }
}
.rwd-table th, .rwd-table td {
  text-align: left;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0;
  }
}

.rwd-table {

min-width: 300px;

}

.rwd-table th {

display: none;

}

.rwd-table td {

display: block;

}

.rwd-table td:first-child {

padding-top: .5em;

}

.rwd-table td:last-child {

padding-bottom: .5em;

}

.rwd-table td:before {

content: attr(data-th) ": ";

width: 6.5em;

display: inline-block;

}

@media (min-width: 480px) {

.rwd-table td:before {

display: none;

}

.rwd-table th, .rwd-table td {

text-align: left;

}

@media (min-width: 480px) {

.rwd-table th, .rwd-table td {

display: table-cell;

padding: .25em .5em;

}

.rwd-table th:first-child, .rwd-table td:first-child {

padding-left: 0;

}

.rwd-table th:last-child, .rwd-table td:last-child {

padding-right: 0;

}

Mixin SASS

@mixin rwd-table() {
  min-width: 300px;
  th {
    display: none;
  }
  td {
    display: block;
    padding: 5px 10px !important;
  }
  td:first-child {
    // padding-top: .5em;
  }
  td:last-child {
    // padding-bottom: .5em;
  }
  td:before {
    // content: attr(data-th) ": ";
    content: attr(data-th);
    width: 6.5em;
    display: inline-block;
    font-family: $site-bold-font-family;
    color: $site-font-color-darker;
  }
  @media (min-width: $screen-sm-min) {
    td:before {
      display: none;
    }
  }
  th, td {
    text-align: left;
  }
  @media (min-width: $screen-sm-min) {
    th, td {
      display: table-cell;
      // padding: .25em .5em;
    }
    th:first-child, td:first-child {
      padding-left: 0;
    }
    th:last-child, td:last-child {
      padding-right: 0;
    }
  }
}

@mixin rwd-table() {

min-width: 300px;

th {

display: none;

}

td {

display: block;

padding: 5px 10px !important;

}

td:first-child {

// padding-top: .5em;

}

td:last-child {

// padding-bottom: .5em;

}

td:before {

// content: attr(data-th) ": ";

content: attr(data-th);

width: 6.5em;

display: inline-block;

font-family: $site-bold-font-family;

color: $site-font-color-darker;

}

@media (min-width: $screen-sm-min) {

td:before {

display: none;

}

th, td {

text-align: left;

}

@media (min-width: $screen-sm-min) {

th, td {

display: table-cell;

// padding: .25em .5em;

}

th:first-child, td:first-child {

padding-left: 0;

}

th:last-child, td:last-child {

padding-right: 0;

}

Articles récents

Catégories

Archives

Méta

Étiquette : data attributes

[jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.

Solution (avec le composant Collapse de Bootstrap 3 et enquire.js) :

Sur le lien qui active la partie masquée à afficher :

Sur l’élément à afficher/masquer :

La partie jQuery (en utilisant enquire.js pour simuler des media-queries en JS – très pratique) :

Pour finir – Markup purement HTML (rendu dans le navigateur) :

[jQuery] Au clic, agir sur plusieurs éléments d’une même page qui portent un data-attribute similaire

[CSS] Des tableaux responsives en full CSS

Ressources en ligne :

Deux exemples maison pour un tableau comparatif :

Tableau comparatif dont les éléments à comparer deviennent horizontalement scrollables en vue mobile

Tableau comparatif dont les éléments à comparer se désolidarisent pour s’empiler en vue mobile

En utilisant display: inline-block; sur les rangées et white-space: nowrap; sur le corps du tableau :

Récupérer les hauteurs (en px) de chaque cellule d’en-tête, les stocker dans un tableau et les réattribuer aux cellules correspondantes dans le corps du tableau.

Version SASS de flip-scroll

Version SASS de No More Tables

En utilisant display: block; et les data attributes HTML5 :

Mixin SASS