<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  <script src="../../../../download/jsviews.min.js"></script>
  <script src="../../../sample-viewer.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
  <script src="../../../../download/sample-tag-controls/jsviews-jqueryui-widgets.min.js"></script>
  <link href="../demos.css" rel="stylesheet" />
</head>
<body>
<style>
  .slider {width: 358px; margin-bottom: 15px;}
  .sliderpanel {position: absolute; left: 420px; top: 70px;}
  span.resize {color: #ff6a00; font-style: italic; border: 1px solid #ff6a00; margin: -1px;}
  table.outer td.resize {color: #ff6a00; font-style: italic; border: 1px solid #ff6a00; margin: -1px;}
  span.box {display: inline-block;}
  .box {padding: 14px;}
  .box.l {border-left: 1px solid #bbb;}
  .box.t {border-top: 1px solid #bbb; padding: 14px;}
  div.outer {border: 1px solid #bbb; display: inline-block;}
  table.outer {border-collapse: collapse; border: none; margin-top: 10px;}
  table.outer td {border: 1px solid #bbb; padding: 0;}
  .bottom {position: absolute; top: 354px;}
</style>

<script id="pageTmpl" type="text/x-jsrender">

<h4>Grid with spans</h4>

<div class="outer"><div><span class="box resize"
  data-link="{resizable width=w1 height=h1 _minWidth=53 _minHeight=19 _maxWidth=118 _maxHeight=93}">Resize!
</span><span class="box l" data-link="css-width{:280-2*w1} css-height{:h1}">center
</span><span class="box l" data-link="css-width{:w1} css-height{:h1}">right
</span></div><span class="box t" data-link="css-width{:w1} css-height{:200-2*h1}">left
</span><span class="box l t" data-link="css-width{:280-2*w1} css-height{:200-2*h1}">center
</span><span class="box l t" data-link="css-width{:w1} css-height{:200-2*h1}">right
</span><div><span class="box t" data-link="css-width{:w1} css-height{:h1}">left
</span><span class="box l t" data-link="css-width{:280-2*w1} css-height{:h1}">center
</span><span class="box l t" data-link="css-width{:w1} css-height{:h1}">right
</span></div></div><br/>

<div class="bottom">
<h4>Grid with table (reduced scale)</h4>

<table class="outer"><tbody>
  <tr>
  <td class="resize" data-link="{resizable width=w1 height=h1 convert='reduce' convertBack='increase'
    _minWidth=53*scale _minHeight=19*scale _maxWidth=118*scale _maxHeight=93*scale}"></td><td
 data-link="css-width{scale:280-2*w1}"></td><td data-link="css-width{scale:w1}"></td></tr>
  <tr>
  <td data-link="css-height{scale:200-2*h1}"></td><td></td><td></td></tr>
  <tr>
  <td data-link="css-height{scale:h1}"></td><td></td><td></td></tr>
</tbody></table>
</div>

<div class="sliderpanel">
<h4>Width:</h4>
{^{slider w1 _range="min" _min=53 _max=118 class="slider"/}}
{^{spinner w1 _min=53 _max=118 width=90 convert="rnd" convertBack="toNum" class="spinner"/}}
<h4>Height:</h4>
{^{slider h1 _range="min" _min=19 _max=90 class="slider"/}}
{^{spinner h1 _min=19 _max=90 width=90 convert="rnd" convertBack="toNum" class="spinner"/}}
</div>
</script>

<div id="page"></div>
<!--<script src="grid2.js"></script> <!--uncomment for testing as standalone page-->
</body>
</html>
