GridSatck (Test.html)

대쉬보드를 위젯형식으로 만드는 방법을 찾아보다가 좋은 소스를 발견했다.

 

https://gridstackjs.com/#

gridstack.js | Build interactive dashboards in minutes.

 

사용법

Node.js는 설치용으로만 사용한다.

GridStack.pptx

0.30MB

Test.html

<script src="./gridstack/dist/gridstack-h5.js"></script>
<link href="./gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<style type="text/css">
  .grid-stack { background: #FAFAD2; }
  .grid-stack-item-content { background-color: #18BC9C; }
</style>

<div class="grid-stack">
    <div class="grid-stack-item" gs-w="1">
        <div class="grid-stack-item-content">Item 1</div>
    </div>
    <div class="grid-stack-item" gs-w="2">
        <div class="grid-stack-item-content">Item 2 wider</div>
    </div>
    <div class="grid-stack-item" gs-w="12">
        <div class="grid-stack-item-content">Item 2 wider</div>
    </div>
</div>

<script type="text/javascript">
    
  GridStack.init();
  
</script>