'자바스크립트'에 해당되는 글 3건

  1. 2010.05.25 [jQuery] jQuery를 이용한 사이드메뉴
  2. 2010.05.24 [jQuery] jQuery를 이용한 레이어 팝업 2
  3. 2010.05.24 [javascript] location 객체 설명

[jQuery] jQuery를 이용한 사이드메뉴

웹/DOM 2010. 5. 25. 11:31
jQuery를 사용하여 동적 메뉴를 만들어보았습니다. 나라디자인의 포스트를 참고하여 약간의 수정을 통해 제작하였습니다. 상위메뉴를 클릭하면 하위메뉴가 미끄러져 나옵니다. 이런 간단한 애니메이션이 제공되니 이제는 꼭 플래시를 사용하지 않아도 될 것 같다는 생각이 드네요.

아직은 완벽하지 않지만 사용하면서 약간 수정을 해준다면 정말 유용하게 쓰일 수 있을것 같네요.


저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[jQuery] jQuery 와 Flash, 두가지 메뉴의 모션 비교  (0) 2010.06.29
[jQuery] jQuery를 이용한 트리구조 만들기  (0) 2010.06.28
[jQuery] jQuery를 이용한 레이어 팝업  (2) 2010.05.24
[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
Posted by 나의시점
,

[jQuery] jQuery를 이용한 레이어 팝업

웹/DOM 2010. 5. 24. 17:34
jQuery를 이용하여 레이어 팝업을 작업해 보았습니다. 접근성에는 약간 안맞는 것 같지만 여러모로 쓸모는 많은 것 같습니다. 뜨는 창을 position:absolute; 와 left:50%; top:50%; 를 이용하여 가운데 배치하였고 jQuery를 이용하여 앨리먼트의 높이와 넓이를 가져와서 컨텐츠의 크기가 어떻게 되어도 항상 가운데에 위치하게 작업하였습니다. 다만 안쪽에 들어오는 컨텐츠에 width 값을 고정을 준다면 더 안정적으로 돌아갈 것 같습니다.

jQuery의 fadeIn() 과 fadeOut() 을 이용하여 좀더 예쁘게 꾸며보았습니다.


저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[jQuery] jQuery를 이용한 트리구조 만들기  (0) 2010.06.28
[jQuery] jQuery를 이용한 사이드메뉴  (0) 2010.05.25
[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
[jQuery] jQuery를 이용한 메뉴  (0) 2010.05.10
Posted by 나의시점
,

[javascript] location 객체 설명

웹/DOM 2010. 5. 24. 11:58
location 객체는 현재 문서의 URL과 관련된 정보를 가지고 있습니다. location 객체는 window 객체의 하위 객체지만 window 객첵를 생략하고 사용할 수 있습니다. 혹시 프레임을 사용된 경우에는 최상위 프레임 문서의 URL만 참조할 수 있고, 하위 프레임의 문서들은 Frames 객체를 이용합니다.

기본형태는 이렇습니다.

location.속성 혹은 메소드
location.속성 = 지정값;

location 객체의 속성

 속성 설명
href
  페이지의 URL 전체 정보를 반환합니다. URL을 지정하여 페이지를 이동할 수도 있습니다.
protocol
  : (콜론)을 포함하는 http 나 ftp 등의 프로토콜 정보를 반환합니다.
 hostname  호스트의 이름과 포트번호를 반환합니다.
 pathname  URL 경로부분의 정보를 반환합니다.
 port  포트번호를 반환합니다.
 search  ? (물음표) 이후의 값을 불러옵니다. 파라미터
 hash  지정한 앵커를 설정한 곳으로 이동하거나 앵커 이름을 반환합니다.

location 객체의 메소드

 메소드 설명
reload()
  Reflash 합니다.
replace()
  현재 URL을 지정한 URL로 바꾸고 이전페이지로 돌아갈 수 없게 합니다.


간단한 사용예로 reflash 버튼을 만들어보면 이렇습니다.

<a href="javascript:location.reload();">새로고침</a>

저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[jQuery] jQuery를 이용한 사이드메뉴  (0) 2010.05.25
[jQuery] jQuery를 이용한 레이어 팝업  (2) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
[jQuery] jQuery를 이용한 메뉴  (0) 2010.05.10
[jQuery] jQuery를 이용한 최근게시물보기(Latest) v1.0  (0) 2010.05.10
Posted by 나의시점
,

티스토리툴바