JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.0/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.1.4/dist/sheetrock.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lrsjng.jquery-qrcode/0.14.0/jquery-qrcode.min.js"></script>
<button type="button" class="mobile_emulator_display" id="ui_mobile_emulator">모바일 에뮬레이터</button>
<table class="datatable"></table>
<div class="mobile_emulator">
<iframe src="/hanatour/uiguide/mobile/board_2.html" frameborder="0" scrolling="yes" name="myiframe" id="myiframe"></iframe>
</div>
<p>https://larsjung.de/jquery-qrcode/</p>

CSS

table {
    width: 100%;
    border-collapse: collapse;
    border-top: 3px solid #000;
    font-size: 12px;
}
th, td {
    border: 1px solid #000;
}
tr.disabled td {
  background: #eee;
}
table .screen_id a{display:block}
table .screen_id a:hover{position:relative;display:block;text-decoration:underline}
table .screen_id a:hover canvas{position:absolute;top:26px;left:-10px;z-index:10;border:3px solid #000;background: #fff}

.mobile_emulator_display {position:absolute;top:10px;left:7px;}
.mobile_emulator {position:fixed;top:50%;right:20px;background:#fff;border:1px solid #666;border-radius:30px;background:#fff;transform:translateY(-50%);background:#000;display:none;}
.mobile_emulator .mobile_emulator_inner {padding:40px 28px 30px 28px;border-radius:30px;}
.mobile_emulator iframe {width:360px;height:666px;border:1px solid #666;background:#fff;}

.mobile_emulator_on .state_board {margin-right:450px;}
.mobile_emulator_on .mobile_emulator {display:block}
.mobile_emulator_on .planner,
.mobile_emulator_on .date_01,
.mobile_emulator_on .comment,
.mobile_emulator_on .ui_dev
 {display:none;}


 .emulator a {display:block;}
 
 .dataTables_filter {text-align:right;padding-bottom:10px;}

JavaScript

// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/13bHbrh4cjnChodL8T3otMhFrRDYUNgduoywxr3EopRc/edit#gid=0';

// Compile the Handlebars template for HR leaders.


// Load top five HR leaders.
$('.datatable').sheetrock({
  url: mySpreadsheet,
  callback : makeSortable
});

function makeSortable(error, options, response) {
  // Target is not a jQuery object, so we need to call jQuery
  // explicitly.
  $(options.user.target).DataTable({
  	"paging": false,
    "ordering": false,
    "info": false,
    "autoWidth": false,
    //"dom": 'Bfrtip',
    "buttons": [
        'colvis'
    ],
    "columnDefs": [
     	{
          "render": function (data, type, row) {
            return '<a href="'+ row[5] + data +'.html" target="_blank" class="screen_link">' + data + '</a>';
          },
          "targets": [6]
        },
        {
          "render": function (data, type, row) {
            return '<a href="'+ row[5] + row[6] +'.html" target="myiframe" >Mobile</a>';
          },
          "targets": [7]
        },
        {
          "visible": false,
          "targets": [5,10,12]
        }
     ],
    "columns": [
			//{ "width": "20%" },
      {className: "depth1"},
      {className: "depth2"},
      {className: "depth3"},
      {className: "depth4"},
      {className: "depth5"},
      null,
      {className: "screen_id"},
      {className: "emulator"},
      {className: "planner"},
      {className: "date_01"},
      {className: "comment"},
      {className: "ui_dev"},
			null
		 ],
     "createdRow": function (row, data, index) {
        $(row).addClass(data[12]);
     }
  });
}

$(document).ready(function() {
    $('body table').on('mouseover', 'a.screen_link', function() {
        $(this).addClass('active');
        $(this).qrcode({
            render: 'canvas',
            size: 110,
            text: this.href
        });
    });

    $('body table').on('mouseleave', 'a', function() {
        $(this).removeClass('active');
   ...