jQuery, Java Script : 인터랙티브 메트로 스타일 그리드 대시 보드 생성

Windows 8이 새로운 디자인의 첫 번째 그림을 발표 한 이후 메트로 스타일에 열광했습니다. 사람들은 좋아하고, 현대적이며, 깨끗하고, 단순하며, 모바일 장치, 특히 태블릿 장치에서 사용하기가 정말 쉽습니다.

 

jQuery, Java Script : 인터랙티브 메트로 스타일 그리드 대시 보드 생성

 

2013년에는이 메트로 스타일을 디자인에 적용하는 더 많은 웹 사이트를보기 시작하는 추세가 될 것입니다. 그러나 웹 사이트의 경우 이것은 좋은 생각입니다.이 스타일링은 다른 웹 사이트 디자인에서 작동합니다. 이 자습서에서는 메트로 스타일 대시 보드를 만들고이를 위해 gridster라는 매우 유용한 jQuery 플러그인을 사용합니다.

 

 

Gridster

Gridster를 사용하면 드래그 앤 드롭 다중 열 그리드를 만들 수 있습니다. 그리드의 모든 레이아웃은 플러그인에 의해 처리되며 각 상자가 얼마나 많은 행과 열을 펼칠지를 정의하기 만하면 됩니다. 그런 다음 단일 상자의 높이와 너비를 정의하면 플러그인이 각 상자의 크기를 계산합니다.

 

jQuery, Java Script : 인터랙티브 메트로 스타일 그리드 대시 보드 생성

 

이 jQuery 플러그인의 가장 좋은 점은 그리드 박스의 드래그 앤 드롭 기능으로 방문자가 다른 그리드 박스의 레이아웃을 완벽하게 사용자 정의 할 수 있습니다. 이것을 자바 스크립트 쿠키와 함께 사용한다면 사용자의 컴퓨터에 레이아웃을 저장하여 사이트를 방문 할 때마다 동일하게 보일 수 있습니다. 메트로 스타일 그리드를 생성하기 위해 가장 먼저해야 할 일은 아래 링크에서 무료로 Gridster를 다운로드해야 합니다.

Gridster를 사용하려면 다른 jQuery 플러그인과 마찬가지로 페이지에 포함하기 만하면 gridster 객체에 액세스 할 수 있습니다. gridster 객체 내부에는 그리드에 대한 옵션을 정의하는 곳이 있습니다. 여기에서 위젯 여백, 위젯 크기, 최소 행, 최소 열, 최대 위젯 높이, 최대 위젯 너비를 사용자 정의 할 수 있습니다. 이 옵션을 사용하는 가장 간단한 버전은 위젯 여백과 단일 위젯의 크기를 정의하는 것입니다. 그런 다음 플러그인은이 값을 사용하여 그리드 크기를 조정하여 화면에 맞도록합니다. 아래는 단일 위젯이 150px x 150px이고 상자 주위에 10px 여백이있는 그리드를 정의하는 데 사용할 수 있는 코드입니다.

 

<script src="src/jquery.gridster.js"></script>

<script type="text/javascript">
   jQuery(function(){

      jQuery(".gridster ul").gridster({
          widget_margins: [10, 10],
          widget_base_dimensions: [150, 150]
      });

  });

</script>

 

그리드 스터 자바 스크립트를 목록에 첨부하면 이제 자바 스크립트를 사용할 HTML을 만들 수 있습니다. Gridster를 사용하는 데 있어 중요한 부분은 플러그인에 위젯을 배치 할 위치와 크기를 알려주는 4 가지 속성을 정의하는 것입니다.

- data-row-위젯의 시작 행을 정의합니다.
- data-col-위젯의 시작 열을 정의합니다.
- data-sizex-위젯이 확장 될 열의 양을 정의합니다.
- data-sizey-위젯이 확장되는 행 수를 정의합니다

 

<div class="wrapper gridster">
      <ul>
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="2"></li>
            <li data-row="1" data-col="3" data-sizex="2" data-sizey="3"></li>
            <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
            <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
            <li data-row="1" data-col="7" data-sizex="1" data-sizey="1"></li>
            <li data-row="1" data-col="8" data-sizex="1" data-sizey="2"></li>
            <li data-row="2" data-col="5" data-sizex="1" data-sizey="1"></li>
            <li data-row="2" data-col="6" data-sizex="2" data-sizey="1"></li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
            <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"></li>
            <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
            <li data-row="3" data-col="6" data-sizex="3" data-sizey="1"></li>
      </ul>
</div>

 

위의 HTML은 12 개의 상자 격자를 생성합니다. 각 상자는 서로 다른 위치에 있으며 크기가 다릅니다. 그러면 메트로 스타일링 그리드가 시작됩니다. 이제 메트로 컬러를 사용하여 상자에 스타일을 지정하고 아이콘을 상자에 추가하기 만하면됩니다. 메트로 스타일링에 항상 사용되는 두 가지 색상이 있습니다. 다음 CSS를 사용하여 글꼴 색상과 배경 색상을 정의하십시오.

 

