'jQuery' 카테고리의 글 목록 (2 Page)

JQuery mobile

jQuery 2011. 7. 7. 14:08

브라우저 확인 : 크롬O / 사파리O / 파이어폭스X / 오페라X
모바일 확인 : 크롬O / 아이폰에서 확인은 못해봤지만 웹브라우저 사파리가 되니 되겠지...?
flip의 경우 크롬과 사파리 효과가 약간 다르다.

터치방식을 찾아야되는데....찾다보니 자꾸 엉뚱한게 딸려온다 ㅋㅋㅋ.
효과가 참 재미있다.

자세한건 이곳에...(영어 참 싫다..)
http://jquerymobile.com/

1. 아래 3개지 필요/head 안에 넣어주기.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

탭부분때문에 추가한 css

<style type="text/css">

  body, ul {margin:0; padding:0;}
  .header {overflow:hidden; margin-bottom:15px; background:#ccc;}
  .header ul {list-style:none; padding-left:80px;}
  .header li {float:left; width:80px; line-height:28px; text-align:center;}
  .header li .on {color:red}
  .content {height:200px; border:1px #ccc solid; padding:10px;}

</style>

2. html 마크업

data-role 은 JQuery mobile용 식별코드인듯.
data-role="page" div 하나당 한 페이지라고 생각하면 된다.
div에 id를 박아주고 불러오려는 페이지를 a태그 안에서 #SecondPage 로 불러주면 SecondPage id를 가진
div 페이지가 data-transition="slide" 에서 정의하고 있는 효과로 불려지게 된다.

data-transition 에는 여러가지 효과가 있는데 위에 링크해놓은곳에 들어가보면 확인해볼수 있다.
(Docs and Demos > Pages & dialogs > Page transitions )

ex) slide, slideup , slidedown, flip, pop, fade

<div data-role="page" id="FirstPage">

<ul>

</ul>

</div>

</div>

<ul>

</div>

</div>

</div>

</div>

index.html

참고 : http://rintiantta.blog.me/40124403692

'jQuery' 카테고리의 다른 글

폼 요소 선택자 (0)	2012.03.13
각종 예제 사이트 (0)	2011.07.11
배경색(투명) 깔고 위에 레이어 팝업 띄우기 (0)	2011.06.27
조작하려는 엘리먼트 선택하기 (0)	2011.06.20
텍스트 메뉴 롤오버 (0)	2011.06.01

:

배경색(투명) 깔고 위에 레이어 팝업 띄우기

jQuery 2011. 6. 27. 10:45

갤러리는 플러그인을 이용하는게 낫겠고...한장정도 띄우는건 이걸 이용하던가...좀 더 응용해서 만들어보는것도 괜찮을듯.

$(document).ready(function(){

   $("#lay").hide()
   $("#layerBtn").click(function(){
    $('<div id="blind_box"></div>').css('opacity',0.3).appendTo('body');
    $('#lay').fadeIn(300);
    $('#lay').css('z-index', '100');
   });

   $("#close").click(function(){
    $("#blind_box").remove()
    $('#lay').hide()
   });

});

html {height:100%;}
body {height:100%; padding:0; margin:0;}
#layerBtn {cursor:pointer;}
#lay {position:absolute; top:50%; left:50%; height:400px; width:500px; margin-top:-200px; margin-left:-250px; background:#fff;
text-align:left; z-index:160; }
#lay span {display:block; position:absolute; right:5px; bottom:5px; cursor:pointer;}
#blind_box {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; z-index:50;}

<p>dfwef</p>
<span id="close">닫기</span>

</div>

'jQuery' 카테고리의 다른 글

각종 예제 사이트 (0)	2011.07.11
JQuery mobile (0)	2011.07.07
조작하려는 엘리먼트 선택하기 (0)	2011.06.20
텍스트 메뉴 롤오버 (0)	2011.06.01
슬라이드 메뉴 (0)	2011.05.23

:

조작하려는 엘리먼트 선택하기

jQuery 2011. 6. 20. 11:23

조작하려는 엘리먼트 선택하기
전 장에서도 간단히 살펴보았지만 우선 jQuery매소드를 사용하기 위해선 페이지에서 조작할 엘리먼트를 선택해야 한다.
여기선 이런 엘리먼트를 선택하는 방법에 대해 알아보자.

