본문 바로가기

프로그래밍 언어349

[bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 클릭해서 버튼명 변경하기 data 속성을 data-complete-text=”Complete!”으로 변경하는 소스입니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 라디오 버튼 부트스트랩으로 라디오버튼을 버튼처럼 만들 수 있습니다. 라디오를 그룹으로 만들고 .btn-group 선택자가 있는 div에 data-toggle=”buttons” 속성을 추가합니다. 처음부터 눌린 상태로 만들려면 label에 .active 선택자를 추가하고 input에 checked 속성을 추가합니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 체크박스 버튼 부트스트랩으로 체크박스를 버튼처럼 만들 수 있습니다. 체크박스를 그룹으로 만들고 .btn-group 선택자가 있는 div에 data-toggle=”buttons” 속성을 추가합니다. 처음부터 눌린 상태로 만들려면 label에 .active 선택자를 추가하고 input에 checked 속성을 추가합니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 싱글 토글 버튼 버튼의 누름 상태와 해제 상태, 두 가지의 상태를 만들 수 있습니다. 자바스크립트로 작동하므로 data-toggle=”button” 속성을 포함시킵니다. 처음부터 미리 눌러진 상태를 만들려면 .active 선택자를 추가하고 aria-pressed=”true”로 변경합니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 버튼 상태 제어하기 버튼을 클릭하면 “Loading…”이라는 메시지가 버튼에 나타납니다. 데이터 속성으로 data-loading-text=”Loading…”을 추가하고 크로스 브라우저 호환성을 위해 autocomplete=”off” 속성을 추가합니다. Loading state 자바스크립트는 다음과 같은 형태로 사용합니다. 주석 부분에 실제 작업이 이뤄지는 코드가 들어가고 종료되면 리셋됩니다.$(‘#myButton’).on(‘click’, function () { var $btn = $(this).button(‘loading‘); // business logic… $btn.button(‘reset‘); }); 여기서는 테스트를 위해 다음의 코드를 사용합니다. 클릭하면 로딩 텍스트가 나타나고 3초가 지나면 원래의 버튼 텍스트가.. 2016. 2. 8.
[bootstrap] 부트스트랩 – 알림메시지(Alert message) data-dismiss=”alert” 속성을 사용하면 자바스크립트를 추가할 필요는 없으며 메서드는 .alert(“close”); 하나만 있습니다. 그리고, 이벤트는 두 가지가 있습니다.$(“.alert”).on(“close.bs.alert”, function() { alert(“이벤트 실행됨”); }); close.bs.alert : 알림 메시지 박스가 닫히기 전에 이벤트가 실행됩니다.close.bs.alert : 알림 메시지 박스가 닫힌 후에 이벤트가 실행됩니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 팝오버(Popover) 팝오버는 툴팁과 비슷한 기능을 하지만 좀더 큰 규모로 팝업창에 가깝습니다. 따라서 툴팁의 사용법과 같고 주로 버튼이나 메뉴의 상세한 추가 설명에 사용됩니다. 콘텐츠가 전혀 없으면 아무것도 나타나지 않습니다. 팝오버는 제목 부분과 콘텐츠 부분으로 나뉘며 제목은 title, 콘텐츠는 data-content 속성에 입력한 내용이 출력됩니다. 둘 중 어느 하나만 입력해도 해당 내용만 나타납니다. 자바스크립트로 작동되므로 data-toggle=”popover”가 반드시 필요합니다. 위치는 data-placement 속성에 입력되는 등 대부분이 툴팁과 같지만 팝오버는 마우스를 오버했을 때 나타나는 것이 기본입니다. Popover on left 자바스크립트로 다음과 같이 활성화합니다.$(“[data-toggle=’p.. 2016. 2. 8.
[쿼리문/오라클] 토드(Toad)에서 바로 실행가능한 변수선언 쿼리문 변수를 선언해서 쿼리를 실행해야 할 경우가 있는데요. 반복적인 작업을 완료하고 select를 한다던지... 여러가지 경우가 있을 텐데요. DECLARE 변수선언 BEGIN 실행구문 END; 이런식으로 DECLARE BEGIN ~ END 구문으로 프로그래밍을 하여 결과를 확인할 수 있습니다. 아래 샘플을 참고하시면 됩니다. DECLARE V_NUM INTEGER := 0; V_TARGET_DATE DATE; BEGIN LOOP V_TARGET_DATE := SYSDATE - V_NUM; DELETE FROM USE_STATUS_DAY WHERE CREATE_DATE >= TO_DATE(TO_CHAR(SYSDATE - V_NUM, 'YYYYMMDD')) AND CREATE_DATE < TO_DATE(TO_C.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 툴팁(Tooltips), 말풍선 툴팁은 링크에 마우스를 올리면 메시지가 나오는 말풍선을 말합니다. 기본적으로 모든 웹브라우저에서 태그에 title 속성을 적용하면 마우스 오른쪽 아래에 말풍선이 나타나지만 부트스트랩은 보다 세련된 말풍선 효과를 나타낼 수 있습니다. 툴팁은 예외적으로 자바스크립트로 활성화해야 하며 data-toggle=”tooltip” 속성도 포함해야 합니다. 타겟팅을 위해 선택자를 지정해야 하는데 모든 툴팁에는 이 데이터 속성이 있어서 이를 대상으로 선택자를 정합니다. 툴팁으로 나타날 문구는 title 속성이나 data-original-title 속성에 값으로 지정합니다.you probably 자바스크립트는 다음과 같이 설정합니다.$(“[data-toggle=’tooltip’]“).tooltip(); 툴팁의 위치는 da.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 탭(Tabs)에 이벤트 기능 추가 data 속성을 사용할 때 탭 목록의 각 a 태그에 data-toggle=”tab”을 추가했습니다. 자바스크립트를 사용할 때도 모든 a 태그에 대해서 .tab(‘show’) 메서드를 사용합니다. e.preventDefault();는 클릭했을 때 상단으로 이동하는 것을 방지합니다.$(“#myTab a”).click(function(e) { e.preventDefault(); $(this).tab(“show”); }); 특정 탭을 활성화하기 위해 .active 선택자를 사용합니다. 하지만, 이를 무시하고 다른 탭을 활성화하고 콘텐츠를 나타나게 하려면 자바스크립트를 사용합니다. 아래와 같이 여러가지 선택자를 사용할 수 있습니다.$(“#myTab a[href=’#profile’]”).tab(“show“); //.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 스크롤스파이(Scrollspy) 웹페이지에서 스크롤할 때 같은 페이지에 있는 콘텐츠의 내용과 연결된 메뉴를 표시하는 기능입니다. 또한, 해당 메뉴를 클릭하면 콘텐츠로 이동합니다. 메뉴 부분은 냅바(navbar)를 사용해야 하며 우선 메뉴바에 아이디 선택자(예, navbar-example)를 만들고 콘텐츠 영역에서 이 아이디를 데이터 타겟으로 정합니다. 콘텐츠 영역에는 data-spy=”scroll”을 추가하고 각 메뉴의 태그에 링크를 만드는데 이 아이디를 콘텐츠 영역의 아이디와 일치시킵니다. data-offset은 스크롤할 때 상단으로부터의 거리이며 제대로 설정하지 않으면 콘텐츠가 상단에 있더라도 메뉴가 하이라이트 되지 않습니다. 설정하지 않으면 기본은 10픽셀입니다. 메뉴바를 고정(fixed)으로 사용할 때는 오프셋이 작동하지 않습니.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 드롭다운(dropdown) 다른 플러그인처럼 data- 속성과 자바스크립트로 구현할 수 있으며 모바일 기기에서는 드롭다운을 열면 메뉴 이외의 영역을 탭해도 드롭다운이 닫히게 .doropdown-backdrop 클래스가 추가됩니다. 따라서, 하나의 드롭다운이 열린 상태에서 다른 드롭다운을 열려면 우선 빈 곳을 탭 한 후에 해야 하며 data-toggle=”dropdown” 속성은 반드시 포함해야 합니다. Dropdown … button 태그가 아닌 a 태그를 사용할 때는 링크를 표시하기 위해 href=”#”를 사용하지 않고 data-target=”#”과 사이트 도메인을 href에 추가합니다. Dropdown trigger … 자바스크립트를 이용해 드롭다운을 활성화 하려면 다음과 같은 형태로 사용합니다.$(“.dropdown-togg.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 사용자(커스텀) 모달 커스텀 data- 속성을 이용해 입력란에 데이터를 미리 입력할 수 있습니다. Open modal for @kmdo Open modal for @kfat Open modal for @ktwbootstrap 맨 아래에 다음 자바스크립트 소스를 추가하여 모달창이 열릴 때 값을 변경해 줄 수 있습니다.$(document).ready(function() { $(‘#exampleModal‘).on(‘show.bs.modal’, function (event) { var button = $(event.relatedTarget); // Button that triggered the modal var recipient = button.data(‘whatever‘); // Extract info from data-* att.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 모달(팝업창이 위에서 내려오는 구조) 크기 변경 .modal-dialog 선택자가 있는 곳에 .modal-lg 또는 .modal-sm을 추가하여 모달의 너비를 변경할 수 있습니다. 나머지 속성들은 아래 링크를 클릭하여 참조하세요. [bootstrap] 부트스트랩 – 모달(팝업창이 위에서 내려오는 구조) 2016. 2. 5.
[bootstrap] 부트스트랩 – 모달(팝업창이 위에서 내려오는 구조) 모달이란 버튼을 클릭하면 팝업창이 위에서 내려오는 구조입니다. 용도는 다양한데 로그인, 회원가입, 알림 메시지 등 여러 용도로 사용할 수 있습니다. data-toggle=“modal” : 자바스크립트에 의해 작동하므로 이 속성을 추가해야 합니다. (이 속성은 토글 역할을 합니다. 즉, 클릭하면 팝업창이 나타나고 다시 이 버튼을 클릭하면 사라집니다.) data-target=“#myModal” : 버튼을 클릭했을 때 열리는 대상 모달창의 id값을 넣어줍니다. class=“modal fade” : .modal은 포지션을 정하기 위한 것이므로 나타나는 위치를 수정하려면 이 선택자에 대해 스타일을 재설정하면 됩니다. .fade는 창이 나타날 때 페이드 효과를 주기 위한 것입니다. class=”modal-dialo.. 2016. 2. 5.

티스토리툴바