web sprit

다음과 같이 jQuery로 select box 를 제어할 수 있는 방법을 정리해 보았습니다.참고 바랍니다. 선택된 값(value) 가져오기1234 $("#selectBox option:selected").val();$("select[name=name]").val(); Colored by Color Scriptercs 선택된 내용 가져오기123 $("#selectBox option:selected").text(); Colored by Color Scriptercs 선택된 옵션의 갯수 구하기123 $('#selectbox option').size(); cs 선택된 옵션의 index 값 구하기123 $('#selectbox option').index($('#selectbox option:selected'));..

select 를 꾸미는 건 쉽지 않다. 브라우저마다 css 값도 다르게 적용되어 지고 제한되는 부분도 많이 때문에 원하는 디자인 변경이 불가한 경우도 있다. 기존의 select 를 꾸며주는 플러그인들이 많지만 접근성을 해치는 방식으로 꾸며주기 다반사다. select를 커스터마이징 해줄 때 다음과같이 이용한다. HTML1234567891011 선택해 주세요 선택해 주세요 선택1 선택2 선택3 선택4 Colored by Color Scriptercs CSS12345.select-script{position:relative; width:200px; height:40px; line-height:40px; border:1px solid #606976; border-radius:4px; text-transform:..

그대로의 radio 버튼을 사용하여도 되지만작업을 하다보면 커스터마이징 해야하는 경우가 있다. 그때를 대비해서 미리 준비해 봅니다. 아래와 같이 적용해 줍니다. HTML12345678910111213141516171819 라디오버튼1 라디오버튼2 라디오버튼3 Colored by Color Scriptercs CSS12345678.radio-list{width:300px; margin:20px auto 0;}.radio-list li{position:relative; font-size:13px; color:#000; border:1px solid #e2e2e2; background:#fbfbfb; padding:6px 10px; margin-bottom:-1px;}.radio-list li.active{f..

jQuery 다운 URL : http://jquery.com/ 위 URL을 들어가시면 jQuery 사이트가 나옵니다. 메뉴에서 Download 를 눌러 들어 갑니다. 실제 적용하는 소스는 압축버전을 사용하시고 그에대한 내용을 보시고 싶으시다면 코드정리버전으로 확인하시면 되겠습니다. jQuery 1.x & jQuery 2.x 차이점 jQuery 1.x 버전은 하위 브라우저의 호환성을 가지고 있으나 jQuery 2.x 버전은 IE6/7/8 을 지원하지 않습니다. 간단하게 장·단점을 따지자면 jQuery 1.x 버전이 호환성을 보장하는 대신 그만큼 jQuery 2.x 버전보다 소스량 즉 용량이 큽니다. 그렇다면 당연히 jQuery 2.x 버전은 용량이 작겠죠. 불러오는 속도도 차이가 날겁니다. 체감적으로 많은..

1.Bootstrap 3 Datepicker 2. jQuery UI

select 폼을 꾸며주는 jQuery Selectric 플러그인 일반적으로 select는 css로 원하는 디자인을 꾸며줄 수 없습니다.플러그인을 이용하여 보다 쉽고 tab 접근성에도 유용한 플러그인을 소개하려 합니다.http://lcdsantos.github.io/jQuery-Selectric/index.html 위 URL을 들어가면 Selectric 플러그인 홈페이지가 나옵니다. 자세한 내용을 확인하려면 홈페이지를 참조하여 주시기 바랍니다.첨부파일을 첨부하며 첨부파일의 내용은 아래와 같습니다.* head태그 안에 추가 123456789 $(function(){ $('.tric_01').selectric(); });Colored by Color Scriptercs * html 추가12345678 Sel..

Fotorama 플러그인은 누구나 손쉽게 사용할 수 있는이미지 롤링 플러그인 이다.특히 모바일 롤링 대응이 아주 잘 되어있다. http://www.fotorama.io/ 위 링크로 들어가면 Fotorama의 사용 방법그리고 옵션등을 확인 할 수 있다. 사용방법은 아래와 같이 소스를 구성한다. 1234567891011 Colored by Color Scriptercs 주로 내가 사용하는 옵션이다. 그리고 아래와 같은 경우는 이미지에 링크를 걸고 싶을떄 사용할 수 있는 방법이다.적극 추천한다. 123456789101112131415161718192021222324252627 .fotorama__html{position:relative !important;} .fotorama__html div{height:1..

input에 대한 설명을 input안에 설명으로 연하게 써져있고 그 부분에 클릭을 하거나 글씨를 입력할경우 사라지는 방식으로 input에 대한 설명을 표현한 것을 본적이 있을것이다. placeholder 플러그인(ie7 ~ 8도 적용 가능) placehoder라는 속성은 원래 HTML5태그 속성으로 최근 브라우져가 아닌 낮은 브라우져에서는 적용이 안된다.위의 플러그인을 사용하면 낮은 브라우져 ie7 ~ 8도 모두 적용되어 화면에 나온다.

어느 블로그나 홈페이지를 들어가면 상단 영역이라던가 상단 메뉴부분이 스크롤시 상단에 붙어 있는듯한 UI를 많이 보았을 것입니다. 그 기능은 CSS 와 j-Query 를 이용하여 구현해 보았습니다. 제가 만든 소스를 그대로 사용하시기 보다는 좀더 보안하여 응용형식으로 사용되었음 좋을 것 같습니다. HTML1234567891011121314151617 상단 배녀 영역 상단 고정 영역 하단 contents 영역 Colored by Color Scriptercs CSS1234567891011.wrap{}.wrap div{width:100%; text-align:center; font-size:20px; font-weight:700; color:#fff;}.top_bar_fix{position:fixed; top..

상단메뉴나 퀵메뉴를 눌럿을때 앵커설정으로 인해서 앵커의 아이디 값으로 이동하는것을 경험해 보았을 것이다.단순히 앵커의 기능으로 갑자기 정적으로 위치이동 보다는 앵커를 눌럿을때 동적으로 보다 부드럽게 이동하는 제이쿼리를 소개하려 한다. 앵커이동 제이쿼리 - *제이쿼리 부분123456789Colored by Color Scriptercs *CSS 부분12345.red{height:1000px; background:red;} .blue{height:1000px; background:blue;}.yellow{height:1000px; background:yellow;}.start_zone{background:#e7e7e7;}.start_zone a{font-size:20px; color:#666; font-we..