기본 CSS 선택자를 이용해 선택하기
위치로 선택하기
jQuery 정의 선택자로 선택하기

위의 세가지 방법을 이용해 엘리먼트를 선택하는 것에 대해 알아보자.

기본 CSS 선택자 사용하기
CSS를 사용해 본 유저라면 이 선택 기법은 익숙할 것이다.엘리먼트의 ID, CSS 클래스명, 태그명,
페이지 엘리먼트의 DOM 계층 구조를 이용해 엘리먼트를 선택하는 기법이 그것들이며 아래의 예를 보자.

a - 모든 링크 엘리먼트와 일치하는 선택자
#specialID - specialID를 아이디로 가지는 엘리먼트와 일치하는 선택자
.specialClass - specialClass를 클래스로 가지는 모든 엘리먼트와 일치하는 선택자
a#specialID.specialClass - 아이디가 specialID이고 specialClass를 클래스로 가지는 링크와 일치하는 선택자
p a.specialClass - 단락 엘리먼트 내에 선언되고 specialClass를 클래스로 가지는 모든 링크와 일치하는 선택자

이러한 기존의 CSS 선택자를 이용하여 엘리먼트를 선택할 수 있게 되는데, jQuery가 지원하는 선택자들은 아래와 같다.
선택자 내 용
* 모든 엘리먼트
E 태그명이 E인 모든 엘리먼트
E F E의 자손이면서 태그명이 F인 모든 엘리먼트
E>F E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트
E+F E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F
E~F E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F
E:has(F) 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트
E.C 클래스명 C를 가지는 모든 엘리먼트 E
E#I 아이디가 I인 엘리먼트 E
E[A] 속성 A를 가지는 모든 엘리먼트 E
E[A=V] 값이 V인 속성 A를 가지는 모든 엘리먼트 E
E[A^=V] 값이 V로 시작하는 속성 A를 가지는 모든 엘리먼트 E
E[A$=V] 값이 V로 끝나는 속성 A를 가지는 모든 엘리먼트 E
E[A*=V] 값이 V를 포함하는 속성 A를 가지는 모든 엘리먼트 E

위의 선택자를 활용하는 방법에 대해 예제를 통해 알아보자.(예제보기)


위치로 선택하기
때로는 페이지에 있는 엘리먼트 위치나 다른 엘리먼트와 연관된 관계를 기반으로 엘리먼트를 선택해야 한다.
예를 들어 페이지에서 첫 번째 링크나 홀수 및 짝수 번째 문단 등을 선택하는 기법이 필요할 때가 있다.
이에 대해 정리한 것이 아래의 표이다.
선택자 설 명
:first 페이지에서 처음으로 일치하는 엘리먼트
:last 페이제에서 마지막으로 일치하는 엘리먼트
:first-child 첫 번째 자식 엘리먼트
:last-child 마지막 자식 엘리먼트
:only-child 형제가 없는 모든 엘리먼트를 반환
:nth-child(n) n번째 자식 엘리먼트
:nth-child(even|odd) 짝수 혹은 홀수 자식 엘리먼트
:nth-child(Xn+Y) 전달된 공식에 따른 n번째 자식 엘리먼트
:even / :odd 페이지 전체의 짝수/홀수 엘리먼트
:eq(n) n번째로 일치하는 엘리먼트
:gt(n) n번째 엘리먼트 이후의 엘리먼트와 일치
:lt(n) n번째 엘리먼트 이전의 엘리먼트와 일치


jQuery 정의 선택자 사용하기
CSS 선택자를 이용해 우리는 원하는 DOM 엘리먼트를 선택할 수 있었지만 때로는 이것만으로 표현할 수 없는 
특성이 있는 엘리먼트를 선택해야 한다.
예를 들어 라디어 버튼 중 check가 된 엘리먼트만을 선택하기에는 CSS선택자만으로는 부족하다.
이렇듯 부족한 부분을 jQuery 정의 선택자를 이용하여 채울 수 있다.
선택자 설 명
:animated 현재 애니메이션이 적용되고 있는 엘리먼트
:button 모든 버튼을 선택
:checkbox 체크박스 엘리먼트 선택
:checked 선택된 체크박스나 라디오 버튼을 선택
:contains(foo) 텍스트 foo를 포함하는 엘리먼트 선택
:disabled 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택
:enabled 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택
:file 모든 파일 엘리먼트를 선택
:header 헤더 엘리먼트 선택
:hidden 감춰진 엘리먼트 선택
:image 폼 이미지를 선택
:input 폼 엘리먼트만 선택
:not(filter) 필터의 값을 반대로 변경
:parent 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트
:password 패스워드 엘리먼트 선택
:radio 라디오 버튼 엘리먼트 선택
:reset 리셋 버튼을 선택
:selected 선택된 엘리먼트 선택
:submit 전송 버튼을 선택
:text 텍스트 엘리먼트 선택
:visible 보이는 엘리먼트 선택


