간단한 jQuery 갤러리

jQuery/DOM&jQuery 2015.10.30 00:00

간단한 jQuery 갤러리

간단한 클릭이벤트 레이아웃 갤러리.클릭시 하단 박스와 그아래 텍스트를 변경한다. 대략적인 레이아웃 박스구조.


html소스 총 5명의 사진을 올릴것이다. 이미지는 썸네일이미지5장, 보여줄이미지 5장. 유사반복되는<li> 중간에 생략했다.

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
<section>
<h1>아이돌 갤러리</h1>
<ul id="imagegallery">
<li>
  <figure>
    <a href="images/pic-aiyou.jpg" title="아이유">
      <img src="images/sum-aiyou.jpg" alt="아이유" width="80" height="60"/>      
    </a>
     <figcaption>아이유</figcaption>
  </figure>    
  </li>
<!-- 3번반복-->
<li>
 <figure>
  <a href="images/pic-soyou.jpg" title="소유" >
   <img src="images/sum-soyou.jpg" alt="소유" width="80" height="60"/>   
  </a>
  <figcaption>소유</figcaption>
  </figure>
  </li>  
</ul>
<div>
<img id="placeholder" src="images/pic-aiyou.jpg" alt="아이유" width="400" height="300" />
<p id="description">아이유</p>
</div> 
</section>
cs

 
클릭시 하이퍼링크의 주소와 제목이  하단이미지박스의 주소와 텍스트으로 된다

1
<a href="주소" title="제목" >
cs

이 주소와 제목이 아래에 적용

1
2
<img id="placeholder" src="주소" alt="아이유" width="400" height="300" /> 
<p id="description">텍스트</p>
cs


jQuery없이 스크립트로만 구현하면 길어진다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function showPic(whichpic) {
  var source = whichpic.getAttribute("href");//하이퍼링크속성값
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);//주소교체
  var text = whichpic.getAttribute("title");//이름값
  var description = document.getElementById("description");
   description.firstChild.nodeValue = text; //자식값을변경
  return false;
}
 
function prepareGallery() {//각각 검사후 
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
    }
  }
}
cs


jQuery에서 구현

$()로접근 속성갑은 attr()로 가져오고 변경,텍스트값은 text()로 변경

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
    $("#imagegallery li").on("click"function(){      
     var imagestitle = $(this).find("a").attr("title"), 
          boximages = $(this).find("a").attr("href");
      $("#placeholder").attr("src", boximages);
      $("#description").text(imagestitle);  
          return false;
    });
});
cs


완성된것

http://sianasiatiger.cafe24.com/practice-idea/gall-jQ.html

저작자 표시
신고

설정

트랙백

댓글

jQuery 1.4 변경점

jQuery/DOM&jQuery 2010.03.17 21:33

jQuery 1.4 변경점

지난 1월달에 jquery 1.4가 나왔다. 변화된점을 요약.

참고한 출처는 여기다http://firejune.com/1527.자세히 설명되있으므로 참조

collection방식

프로그램밍을 해본 이들이라면 c언어를 접해봤을 것이고 클래스(class)에 대해 알것이다.집합된 객체(object)에 변수 함수등을 설정해준다. 이번에 나온 jquery 1.4도 이와 비슷하게 지원된다.

먼저 종전에 사용한 방법을 보자 아래의 html에서 아이디(id), css, 실행함수를 나오도록 해보자

jquery 1.4

그리고 종전의 방식으로 여기에 추가해보자

$('a').attr('id', 'new')
      .css({'color':'#fcc','font-size':'28px' })
      .click(function() { 실행될함수});

아이디를 부여했고 css로 꾸미고 실행될함수를 지정해준것이다. jquery의 편리한점은 언제든지 필요한것을 순서대로 붙이면 된다는 점이였으나 그것이 과할 경우에 혼란을 줄수있다. 이번에 지원된 변경되모습을 보자.

$('a',{
   id: new,
   css: {'color':'#fcc','font-size':'28px'
   }
   click : function() { 실행될함수})
  }); 

