본문 바로가기

프로그램312

[plugin] jQuery Cookie 쿠키값을 읽고, 쓰고, 삭제할 수 있는 단순하고 가벼운 jQuery plugin 이다. 설치다운로드한 jquery.cookie.js 파일을 사이트의 /js 디렉토리에 저장했다면 아래와 같이 코드를 넣어준다. 아래 코드는 jQuery library를 소스상에 포함시킨 후에 추가해야 한다. 사용법$.cookie(the_cookie , the_value , 쿠키옵션);the_cookie : 쿠키명the_value : 쿠키값 1. 세션쿠키 생성$.cookie('the_cookie', 'the_value'); 2. 생성일로부터 7일후에 만료되는 쿠키를 생성$.cookie('the_cookie', 'the_value', { expires: 7 }); 3. 경로가 사이트 루트이고, 생성일로부터 7일후에 만료되는 쿠키.. 2014. 4. 5.
체크박스 또는 라디오 버튼의 체크여부 변경하기 jQuery 로 체크박스 또는 라디오버튼의 체크여부를 결정하기 위해서 .attr() 메소드를 이용해 왔다. 어느 순간 이 값이 정확히 설정이 안된다면 jQuery의 버전을 체크해 보자. jQuery 1.6 이상부터는 기존 .attr()메소드가 하던 역할을 .attr()과 .prop() 두가지로 나누어 졌다. 만약 .attr()을 이용해서 체크여부를 결정하는 코드가 정상적으로 동작하지 않는다면 .prop() 메소드를 이용해 보자. 정상적으로 잘 동작할 것이다. $('#checkbox').attr('checked', true); ==> $('#checkbox').prop('checked', true); 2014. 4. 2.
hover 메소드를 이용해서 메뉴 on, off를 구현 $('.menu_item').each(function(){ }클래스 속성값으로 menu_item 을 갖는 각각의 객체에 대해서 파라미터로 전달된 콜백함수를 수행한다. 여기서는 메뉴를 구성하는 태그들이 클래스 속성 값으로 menu_item 를 갖는다. var a = $(this); 선택한 객체(DOM)를 jQuery 개체로 변환해서 변수 a 에 반환한다. var img = a.find('img');현재 객체 안에서 이미지 객체를 찾아서 반환한다. var src_off = img.attr('src');이미지 객체의 속성값 src의 값을 변수 src_off 에 반환한다. 변수 src_off 값으로는 차례대로 '/images/menu1_off.png', /images/menu2_off.png', '/images.. 2014. 4. 1.
화면 이동시에 레이어가 따라다니게 하기 아래 소스는 스크롤 이벤트가 발생할 때, box 레이어를 화면상 최 상단에 1초후에 이동시킨다. 애니메이션 효과 없이 바로 이동 시키기를 원하면 1000 대신 0을 넣는다. //내용 표시 box 레이어의 위치를 화면 상단에서 일정한 위치 아래 두고 싶으면 계산된 pos 값이 원하는 높이값을 더해준다. 2014. 3. 31.
[CSS3] box-shadow 를 이용해서 박스 테두리에 그림자 효과를 주자 가로세로 400px 의 한얀색 박스를 만든 후에 테두리에 투명도가 0.8인 검은색 그림자 효과를 준다. box-show : x축, y축, 그림자 두께, 그림자 색상, [그림자 방향] 그림자 방향에 값이 없으면 그림자는 바깥쪽으로 향한다. 안쪽으로 향하게 하고 싶으면 inset 을 추가한다. 그림자 효과를 안쪽으로 표현하고 싶으면 색상 뒤에 inset 을 추가해 준다. box-shadow:0 5px 20px rgba(0, 0, 0, 0.8) inset; * 지원 브라우저 크롬4+, 파이어폭스4+, 사파리3.1+, IE9+, 오페라10.5+, 안드로이드2.1+, iOS 3.2+ 2014. 3. 30.
다른 프레임에 있는 객채 참조하는 방법 여러개의 프레임으로 나누어져 있는 상태에서 다른 프레임에 있는 객채를 화면에 나타나게 하는 소스는 다음과 같다. $('#객채ID', top.프레임ID.document).show(); 2014. 3. 26.
[CSS3] border-radius 를 이용해서 박스 모서리를 둥글게 만들자 바탕색이 회색인 가로세로 400px 짜리 레이어를 만들고 4곳의 모서리를 둥글게 나타내는 소스이다. border-radius 의 값이 클수록 원형에 가까워 진다. //박스를 구성하는 내용 표시 * 지원 브라우저크롬6+, 파이어폭스4+, 사파리5+, IE9+, 오페라10.5+, 안드로이드2.1+, iOS 3.1+ 2014. 3. 24.

티스토리툴바