.font-blue,       .font-blue-link a         {color: #2d89ef;}
.font-blueLight,  .font-blueLight-link a    {color: #eff4ff;}
.font-blueDark,   .font-blueDark-link a     {color: #2b5797;}
.font-green,      .font-green-link a        {color: #00a300;}
.font-greenLight, .font-greenLight-link a   {color: #99b433;}
.font-greenDark,  .font-greenDark-link a    {color: #1e7145;}
.font-red,        .font-red-link a          {color: #b91d47;}
.font-yellow,     .font-yellow-link a       {color: #ffc40d;}
.font-orange,     .font-orange-link a       {color: #e3a21a;}
.font-orangeDark, .font-orangeDark-link a   {color: #da532c;}
.font-pink,       .font-pink-link a         {color: #9f00a7;}
.font-pinkDark,   .font-pinkDark-link a     {color: #7e3878;}
.font-purple,     .font-purple-link a       {color: #603cba;}
.font-darken,     .font-darken-link a       {color: #1d1d1d;}
.font-lighten,    .font-lighten-link a      {color: #d5e7ec;}
.font-white,      .font-white-link a        {color: #ffffff;}
.font-grayDark,   .font-grayDark-link a     {color: #525252;}

 

.bg-blue       {background-color: #2d89ef;}
.bg-blueLight  {background-color: #eff4ff;}
.bg-blueDark   {background-color: #2b5797;}
.bg-green      {background-color: #00a300;}
.bg-greenLight {background-color: #99b433;}
.bg-greenDark  {background-color: #1e7145;}
.bg-red        {background-color: #b91d47;}
.bg-yellow     {background-color: #ffc40d;}
.bg-orange     {background-color: #e3a21a;}
.bg-orangeDark {background-color: #da532c;}
.bg-pink       {background-color: #9f00a7;}
.bg-pinkDark   {background-color: #7e3878;}
.bg-purple     {background-color: #603cba;}
.bg-darken     {background-color: #1d1d1d;}
.bg-lighten    {background-color: #d5e7ec;}
.bg-white      {background-color: #ffffff;}
.bg-grayDark   {background-color: #525252;}

 

 

Adding Icons To Your Grid Boxes

그리드 위젯에 아이콘을 추가하기 위해 CSS : bese pseudo 클래스를 사용하여 페이지에 새 요소를 추가하고 추가하려는 각 아이콘의 배경 이미지를 배치합니다. 위젯 중간에 아이콘이 위치합니다.

 

.gridster li a:before{ 
     display: block; 
     height:50px; 
     width:100%; 
     position: absolute; 
     top:35%; 
     left:0; 
     right:0;
}
.recent:before{ content:''; background:url('img/calendar.png') no-repeat center; }
.twitter:before{ content:''; background:url('img/twitter.png') no-repeat center; }
.facebook:before{ content:''; background:url('img/facebook.png') no-repeat center; }
.about:before{ content:''; background:url('img/about.png') no-repeat center; }
.snippets:before{ content:''; background:url('img/scissors.png') no-repeat center; }
.resources:before{ content:''; background:url('img/library.png') no-repeat center; }
.googleplus:before{ content:''; background:url('img/google.png') no-repeat center; }
.contact:before{ content:''; background:url('img/forward.png') no-repeat center; }
.articles:before{ content:''; background:url('img/folder_open.png') no-repeat center; }
.tutorials:before{ content:''; background:url('img/tutorials.png') no-repeat center; }
.pinterest:before{ content:''; background:url('img/pinterest.png') no-repeat center; }
.archives:before{ content:''; background:url('img/calendar.png') no-repeat center; }

 

 

Adding Text To The Bottom Of The Box

페이지 하단에 텍스트를 추가하기 위해 CSS : after pseudo 클래스를 사용하여 위젯에 내용을 추가 할 수 있습니다. 의사 클래스를 사용하여 위젯에 컨텐츠를 추가하면 그리드 클래스에 CSS 클래스 만 정의하면 되고 아이콘과 컨텐츠가 모두 표시됩니다.

 

.gridster li a:after{ 
     position: absolute; 
     bottom: 5px; 
     left:0; 
     right:0; 
}

.recent:after{ content:'Recent Articles'; }
.twitter:after{ content:'Twitter'; }
.facebook:after{ content:'Facebook'; }
.about:after{ content:'About'; }
.snippets:after{ content:'Snippets'; }
.resources:after{ content:'Resources'; }
.googleplus:after{ content:'Google Plus'; }
.contact:after{ content:'Contact'; }
.articles:after{ content:'Articles'; }
.tutorials:after{ content:'Tutorials'; }
.pinterest:after{ content:'Pinterest'; }
.archives:after{ content:'Archives'; }

 

이것이 gridster jQuery 플러그인과 일부 메트로 스타일링을 사용하여 메트로 스타일 그리드를 만드는 데 필요한 전부입니다.