Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <table id="md-table" class="ui-selectable"><tr><td data-index="[0,0]" class="ui-selectee"></td><td data-index="[0,1]" class="ui-selectee"></td><td data-index="[0,2]" class="ui-selectee"></td><td data-index="[0,3]" class="ui-selectee"></td><td data-index="[0,4]" class="ui-selectee"></td><td data-index="[0,5]" class="ui-selectee"></td><td data-index="[0,6]" class="ui-selectee"></td><td data-index="[0,7]" class="ui-selectee"></td><td data-index="[0,8]" class="ui-selectee"></td><td data-index="[0,9]" class="ui-selectee"></td></tr><tr><td data-index="[1,0]" class="ui-selectee"></td><td data-index="[1,1]" class="ui-selectee"></td><td data-index="[1,2]" class="ui-selectee"></td><td data-index="[1,3]" class="ui-selectee"></td><td data-index="[1,4]" class="ui-selectee"></td><td data-index="[1,5]" class="ui-selectee"></td><td data-index="[1,6]" class="ui-selectee"></td><td data-index="[1,7]" class="ui-selectee"></td><td data-index="[1,8]" class="ui-selectee"></td><td data-index="[1,9]" class="ui-selectee"></td></tr><tr><td data-index="[2,0]" class="ui-selectee"></td><td data-index="[2,1]" class="ui-selectee"></td><td data-index="[2,2]" class="ui-selectee"></td><td data-index="[2,3]" class="ui-selectee"></td><td data-index="[2,4]" class="ui-selectee"></td><td data-index="[2,5]" class="ui-selectee"></td><td data-index="[2,6]" class="ui-selectee"></td><td data-index="[2,7]" class="ui-selectee"></td><td data-index="[2,8]" class="ui-selectee"></td><td data-index="[2,9]" class="ui-selectee"></td></tr><tr><td data-index="[3,0]" class="ui-selectee"></td><td data-index="[3,1]" class="ui-selectee"></td><td data-index="[3,2]" class="ui-selectee"></td><td data-index="[3,3]" class="ui-selectee"></td><td data-index="[3,4]" class="ui-selectee"></td><td data-index="[3,5]" class="ui-selectee"></td><td data-index="[3,6]" class="ui-selectee"></td><td data-index="[3,7]" class="ui-selectee"></td><td data-index="[3,8]" class="ui-selectee"></td><td data-index="[3,9]" class="ui-selectee"></td></tr><tr><td data-index="[4,0]" class="ui-selectee"></td><td data-index="[4,1]" class="ui-selectee"></td><td data-index="[4,2]" class="ui-selectee"></td><td data-index="[4,3]" class="ui-selectee"></td><td data-index="[4,4]" class="ui-selectee"></td><td data-index="[4,5]" class="ui-selectee"></td><td data-index="[4,6]" class="ui-selectee"></td><td data-index="[4,7]" class="ui-selectee"></td><td data-index="[4,8]" class="ui-selectee"></td><td data-index="[4,9]" class="ui-selectee"></td></tr><tr><td data-index="[5,0]" class="ui-selectee"></td><td data-index="[5,1]" class="ui-selectee"></td><td data-index="[5,2]" class="ui-selectee"></td><td data-index="[5,3]" class="ui-selectee"></td><td data-index="[5,4]" class="ui-selectee"></td><td data-index="[5,5]" class="ui-selectee"></td><td data-index="[5,6]" class="ui-selectee"></td><td data-index="[5,7]" class="ui-selectee"></td><td data-index="[5,8]" class="ui-selectee"></td><td data-index="[5,9]" class="ui-selectee"></td></tr><tr><td data-index="[6,0]" class="ui-selectee"></td><td data-index="[6,1]" class="ui-selectee"></td><td data-index="[6,2]" class="ui-selectee"></td><td data-index="[6,3]" class="ui-selectee"></td><td data-index="[6,4]" class="ui-selectee"></td><td data-index="[6,5]" class="ui-selectee"></td><td data-index="[6,6]" class="ui-selectee"></td><td data-index="[6,7]" class="ui-selectee"></td><td data-index="[6,8]" class="ui-selectee"></td><td data-index="[6,9]" class="ui-selectee"></td></tr><tr><td data-index="[7,0]" class="ui-selectee"></td><td data-index="[7,1]" class="ui-selectee"></td><td data-index="[7,2]" class="ui-selectee"></td><td data-index="[7,3]" class="ui-selectee"></td><td data-index="[7,4]" class="ui-selectee"></td><td data-index="[7,5]" class="ui-selectee"></td><td data-index="[7,6]" class="ui-selectee"></td><td data-index="[7,7]" class="ui-selectee"></td><td data-index="[7,8]" class="ui-selectee"></td><td data-index="[7,9]" class="ui-selectee"></td></tr><tr><td data-index="[8,0]" class="ui-selectee"></td><td data-index="[8,1]" class="ui-selectee"></td><td data-index="[8,2]" class="ui-selectee"></td><td data-index="[8,3]" class="ui-selectee"></td><td data-index="[8,4]" class="ui-selectee"></td><td data-index="[8,5]" class="ui-selectee"></td><td data-index="[8,6]" class="ui-selectee"></td><td data-index="[8,7]" class="ui-selectee"></td><td data-index="[8,8]" class="ui-selectee"></td><td data-index="[8,9]" class="ui-selectee"></td></tr><tr><td data-index="[9,0]" class="ui-selectee"></td><td data-index="[9,1]" class="ui-selectee"></td><td data-index="[9,2]" class="ui-selectee"></td><td data-index="[9,3]" class="ui-selectee"></td><td data-index="[9,4]" class="ui-selectee"></td><td data-index="[9,5]" class="ui-selectee"></td><td data-index="[9,6]" class="ui-selectee"></td><td data-index="[9,7]" class="ui-selectee"></td><td data-index="[9,8]" class="ui-selectee"></td><td data-index="[9,9]" class="ui-selectee"></td></tr></table><div id="dimension"></div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { margin: 0; } table { border-collapse: collapse; } td { min-width: 30px; height: 30px; border: 1px solid rgb(190, 190, 190); } td.ui-selecting { background-color: #f5dea3 !important; /*box-shadow: 0 0 0 1px #8e8650;*/ border: 1px solid #0000ff !important; } td.active { background-color: green; opacity: 0.9; border: 1px solid rgb(103, 123, 105); } #dimension { background-color: lightblue; padding: 5px; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 1); position: relative; }
CSS
Autoformát
CSS reset
Až na konci
$(document) .ready(function () { var $md_table = $("table"); var cell_count = 10; // Count of clickable cells $("table") .click(function (event) { if (!event.ctrlKey && !event.shiftKey) { alert('Press:\nSHIFT for adding\nCTRL for subtracting') } }) .selectable({ filter: "td", selecting: function( event, ui ) { var selected_cells_count = $("td.ui-selecting").length; var skip = false; var dimension_x = 0; var dimension_y = 0; var last_selected_cell; for (var i = cell_count-1; i >= 0; i--) { for (var j = cell_count-1; j >= 0; j--) { var current_cell = $("td[data-index='["+ i +"," + j + "]']"); if (current_cell.hasClass("ui-selecting")) { last_selected_cell = [i, j]; skip = true; dimension_x += 1 } else if (dimension_x > 0) { console.log("-inner- " [i,j]); skip = true; break; } } if (skip) { console.log("-outer- " + [i]); break; } } dimension_y = selected_cells_count / dimension_x; console.log("count: " + selected_cells_count); console.log("x: " + dimension_x); console.log("y: " + dimension_y); console.log("---"); $("#dimension").text(dimension_x + " x " + dimension_y) .css({ left: 35*last_selected_cell[0] + "px", top: "-" + 35*last_selected_cell[1] + "px" }); }, selected: function (event, ui) { if (event.ctrlKey || event.shiftKey) { if (event.shiftKey) { $(ui.selected).addClass('active'); } else if (event.ctrlKey) { $(ui.selected).removeClass('active'); } } } }); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>