일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- #솔루션
- #뉴스
- #이미지
- #동영상
- 홈페이지
- #홈페이지제작
- #쇼핑몰
- CGIMALL
- 쇼핑몰
- happycgi
- #image
- #cgimall
- 게시판
- #jQuery
- #업종별
- #해피CGI
- #홈페이지
- 솔루션
- 웹솔루션
- #웹솔루션
- 해피씨지아이
- jquery
- javascript
- #happycgi
- php
- CSS
- 사이트제작
- 해피CGI
- 홈페이지제작
- #CSS
- Today
- Total
목록#tab (8)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
index.html 파일을 웹브라우저로 열어보면 아래와 같은 데모를 확인을 해볼수 있습니다. 흑백사진으로 사람이 표시가 되고 사진을 클릭을 해보면 사진이 컬러로 변경이 됩니다. 사진 아래의 설명문구가 해당 사진에 맞는 내용으로 조절이 됩니다. 다른 사진을 선택해보면 아래의 그림 처럼 선택한 사진과, 해당 사진에 대한 설명문구로 변경이 됩니다. 사용하는 방법은 아래와 같습니다. 탭메뉴를 이용해서, 각 탭에 해당하는 컨텐츠를 표시하는 기능의 유형입니다. 회원관리, 신청자관리, 접수자관리 등등 각각의 평가를 하거나, 각각의 평가점수를 보기 위한 화면을 구성할 때에 활용을 해볼만 한 UI인 듯 하네요. 꼭 사람이 아니더라도, 사과, 바나나, 수박 등의 과일 사진이나, 강아지, 고양이, 거북이 등의 동물 등등의 ..
다운로드 받은 압축파일을 해제한후, index.html 파일을 웹브라우저로 열어서 보면 샘플을 확인하는게 가능합니다. 위 그림과 같은 탭메뉴를 화면에 표시해줍니다. 웹페이지에 탭메뉴를 구현해 둔 자바스크립트와, HTML소스코드는 예제가 매우 많지만, 탭메뉴의 개수, 적용되는 효과, 작동하는 이벤트 등의 이유로 다소 이용하기에 복잡한게 많습니다. 이 프로그램은 비교적 간단하게 사용할 수가 있어서 유용할것 같네요. 1. 위와 같이 ul, li 태그로 탭메뉴 부분을 만들고, 각 탭에 연결되는 컨텐츠를 코딩합니다. 2. jquery 와 tabs.js 가 로딩되도록 위 태그를 넣어줍니다. 3. ul 태그에 지정한 id 를 이용해서 위와 같은 스크립트로 탭메뉴를 활성화 시킬수 있습니다. 심플한 만큼 다양한 기..
css 와 jquery 를 이용하여 아래와 같이 탭 메뉴를 생성할 수 있습니다. 소스는 아래와 같습니다. 스타일과 jquery 를 같이 사용하였습니다. 소스는 첨부파일에 html 파일을 zip 파일로 압축하여 첨부해두었으니 다운받아 사용하시기 바랍니다.
css 소스를 이용하여 탭메뉴를 만들 수 있습니다. 아래소스만으로 위 이미지와 같은 탭 메뉴 출력을 할 수 있습니다. 탭을 라디오 버튼으로 만들어주고 스타일을 씌워 탭메뉴 모양으로 만들어줍니다. 탭메뉴에 마우스를 올렸을때 글자색은 label:hover 안에 있는 color 값을 수정해주시면 됩니다.
HTML, CSS, JQuery 를 이용하여 브라우저 인터페이스의 탭메뉴를 만드는 소스를 소개 합니다. 신규 탭 생성 + 드래그 앤 드랍 기능이 탑재되어 있습니다. 기본 CSS 는 2개로 구성 되어 있습니다. 호출하는 Script 는 3개가 필요 합니다. 본문은 아래의 HTML 로 구성되어 있습니다. html 에서는 탭메뉴의 디자인과 파비콘들을 설정할 수 있습니다. 초기화 스크립트 및 탭메뉴 추가 스크립트는 아래처럼 구성되어 있습니다. 스크립트로는 탭메뉴의 크기, 신규 탭생성, 스킨 변경 등을 할 수 있습니다. 재미 있는 탭메뉴인데요. 바로 사용하기에는 부족한 감이 조금 있습니다. 조금 가공해서 사용하신다면 재미 있는 인터페이스를 구성할 수 있을듯 합니다. ^^
안녕하세요 HappyCGI 입니다. ^^ 얼마전 소스포지에서 누군가 만들어 놓은 탭 기능 괜찮은게 있어서 알려 드립니다. ^^ 해당 소스의 라이센스는 GNU General Public License version 2.0 (GPLv2), MIT License 를 따르고 있습니다. 예제 링크를 참고해 보시면 쉽게 설명이 되어 있습니다. 그래도 혹시 모르시는 분들을 위해서 참고 소스 코드 입니다. Number - - Text - - 위와 같이 코드를 이용해 보시면 쉽게 감이 오실꺼에요. ^^
* License - MIT License * jQuery Responsive Tabs 설명 - javascript/jQuery 사용 - 데스크톱 / 태블릿 /모바일 에 css사용 - 탭이벤트에 대한 콜백이벤트 제공 - URL 해시로 탭을 열 수 있음 - 탭접기 기능 - 탭사용 중지 기능 - 크로스 브라우저 호환성(IE7+, Chrome, Firefox, Safari 및 Opera) * 사용방법 - jQuery 최소 1.7.0 버전 이상필요 - 첨부된 압축파일을 압축을 해제하여 js,css 폴더안에 jquery.responsiveTabs.js , jquery-2.1.0.min.js , responsive-tabs.css 파일을 호출 - HTML 마크업 사용 jquery 함수를 사용하여 선택한 요소에 대한..