AngularJS의 부트스트랩을 사용하여 tab 메뉴의 ui를 구현하는 경우 만약 disabled 시키는 방법입니다. 쉽게 생각하기를 disabled 속성을 주면되지 않을까라 생각할 수 있으나 실제로는 동작하지 않습니다. 만약 아래 태그가 있다고 가정해보겠습니다.# uibtab 메뉴의 disabled 적용하는 방법먼저 예제를 적용하기 위한 html 코드입니다. 해당 html에 uib-tab이 사용되었습니다.<uib-tabset active="active"> <uib-tab index="0" heading="Menu 1"> <span>Content 1</span> </uib-tab> <uib-tab index="1" heading="Menu 2"> <span>Content 2</span> </uib-tab></uib-tabset>여기에 아래와 같이 uib-tab 태그에 disable를 아래처럼 적용합니다. 이때 값으로 true를 넣습니다.<uib-tab disable
2017-10-13 07:40:47부트스트랩(Bootstrap)을 사용하여 모달창을 만드는 경우 세로정렬하는 방법에 대하여 알아봅니다. 부트스트랩 창을 띄우면 위쪽 영역에 모달창이 나타납니다. 이를 세로방향의 가운데로 위치시키는 방법입니다.만약 모달창의 id 값이 myModal이라면 아래와 같이 css style을 설정합니다.<div id="#myModal" class="modal fade"> Vertical align for bootstrap modal.</div>여기서 위 태그 영역의 height의 절반 만큼 margin-top의 마이너스 값을 설정하도록 합니다. 그리고 top을 사용하여 50%를 적용합니다. 정확히 가운데 위치하려면 모달창 크기의 1/2 만큼을 margin-top에서 빼주는 것이 가장 중요합니다. 즉, 콘텐츠의 높이가 100px인 경우 -50px;이 필요합니다.#myModal { top: 50%; margin-top: -50px;}이제 모달창은 세로정렬되어 나타나게됩니다.
2017-06-07 21:37:06AngularJS 부트스트랩에서 uibCollapse를 사용하는 방법에 대하여 알아봅니다.# uibCollapse 알아보기uib-collapse는 선택한 요소 엘리먼트가 열리고 닫히면서 보이고 안보이는 것을 토글처럼 반복합니다. 이는 어코디언 방식처럼 동작하죠.uib-collapse 디렉티브에 값을 추가하여 사용합니다. 기본값으로 false가 설정되어있으며 true인 경우에 안보이는 상태가 됩니다.# uibCollapse 예제보기아래는 간단한 예제코드입니다. 시간을 클릭하여 재설정하고자 할때 해당 UI를 사용하면 매우 편리합니다.<div ng-click="isEditing = true">{{ hour }}</div><div uib-collapse="!isEditing"> <input type="number" ng-model="hour" /></div>위의 시간이 나타나는 엘리먼트 요소를 클릭시 isEditing이 true가 되어 그 아래의 시간을 변경하는 압
2017-05-19 17:17:47Bootstrap의 datepicker를 사용하여 날짜를 선택할때 만약 선택가능한 날짜를 지정하려면 어떻게할까요?우선 최소 및 최대 날짜가 필요하고 아래 방법처럼 두 가지의 방법이 존재합니다.1. html 코드에 설정값을 추가2. datepicker config에 최소 최대값 추가# html 코드에 추가하는 방법<input type="text" datepicker-popup="" ng-model="dt" is-open="opened" min="'2017-03-01'" max="'2017-03-30'" datepicker-options="dateOptions" /># 설정된 Datepicker Config를 수정하는 방법dateOptions = { allowInvalid: true, maxDate: new Date(),
2017-03-30 11:17:35웹개발 특히 어드민이나 또는 관리자앱과 같은 cms등의 개발에 많이 사용되는 라이브러리로 부트스트랩 그리고 시맨틱 UI를 빼놓을 수 없을 것입니다. 이 둘의 각각의 장단점을 알고싶습니다.# 부트스트랩 장점부트스트랩이 더 많은 기능을 가지고 있고 관련 레퍼런스나 도큐먼트 찾기도 훨씬 용이합니다.# 시맨틱ui 장점시맨틱UI는 컬럼이 14분의 1을 기준으로 하여 12분의1을 기준으로 하는 부트스트랩보다 그리드 영역, 컬럼을 구현할 때 좀 더 쉽게 사용이 가능합니다.
2017-03-16 22:59:46부트스트랩(UI Bootstrap)을 사용하여 드랍다운(Dropdown) 박스 형태의 인터페이스를 구현한 뒤 메뉴를 선택할 경우 드랍다운 메뉴가 닫혀야하나 닫히지 않는 경우가 발생할 수 있습니다.이 문제는 ng-click이 설정된 경우 드랍다운 메뉴를 컨트롤하는 이벤트 보다 먼저 실행되어 나타나는 이슈로 이를 해결하기 위한 방법으로 아래와 같은 방법이 존재합니다.# dropdown-toggle 디렉티브 추가하기아래와 같이 해당하는 a 태그에 추가로 dropdown-toggle 디렉티브(속성)를 추가하는 방법이 가장 간단한 방법입니다. <li> <a dropdown-toggle ng-click="event01">Menu 01</a> <a dropdown-toggle ng-click="event02">Menu 02</a></li>dropdown-toggle 디렉티브를 추가하는 방법이 가장 간단하고 쉬운 방법입니다. 또 다른 방법으로 a 태그를 다른 태그(Ex. span)로 변경하는
2017-02-22 17:38:28