어떻게 보면 복잡할 수도 있지만. 많은것을 부할경우 상호간의 개발자들이 알아보기 쉬울것이다.

이벤트 역시 마찬가지

이벤트역시 위와같은 방식처럼 일괄적으로 적용될수있도록 지원한다.

$('a'.bind({
    click: function() {
    //클릭시 실행될함수
     },
    mouseover: function() {
    //마우스 오버시 실행될함수
     },
    mouseout: function() {
    //마우스 아웃시 실행될함수
   }
})

새로추가된 focusIn, focusOut 이벤트

기존의 focus이벤트에서 부분적으로 수행할수 있도록 분리된 focusIn, focusOut이벤트가 추가되었다.

.live()메소드에 추가된 속성

네가지 "submit", "change", "focus" "blur" 속성이추가되었다.또한 .live( eventType, eventData, handler ) 형식으로 eventData옵션이 추가되었다..live()메소드에 대해 알고싶으면 이 포스팅을 참고

live메소드

nextUntil, prevUntil, parentsUntil메소드

  • Apple
  • Banana
  • Grape
  • Strawberry
  • Pear
  • Peach

위의 리스트에는 여러 과일이 있다. 이중 until 이란 말뜻대로 ~까지 선택하는것

nextUntil

선택한것에서~까지

$('ul li:contains(Apple)').nextUntil(':contains(Pear)');

prevUntil

반대로 이것은 뒤에서 ~까지

$('ul li:contains(Pear)').nextUntil(':contains(Apple)');

parentsUntil

말그대로 부모엘리먼트 까지이다

요소 풀기(Unwrap)

.wrap()메소드는 감싸는역할을 했다 반대로 이것은 풀어서 감싸고있는것을 제거시킨다.

날 감싸는걸 제거시켜주세요

위에서 div엘리먼트를 제거시켜보자

$('p').unwrap();

unwrap()여기 괄호를 비워둔것은 옵션이다.

데이터를 유지한 상태로 요소 제거하기

새로운 .detach()메서드는 DOM에서 요소를 제거한다. 중요한점은 해당 요소가 가진 데이터 요소를 파괴하지 않는다는 것. 이 데이터는 jQuery의 이벤트 시스템에 보존되어있기 때문에 .data()메서드 등을 그대로 사용하여 다시금 호출할 수있다.

주의~

jQuery 1.4는 기반을 뒤업는 업데이트를 포함하고 있기 때문에 1.3.x에서 작동하던 코드가 비정상 적으로 작동할 수 있다. John Resi는 이와 관련하여 하위 호환성을 유지하기 위한 jquery-compat-1.3 플러그인을 별도로 배포하고 있으니 참조.http://github.com/jquery/jquery-compat-1.3

  
 
저작자 표시
신고

설정

트랙백

댓글

입력 검색 폼(form) 꾸미기

jQuery/DOM&jQuery 2010.02.22 13:41

간단한 검색 폼

간단한폼을 만들어보고 jQuery를 이용하여 label의 텍스트가 검색폼에 들어가게하여 라인을 줄여볼것이다.


css에서 label을 블럭 엘리먼트로 변경해준다.

label{ display:block;}

그러면 흔히 볼수있는 다음과 같이모습을 볼수있을것이다.

한라인 줄이기

위의 결과물은 label엘리먼트가 한블럭 차지하여 혹시사이트가 작은공간을 요구할때 불편사항을 줄수도있다.따라서 css변화를 주어 겹치게할것이다.

var $search = $('#search').addClass('overlabel');

html에서 클래스를 그냥주지않고 위와같이 jQuery를이용한것은 후에 별도로 같은 구문을 사용할 필요가있기에 변수로 지정해준것이다.그리고 css는 다음과 같다.

.overlabel{ position: relative;}
.overlabel label{ 
position:absolute;
top:1px; left:3px;
cursor:text;}

원하는 결과가 나올것이다.하지만 다음과 같은 문제점이 발생한다.

  • label의 텍스트"입력하시오"와 사용자가 입력할 텍스트가 겹치게된다
  • label이 검색필드위에있기에 브라우저에 따라 마우스만으로 입력필드에 이동할 수 없을 경우도있다.

문제점해결

첫번째 문제를 위해 필드에 포커스가 올 때 감춰줄 필요가 있다

$(document).ready(function() {
  var $search = $('#search').addClass('overlabel');
  var $searchInput = $search.find('input');
  var $searchLabel = $search.find('label');
  $searchInput
  .focus(function() {
  //포커스되면
    $searchLabel.hide();
    //보여준다
  })
  .blur(function() {
    if (this.value == '') {
      $searchLabel.show();
     }  }); });

각 엘리먼트를 변수로 지정해 주었고 input엘리먼트에 텍스트를 입력할 경우 원래 텍스트를 감추고 반대로 떠나면 다시 보여주게 하고있다. 다음에는 레이블을 클릭시 이벤트를 발생할 수 있도록 하는 것이다.

$searchLabel.click(function() {
  $searchInput.trigger('focus');

마무리

거의 다되었지만 하나남은것이있다. 위와같이할 경우 페이지를 새로고침하면 입력하던 텍스트값이 남아있도록할 필요가있다.

if ($searchInput.val()) {
//입력한 값이 남아 있다면
    $searchLabel.hide();
  }

만약반대로 새로고침 할 경우 "입력하세요"가 나오게 하려면 null값을 주면 된다

if ($searchInput.val()) {
    $searchInput.val(null);
  }

이로서 완성. 완성된 페이지를 보려면 여기로 http://sianasiatiger.cafe24.com/study/F_searchform.html

저작자 표시
신고

설정

트랙백

댓글

jQuery 기능적 폼(form) 만들기

jQuery/DOM&jQuery 2010.02.18 19:59

jQuery 기능적 폼(form) 만들기

jQuery 이용하여 좀더 기능적으로 form을 만들어보자.기본적인 폼의코드는 다음과 같다

더보기

이름을입력할 input엘리먼트는 클래스명을required 그리고 나머지들은 클래스명을 conditional로 주었다.이코드를 다음과 같이 수정할것이다.

  • legend엘리먼트를 다른 엘리먼트로 대체하여 좀더 편리하게 css로 꾸미게 한다
  • 반드시 입력할 이름란에 '*'를 또 다른 입력란에는 '**'를 필수, 선택 대신으로 대체시킨다
  • 필요한 선택입력 항목 박스를 클릭시 텍스트 입력 박스가 보이도록 또 감추도록한다.

엘리먼트 수정

legend엘리먼트는 css로 꾸미기 까다로운 것중하나다. 표준을 지키기위해선 써야하고 꾸미기위해서 바꾸자니 까다롭다. 따라서 스크립트를 이용해서 대체시켜보자

 $('legend').each(function(index) {
 //문서전체에서 legend에 접근하여
  $(this).replaceWith('

' + $(this).text() + '

'); //찾아낸것을 h3엘리먼트로 바꾸어준다. });

위의 소스는 legend엘리먼트를 h3에리먼트로 대체시켜주고 있다. 함수는.replaceWith()를 사용하고있다.each를 사용한것은 여기서는 하나의 폼만 사용해서보여주고있지만 여러개를사용할때 공통으로 검사하고 적용해 주기 때문이다. css로 바탕색은 분홍 글자색은 흰색으로 해보자

h3{ background:#fcc; color:#FFF;}

아스테리크로 대체

.replaceWith()함수로 대체시킬수도있지만 차후의 기능적 사용여부와 또 위에 별도표시를위해 변수로 지정하고 바꾸어줄것이다.

  var requiredFlag = ' * ';
  var conditionalFlag = ' ** ';
  $('form :input')
   .filter('.required')
   .next('span').text(requiredFlag)
   .end().end()
   .filter('.conditional')
   .next('span').text(conditionalFlag);

위의 소스는 먼저 아스테리크를 변수로지정해주고 그 다음바꾸어줄 텍스트를 찾아가고있다.주요시 볼점은 .end()함수이다.end함수는 다시 이전요소에 접근하는 함수이다.따라서 첫번째 end는 .filter('.required')에 접근 두번째end는$('form :input')접근하고있다. 따라서 '**'를 사용할 .conditional란 클래스를가진것에 접근시 처음부터 소스를 $('form :input').filter('.conditional')이런식으로 짜줄필요없이 단축시킬수있다.

이번에는 (필수), (선택)이란 텍스트에서 괄호를 때어주고 변수로 지정하고 아스테리크와 같이이어주도록 지정해준다.바라는 결과는 다음과 같다

필수*

선택**

이를위해 소스를보자

  var requiredKey = $('input.required:first')
                        .next('span').text();
  var conditionalKey = $('input.conditional:first')
                        .next('span').text();
    requiredKey = requiredFlag + 
             requiredKey.replace(/^\((.+)\)$/,'$1');
  conditionalKey = conditionalFlag + 
            conditionalKey.replace(/\((.+)\)/,'$1');

.replace()의 역할은 괄호를 떼어주는역할을 했다.마지막으로 이것을 맨위에 붙여주자

	$('

') .addClass('field-keys') .append(requiredKey + '
') .append(conditionalKey) .insertBefore('#contact');

이제까지 이블로그의 포스팅을 봐왔다면 쉽게 이해가능할것이다. 클래스를 지정한것은 단순히 좀더 꾸며주기위했을 뿐이다.

체크박스 클릭에 따라 보여주기 감추기

마지막으로 체크박스에 따라보여주거나 감추는 기능을 만들어보자.먼저 conditional명의 클래스의 텍스트박스를 모두감추어준다.

$('input.conditional').next('span').andSelf().hide()

다음은 페이지내에서 체크박스를 찾아가도록되어있다

$('input.conditional').next('span').andSelf().hide()
  .end().end()
  .each(function() {
    var $thisInput = $(this);
    var $thisFlag = $thisInput.next('span');
    $thisInput.prev('label').find(':checkbox')
    .attr('checked', false)
    //함수가 체크안된었다는초기값을 설정한것이다.
    .click(function() ;
    //이뒤에 실행되는 함수를 달아주면된다

마지막으로 박스가 체크된에 따라 바뀌는 소스를 만들어주자

  .click(function() {
      if (this.checked) {
      //만약 박스가 체크된다면
        $thisInput.show().addClass('required');
        $thisFlag.show();
        $(this).parent('label').addClass('req-label');
      } else {
      //반대라면
        $thisInput.hide().removeClass('required').blur();
        $thisFlag.hide();
        $(this).parent('label').removeClass('req-label');

아래는 최종 완성된 소스

더보기

완성된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/F_moreedite.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM empty clone 메소드 복사하기

jQuery/DOM&jQuery 2009.11.28 21:20

jQuery DOM clone 메소드

.clone()은 엘리먼트를 복사하는 메소드이다.

클론은 이벤트 또한 복제하는데 하나하나 살펴보자

아메바......

위의 엘리먼트를 복제해보자

$('p').clone();

자 위의것 대로 하면 될것같지만 복사해서 놓을 위치를 정해줘야 된다. 그래서 .insertAfter()등의 메소드를 사용한다.

$('p').clone().insertAfter('p');

위와같이하면아래와같이 복사되어 나올것이다

아메바......

아메바......

이벤트까지 복제

이벤트 까지 복제하는예제를 보자.변수에 true를 넣으면 이벤트까지복제 반대로 false를 넣어주면 엘리먼트만 복제된다.


위의 버튼을 누르면 복제되도록하려면

  $('button').click(function() {
     //button 엘리먼트에 접근 클릭시 이벤트발생
      $(this).clone(true).insertAfter(this);
     //this 즉 button엘리먼트를 복사해서 그뒤에 붙임
     // clone(true)로 이벤트까지 복사
    }); 

이러면 클릭시 옆에 새로 버튼이 나올거고 또 그버튼을 클릭하면 또 복사되어 나올것이다.

예제릐 결과를 보고싶다면 아레로 가보자

http://sianasiatiger.cafe24.com/study/D_clone.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM empty remove 메소드 제거하기

jQuery/DOM&jQuery 2009.11.25 15:12

jQuery DOM empty remove 메소드

제거하기위한 메소드로는 .empty().remove()가 있다..empty()의경우는 검색된 요소안의 모든 엘리먼트를 제거하고 .remove()의 경우는 검색된 엘리먼트와 자식들을 제거한다.차례대로 보자

empty 메소드

empty메소드는 비운다는 말 그대로 모든걸 지운다.해당엘리먼트의 자식과 텍스트모두 제거한다

모두 사라 집니다.

위의 코드에 아래를 삽입하면 아무것도 나오지 않는다.

$('p').empty();
//p란 엘리먼트에 접근후 
//p엘리먼트의 자식과 텍스트 제거

remove 메소드

이메소드는 접근하여 검색된 엘리먼트와 자식,텍스트를 제거한다.

사라짐

안사라짐

위에서 selected란 클래스의 엘리먼트를 사라지게 할것이다.

$('p').remove('.selected');
//p엘리먼트에 접근후 
//selected란 클래스를 가진것을 제거한다.

결과는 안사라짐 이것만 나올것이다.

예제의 결과는 여기에서http://sianasiatiger.cafe24.com/study/D_empty_remove.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM wrap 메소드 대치하기

jQuery/DOM&jQuery 2009.11.24 18:52

text replaceAll, replaceWith 메소드

대치란 원래있던 값대신에 다른 값을 생성하여 넣어주는 것을 말한다. 이런것이가능한 메소드는 .text(), .replaceAll()그리고 .replaceWith()등이 있다.

text 메소드

.text()메소드는 텍스트를 대치해준다.안녕하세요?반갑습니다로 대치해보겠다.

안녕하세요?

이걸 대치하려면 다음과 같다.

$('p').text('반갑습니다');

결과는 안녕하세요? 대신에 반갑습니다가 나올것이다

replaceWith 메소드

이메소드는 .text()메소드 처럼 대치하느데 그 대상이 엘리먼트인다.예제를보자문자대신에 그림을 대치시켜보자.

네이버 간판으로 바뀜

$('p').replaceWith('');

네이버 간판으로 바뀜 대신에 아래그림이 나올것이다

replaceAll 메소드

이것도 영어 Not only A but also B = B as well as A와 마찬가지다 replaceWith와 기능은 같고 위치값만 다를뿐이다.

$('').replaceAll('p');

예제의 결과는 여기서 확인http://sianasiatiger.cafe24.com/study/D_replace.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM wrap 메소드 요소를 감싸기

jQuery/DOM&jQuery 2009.11.22 13:26

jQuery wrap,wrapAll, wrapInner 메소드

앞서 포스팅 한 것은 한엘리먼트를 두고 앞이나 뒤에 생성하는 것이였다. 이번엔 아래그림과같이 한 엘리먼트를 놔두고 감싸는 엘리먼트를 만들어보자.


wrap 메소드

앞서 여러 생성 메소드를 학습했다면 쉽다.다음과 같다.

$('p').warp('
'); //$('내부에 엘리먼트').warp('외부엘리먼트'); $('p').warp('
'); //위와같이 아이디 설정도 가능하다.

위와 같이 해준다면 표현은 다음과 같이 나올것이다

어쩌고 저쩌고...........

주의 할 점은 두가지이다.

  • 인라인 엘리먼트로 블록엘리먼트를 감싸던지(ex)p엘리먼트를 img로)같은 엘리먼트를같은 엘리먼트로 감싼다던지(ex)p를p로 감싸기)이런 실수를 범하지 않는다.
  • 감싸는 엘리먼트에 텍스트가 포함된경우$('p').warp('<div>텍스트</div>');감쌀 엘리먼트 p의 내용은 무시된다

wrapAll 메소드

.wrap()는 지정한 엘리먼트를 일일이 감싸는 반면 .wrapAll()메소드는 ALL, 즉 한번에 다 감싸버린다.차이를 비교한 예제를 보자

감싸줘요.

나도요.

나도요2.

나도요3.

자...위와 같은 html이 있다고 하자 이때 두메소드의 차이점을 보면

$('p').warp('
'); $('p').warpAll('
');

결과는 다음과 같이 나온다

감싸줘요.

나도요.

나도요2.

나도요3.

감싸줘요.

나도요.

나도요2.

나도요3.

한번더 요약하면 warp은 개별로 일일이 감싸주는거고 wrapAll은 전체를 감싼다.

wrapInner 메소드

이 메소드는 대상 엘리먼트를 감싸는게 아니라 그 속성값(텍스트등..)과 하위 엘리먼트를 감싼다. 그래서 Inner이란 말이 붙은것. 예제를 보자

어쩌고 저쩌고

어쩌고 저쩌고

html이 위와 같고...

$('p').warp('');
//p엘리먼트 안에서 b엘리먼트로 감싸준다.
$('alpha#div').warp('
'); //alpha란 아이디의 div엘리먼트안에서 div엘리먼트로 감싼다.

결과는 아래와 같다

어쩌고 저쩌고

어쩌고 저쩌고

주의할점

감싼다는것은 지정한 엘리먼트를 다른 엘리먼트안에 넣는다는 것이다.여기서 인라인과 블록 엘리먼트를 유의할 필요있다. 블록을 인라인엘이먼트로 감싼다면 잘못된것이다.또 같은 엘리먼트로 감싸도 잘못된것이다(물론 div말고..)

마지막으로 적용된예제를 보려면 여기서보자http://sianasiatiger.cafe24.com/study/D_wrap.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM after, befoer 메소드 요소뒤, 앞에 생성하기

jQuery/DOM&jQuery 2009.11.12 15:12

jQuery after, befoer 메소드

.after()은 정해진 엘리먼트 뒤에 생성되고 before()은 앞에 생성된다.예를보자

먼저 html은 다음과 같다.

여기앞에 그리고 뒤에 어쩌고 저저고 생성됨

.after()

  $('p').after('

after로 뒤에 생성

');

결과는 다음과 같다.

여기앞에 그리고 뒤에 어쩌고 저저고 생성됨

after로 뒤에 생성 된 것

.before()

  $('p').before('

bfore로 앞에 생성

');

결과는 다음과 같다.

before로 앞에 생성 된 것

여기앞에 그리고 뒤에 어쩌고 저저고 생성됨

insertAfter(), insertBefore()

이 두메소드 역시 Not only A but also B = B as well as A 와 같다고 보면된다.

A.after(B) = B.insertAfter(A),그리고 A.before(B) = B.insertBefore(A)

$('p').before('

bfore로 앞에 생성

'); $('

insertBfore로 앞에 생성

').insertBefore('p'); $('p').after('

after로 뒤에 생성

'); $('

insertAfter로 뒤에 생성

').insertAfter('p');

적용된 예제는 여기서 보자http://sianasiatiger.cafe24.com/study/D_after_before.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM트리 prepend, prependTo 메소드

jQuery/DOM&jQuery 2009.11.10 15:10

jQuery prepend() 메소드

append()메소드와 사용법은 같다. 그럼 차이점은 무언인가? pre-앞이란 뜻이있듯이 preapend는 앞에 생성된다.앞서 포스팅 append() 메소드를 보면 뒤에 생성된것을 볼 수 있다.preapend는 앞에 생성된다. 사용방법은 똑같다.

$(document).ready(function() {
  $('p').preppend('노말');
  $('p').prepend('굵게');
  $('가늘게').prependTo('p');
  });

결과는 아래와 같다

가늘게굵게노말본문

적용된 페이지는 여기로http://sianasiatiger.cafe24.com/study/D_append.html

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바