여러 jQuery 정의 선택자가 폼과 관련되며 덕분에 특정 엘리먼트의 타입이나 상태를 세련되게 표현할 수 있다.
선택자 필터도 조합할 수 있다. 예를 들어 활성화 되고 선택된 체크박스만 일치시키려 한다면 다음과 같다.

 
 
:checkbox:checked:enabled



새로운 HTML 생성하기
jQuery() 함수는 페이지의 엘리먼트를 선택할 뿐 아니라 새로운 HTML을 생성할 수도 있다. 

 
$("<div>안녕</div>")


이 표현식은 페이지에 추가할 새로운 <div> 엘리먼트를 생성한다.

다음의 코드를 이용하여 <div> 엘리먼트를 두 개 생성해보자.
 
$("<div class='foo'>내가 foo를 가졌다.</div><div>나는 foo를 가지지 않았다.") 
.filter(".foo").click(function(){ alert("내가 foo이다."); })
.end().appendTo("#someParentDiv");



위의 코드는 <div> 엘리먼트를 생성하는데 첫번째 <div> 엘리먼트는 foo 클래스가 있고,
다른 하나에는 없다. 생성한 첫번째 <div> 엘리먼트를 클릭하면 alert()가 실행된다.
마지막으로 end()메서드를 이용해 필터링 이전의 두 <div>엘리먼트를 지닌 집합으로 돌아간 뒤,
이 집합을 id가 someParentDiv인 엘리먼트에 덧붙인다.

'jQuery' 카테고리의 다른 글

JQuery mobile (0)	2011.07.07
배경색(투명) 깔고 위에 레이어 팝업 띄우기 (0)	2011.06.27
텍스트 메뉴 롤오버 (0)	2011.06.01
슬라이드 메뉴 (0)	2011.05.23
JQuery 플러그인 (0)	2011.04.06

:

텍스트 메뉴 롤오버

jQuery 2011. 6. 1. 10:28

jQuery(document).ready(function(){
      // Main Menu
      $("li[id^=menu]").each(function(){
        $(this).bind('mouseover', function(){
          $("li[id^=menu]").each(function(){
            $(this).removeClass("selected");
          });
            $(this).addClass("selected");
        });
        $(this).bind('focusin', function(){
          $("li[id^=menu]").each(function(){
            $(this).removeClass("selected");
          });
            $(this).addClass("selected");
        });
        $(this).bind('focusout', function(){
           $(this).removeClass("selected");
        });
      });

      $("ul[class^=subMenu]").each(function(){
        $(this).bind('mouseleave', function(){
          $(this).parent().removeClass("selected");
        });
      });

      $("div.mainNavi").bind('mouseleave', function(){
        $("li[id^=menu]").removeClass("selected");
      });
});

