Tabstops by Style / Class / Data / Javascript

by knoxg

HTML

<html>
<head>
<title>Creating tabstops via style / class / data / javascript</title>
<script src="https://cdn.jsdelivr.net/gh/randomnoun/[email protected]/js/jquery.tabstops.js"></script>
</head>

<body>
<div class="paper">
<h1>Creating tabstops via style / class / data / javascript</h1>
<label>Visible tabs:</label><input type="checkbox">
</div>

<div class="paper">
<p>The tabstops in these paragraphs are set via <b>style attributes</b> to
<code>14cm dotted right;</code>
</p>
<div class="toc1">
<p style="--tabstops: 14cm dotted right;">Foreward	1</p>
<p style="--tabstops: 14cm dotted right;">Introduction	3</p>
<p style="--tabstops: 14cm dotted right;">Table of Contents	5</p>
<p style="--tabstops: 14cm dotted right;">Prologue	7</p>
<p style="--tabstops: 14cm dotted right; padding-left: 20px;">Chapter 1	9</p>
<p style="--tabstops: 14cm dotted right; padding-left: 20px;">Chapter 2	109</p>
<p style="--tabstops: 14cm dotted right; padding-left: 20px;">Chapter 3	357</p>
<p style="--tabstops: 14cm dotted right;">Epilogue	777</p>
<p style="--tabstops: 14cm dotted right;">Appendices</p>
<p style="--tabstops: 14cm dotted right; padding-left: 20px;">Appendix I	1, 012</p>
<p style="--tabstops: 14cm dotted right; padding-left: 20px;">Appendix II	1, 015</p>
<p style="--tabstops: 14cm dotted right; padding-left: 20px;">Index	1, 234</p>
</div></div>

<div class="paper">
<p>The tabstops in these paragraphs are set via <b>data attributes</b> to
<code>14cm dotted right;</code>
</p>
<div class="toc2">
<p data-tabstops="14cm dotted right">Foreward	1</p>
<p data-tabstops="14cm dotted right">Introduction	3</p>
<p data-tabstops="14cm dotted right">Table of Contents	5</p>
<p data-tabstops="14cm dotted right">Prologue	7</p>
<p data-tabstops="14cm dotted right" style="padding-left: 20px;">Chapter 1	9</p>
<p data-tabstops="14cm dotted right" style="padding-left: 20px;">Chapter 2	109</p>
<p data-tabstops="14cm dotted right" style="padding-left: 20px;">Chapter 3	357</p>
<p...

CSS

h1, p {
  margin: 0;
}

.toc3 p {
  --tabstops: 14cm dotted right;
}

.toc3 p.level-2 {
  padding-left: 20px;
}

body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
  font-size: 12pt;
  padding: 5px 50px;
}

.paper {
  background-color: #fff;
  border: solid 1px #ccc;
  padding: 10px;
  margin-bottom: 10px;
  min-width: 23cm;
}

span.tab.visible::before {
  content: 'TAB';
  position: absolute;
  font-family: Arial, sans-serif;
  background-color: #eee;
  border: solid 1px #aaa;
  border-radius: 3px;
  font-size: 8pt;
  color: #aaa;
  padding: 2px;
}

JavaScript

$(document).ready(function() {
  
  // initialise tabstops
  $('.toc1 p, .toc2 p, .toc3 p').tabstops();

  // initialise toc 3 tabstops by javascript
  $('.toc4 p').tabstops( 'refresh', {
  	tabstops: [
    	{ position: '14cm', leader: 'dotted', align: 'right' }
    ]
  });

  // visible tabs
  $('input[type="checkbox"]').on('input', function(e) {
    $('span.tab').toggleClass('visible', $(e.target).prop('checked'));
  });


});