<style type="text/css">
.mainNav {position:relative; font-size:12px; border:1px #ccc solid; height:80px; width:650px; background:#f1f1f1;}
  .mainNav a {text-decoration:none; color:#333;}
  .mainNav li {float:left; margin-right:20px; padding:5px; list-style:none; line-height:16px; border:1px #ccc solid;}
  .mainNav ul.subMenu {display:none; position: absolute; top: 42px; width: auto; z-index: 10;}
  .mainNav ul.subMenu li {display: inline-block; float: none;}
  .mainNav li.selected ul.subMenu {display:block;}

  #menu1 .ltPo {left:0;}
  #menu2 .ltPo {left:20px;}
  #menu3 .ltPo {left:40px;}
  #menu4 .ltPo {left:60px;}
  #menu5 .rtPo {right:0;}
</style>

<div class="mainNav">
<ul>
<li id="menu1">
   <a href="#">대메뉴1</a>
   <ul class="subMenu ltPo">
  <li><a href="#">소메뉴1</a></li>
  <li><a href="#">소메뉴2</a></li>
  <li><a href="#">소메뉴3</a></li>
  <li><a href="#">소메뉴4</a></li>
  <li><a href="#">소메뉴5</a></li>
  <li><a href="#">소메뉴6</a></li>
  <li><a href="#">소메뉴7</a></li>
   </ul>
</li>
<li id="menu2">
   <a href="#">대메뉴2</a>
   <ul class="subMenu ltPo">
  <li><a href="#">소메뉴1</a></li>
  <li><a href="#">소메뉴2</a></li>
  <li><a href="#">소메뉴3</a></li>
  <li><a href="#">소메뉴4</a></li>
  <li><a href="#">소메뉴5</a></li>
  <li><a href="#">소메뉴6</a></li>
  <li><a href="#">소메뉴7</a></li>
   </ul>
</li>
<li id="menu3">
   <a href="#">대메뉴3</a>
   <ul class="subMenu ltPo">
  <li><a href="#">소메뉴1</a></li>
  <li><a href="#">소메뉴2</a></li>
  <li><a href="#">소메뉴3</a></li>
  <li><a href="#">소메뉴4</a></li>
  <li><a href="#">소메뉴5</a></li>
  <li><a href="#">소메뉴6</a></li>
  <li><a href="#">소메뉴7</a></li>
   </ul>
</li>
<li id="menu4">
   <a href="#">대메뉴4</a>
   <ul class="subMenu ltPo">
  <li><a href="#">소메뉴1</a></li>
  <li><a href="#">소메뉴2</a></li>
  <li><a href="#">소메뉴3</a></li>
  <li><a href="#">소메뉴4</a></li>
  <li><a href="#">소메뉴5</a></li>
  <li><a href="#">소메뉴6</a></li>
  <li><a href="#">소메뉴7</a></li>
   </ul>
</li>
<li id="menu5">
   <a href="#">대메뉴5</a>
   <ul class="subMenu rtPo">
  <li><a href="#">소메뉴1</a></li>
  <li><a href="#">소메뉴2</a></li>
  <li><a href="#">소메뉴3</a></li>
  <li><a href="#">소메뉴4</a></li>
  <li><a href="#">소메뉴5</a></li>
  <li><a href="#">소메뉴6</a></li>
  <li><a href="#">소메뉴7</a></li>
   </ul>
</li>
</ul>
</div>

'jQuery' 카테고리의 다른 글

배경색(투명) 깔고 위에 레이어 팝업 띄우기 (0)	2011.06.27
조작하려는 엘리먼트 선택하기 (0)	2011.06.20
슬라이드 메뉴 (0)	2011.05.23
JQuery 플러그인 (0)	2011.04.06
택스트 on_off 탭메뉴 1 (0)	2011.01.27

:

슬라이드 메뉴

jQuery 2011. 5. 23. 10:28

.hasClass
매치되는 엘리먼트에 매개변수로 전달받은 클래스명이 있는지 확인한다.
일치하는 클래스명이 있으면 true, 없으면 false를 반환한다.

*********************************************************************************************

h2 {cursor:pointer;}
.none {display:none;}
.list {cursor:pointer;}

function slide(obj) {
    if( jQuery(obj).hasClass("on") ) {
      jQuery(obj).find('.test').slideUp();
      jQuery(obj).removeClass("on");
      jQuery(obj).find("h2").addClass("on");
     } else {
      jQuery(obj).find('.test').slideDown();
      jQuery(obj).addClass("on");
      jQuery(obj).find("h2").removeClass("on");
     }
   }
<div class="list on" onclick="slide(this)">
    <h4>열렸다닫힘</h4>
    <div class="test">내용입니다.</div>
</div>
<div class="list" onclick="slide(this)">
    <h4>열렸다닫힘</h4>
    <div class="test none">내용입니다.</div>
</div>
<div class="list" onclick="slide(this)">
    <h4>열렸다닫힘</h4>
    <div class="test none">내용입니다.</div>
</div>

*************************************************************************************

첫번째 list 그룹에서 on이 빠지면 두번 클릭해야 동작한다.

'jQuery' 카테고리의 다른 글

조작하려는 엘리먼트 선택하기 (0)	2011.06.20
텍스트 메뉴 롤오버 (0)	2011.06.01
JQuery 플러그인 (0)	2011.04.06
택스트 on_off 탭메뉴 1 (0)	2011.01.27
tree 메뉴 (0)	2010.10.14

:

JQuery 플러그인

jQuery 2011. 4. 6. 14:33

갤러리: http://spaceforaname.com/galleryview-3.0/tutorial_e.html
http://www.kyrielles.net/sliderkit/

jQuery 이미지 갤러리 만들기 데모네요~

1. Fullsize
간단한 제품이미지, 썸네일 이미지 보기에 사용하기엔 좋음
http://www.addfullsize.com/

2. Galleria
이미지 갤러리로 다양한 기술이 녹아 있음
http://galleria.aino.se/

3. Galleriffic
다양한 종류의 이미지 갤러리를 만들 수 있음
http://www.twospy.com/galleriffic/index.html

4. jquery-imagetool
큰 이미지를 이용하여 이미지 스크롤 기능을 이용시 괜찮음
http://code.google.com/p/jquery-imagetool/

5. GalleryView
http://spaceforaname.com/galleryview

6. CrossSlide
오버랩, 줌인 등의 이미지뷰어에 적합
http://tobia.github.com/CrossSlide/

<제이쿼리 플러그 인 모음>
http://blog.naver.com/sjrmwlq1/130075931807

[출처] jQuery 이미지 갤러리 만들기 데모 (jquery로의 여행) |작성자 쇼콕도콕

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

타툼시티와 비슷한 효과

jquery-lightbox-0.5.zip

'jQuery' 카테고리의 다른 글

텍스트 메뉴 롤오버 (0)	2011.06.01
슬라이드 메뉴 (0)	2011.05.23
택스트 on_off 탭메뉴 1 (0)	2011.01.27
tree 메뉴 (0)	2010.10.14
슬라이드 스타일 1 (0)	2010.10.08

:

택스트 on_off 탭메뉴 1

jQuery 2011. 1. 27. 16:06

만든걸 응용하면 이미지도 금방해결볼듯....탭메뉴 제대로 굴러가는 소스를 찾다찾다 그냥 넘겼는데 공부하는겸 한번 짜봤다.

3번에 걸쳐 간소화 시켰다. 숫자를 함수로 만들면 더 간단해질듯....

//아...이미진 좀 다른데? ㅋㅋㅋ

JQuery
$(document).ready(function(){
$('#tab ul>li').click(function(){
  $('#tab ul>li').removeClass('on');
  $(this).addClass('on');
  $('#tabDocBox > div').removeClass('block');
});
$('#tabDoc1').click(function(){
  $('#tabDocBox .Doc1').addClass('block');
});
$('#tabDoc2').click(function(){
  $('#tabDocBox .Doc2').addClass('block');
});
$('#tabDoc3').click(function(){
  $('#tabDocBox .Doc3').addClass('block');
});
});

style
li {list-style:none;}
.block {display:block !important;}

#tab {overflow:hidden;}
#tab li{float:left; width:100px; height:35px; text-align:center; border:1px #ccc solid; cursor:pointer;}

.Doc1,
.Doc2,
.Doc3 {height:50px; border:1px red solid; display:none;}

.on {font-weight:bold;}

Html
<div id="tab">
   <ul>
    <li class="on" id="tabDoc1">menu1</li>
    <li id="tabDoc2">menu2</li>
    <li id="tabDoc3">menu3</li>
   </ul>
    </div>
    <div id="tabDocBox">
     <div class="Doc1 block">

내용1 간소화 시작

</div>
<div class="Doc2">

내용2 간소화 하고있냐?

</div>
<div class="Doc3">

내용3 간소화 종료

</div>
</div>

'jQuery' 카테고리의 다른 글

텍스트 메뉴 롤오버 (0)	2011.06.01
슬라이드 메뉴 (0)	2011.05.23
JQuery 플러그인 (0)	2011.04.06
tree 메뉴 (0)	2010.10.14
슬라이드 스타일 1 (0)	2010.10.08

:

tree 메뉴

jQuery 2010. 10. 14. 12:54

힘들었다.....

남이 만들어놓은것 찾는것도, 그걸 맞게 고쳐 쓰는것도 참 일이구나..ㅠㅠ

.shuffle_menu ul{list-style-position:outside;}
.shuffle_menu li{background-position:0 -176px; padding:3px 0 2px 16px; cursor:pointer;}
.shuffle_menu span.folder {display:block; background:url(../images/folder.gif) no-repeat; padding: 0px 0 0px 20px;}
.shuffle_menu span.file {display:block; background:url(../images/file.gif) no-repeat 0 1px; padding: 0px 0 0px 20px;}
.treeview, .treeview ul {padding: 0; margin: 0; list-style: none;}
.treeview ul {background-color:white; margin-top: 4px;}
.expandable-hitarea{background:url(../images/icon_folder_minus.gif) no-repeat 0 2px;}
.collapsable-hitarea{background:url(../images/icon_folder_plus.gif) no-repeat 0 2px;}
.treeview .hitarea {height: 16px; width: 16px; margin-left: -16px; float: left; cursor: pointer;}


    <div class="shuffle_menu">
     <ul id="tree">
      <li><span class="folder">Folder 1</span>
       <ul>
        <li><span class="file">File 1.1</span>
         <ul>
          <li><span class="file">File 1.1</span></li>
          <li><span class="file">File 1.2</span></li>
         </ul>
        </li>
        <li><span class="file">File 1.2</span></li>
       </ul>
      </li>
      <li><span class="folder">Folder 1</span>
       <ul>
        <li><span class="file">File 1.1</span></li>
        <li><span class="file">File 1.2</span></li>
       </ul>
      </li>
     </ul>
    </div>

jquery.treeview.js

'jQuery' 카테고리의 다른 글

텍스트 메뉴 롤오버 (0)	2011.06.01
슬라이드 메뉴 (0)	2011.05.23
JQuery 플러그인 (0)	2011.04.06
택스트 on_off 탭메뉴 1 (0)	2011.01.27
슬라이드 스타일 1 (0)	2010.10.08

:

슬라이드 스타일 1

jQuery 2010. 10. 8. 01:19

아....이 단순한거 하나 할라고ㅋㅋㅋㅋㅋ.....삽질에 삽질을 거듭했구만...ㅠㅠ

$(document).ready( function(){
$('.btnL').toggle(
    function () {
   $(this).animate({'left':'-=150px'}, '1000');
    },
    function () {
   $(this).animate({'left':'+=150px'}, '1000');
    }
  );

$('.btnL').click(function(){
  $('.left').animate({width: 'toggle'}, '1000');
});
});

<style type="text/css">

.wrap{width:500px; height:300px;}
.btnL{position:absolute; left:150px; top:141px; width:30px; height:18px; background:yellow; cursor:pointer; z-index:100;}
.btnR{position:absolute; right:150px; top:141px; width:30px; height:18px; background:yellow; cursor:pointer; z-index:100;}
.center{position:relative; height:300px; background:#ccc;}
.left{position:absolute; left:0; width:150px; height:300px; background:green; z-index:99;}
.right{position:absolute; right:0; width:150px; height:300px; background:green; z-index:99;}

</style>

<div class="wrap">
<div class="center">
  center
  <div class="btnL">click</div>
  <div class="btnR">click</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</div>

'jQuery' 카테고리의 다른 글

텍스트 메뉴 롤오버 (0)	2011.06.01
슬라이드 메뉴 (0)	2011.05.23
JQuery 플러그인 (0)	2011.04.06
택스트 on_off 탭메뉴 1 (0)	2011.01.27
tree 메뉴 (0)	2010.10.14

:

좌충우돌 웹퍼블리셔 일기

'jQuery'에 해당되는 글 20건

각종 예제 사이트

'jQuery' 카테고리의 다른 글

JQuery mobile

'jQuery' 카테고리의 다른 글

배경색(투명) 깔고 위에 레이어 팝업 띄우기

'jQuery' 카테고리의 다른 글

조작하려는 엘리먼트 선택하기

조작하려는 엘리먼트 선택하기

기본 CSS 선택자 사용하기

위치로 선택하기

jQuery 정의 선택자 사용하기

새로운 HTML 생성하기

'jQuery' 카테고리의 다른 글

텍스트 메뉴 롤오버

'jQuery' 카테고리의 다른 글

슬라이드 메뉴

'jQuery' 카테고리의 다른 글

JQuery 플러그인

'jQuery' 카테고리의 다른 글

택스트 on_off 탭메뉴 1

'jQuery' 카테고리의 다른 글

tree 메뉴

'jQuery' 카테고리의 다른 글

슬라이드 스타일 1

'jQuery' 카테고리의 다른 글

티스토리툴바