ECMAScript6

web/jQuery 2016.06.06 23:26

1. let / const (호이스팅 때문에 탄생)

호이스팅 : js의 경우 변수 선언일때 해당 함수의 가장 첫번째에 자동으로 var 변수; 로 선언된후 해당 라인에서 초기화가 된다. 하지만 만일 스코프가 다른 변수가 있을시엔?! 함수이름과 변수 이름이 같을시엔?! 과 같이 문제점이 발생한다. 

이를 위해 ecma6에서 블록안에서만 / 상수 등이 탄생 하여 스코프에 대한 영향력을 줄였음.


아래와 같이 소스가 된다면 


var snack = 'Meow Mix';

function getFood(food) {
if (food) {
var snack = 'Friskies';

return snack;
}
return snack;
}

console.log(getFood(false)); // undefined


아래 소스처럼 자동으로 변환됨 (가장 위로 변수 선언이 바뀌게됨)

var snack = 'Meow Mix';

function getFood(food) {
var snack;
if (food) {
snack = 'Friskies';

return snack;
}
return snack;
}

console.log(getFood(false)); // undefined

이를 위해 let키워드 사용


let snack = 'Meow Mix';

function getFood(food) {
if (food) {
let snack = 'Friskies';
return snack;
}
return snack;
}

getFood(false); // 'Meow Mix'






2. IIFE (즉시함수 호출 표현식)


기존엔 자바스크립트엔 스코프가 함수스코프와 글로벌 스코프 두가지 밖에 없었습니다. 

다른 스코프가 있는 언어와 달리 아래의 소스에선 10이 출력됩니다. (블록 스코프가 존재하지 않습니다.)

{
var a = 10;

}

console.log(a);


그래서 스코프를 위해서 따로 함수를 쓰기도 했었습니다.  아래와 같이 임의로 스코프를 주기위해 함수를 사용할수 있습니다.

function test(){
var a = 10;

}

console.log(a);


그래서 기존엔 함수 선언시에도 ()안에 function()이 있어야 했습니다. ()는 IIFE죠.

(function () {

}
)()

ecma6에선 left을 통해서 블록 스코프를 지정하게 됩니다. 


{
let a = 10;

}

console.log(a);



3. Arrow Functions

 - map은 기존의 each와 같지만 function을 안에서 돌린다고 생각하면 됨

기존엔 안에 간단한 함수에도 function(){}를 선언해 줘야 했지만 => 로 끝.

var m = [1, 2, 3, 4, 5].map(function(elem){
return elem*2;
});

console.log(m);

애로우 함수 적용 예


var m = [1, 2, 3, 4, 5].map(elem => elem*2 );

console.log(m);



4. Template Literals

var name = 'Tiger';
var age = 13;

console.log('My cat is named ' + name + ' and is ' + age + ' years old.');


string에 ``으로 구분으로 ${}가 변수로 치환!! (이건 너무 좋음)


const name = 'Tiger';
const age = 13;

console.log(`My cat is named ${name} and is ${age} years old.`);


5. Destructuring

let [a, b, c, d] = [1, 2, 3, 4];

console.log(a); // 1
console.log(b); // 2

리스트의 리턴값을 각각 지정해서 넣을수 있음 (만일 리턴 갯수가 같지 않으면 해당 리턴값은 무시됨)



6. Default Parameters

function addTwoNumbers(x=0, y=0) {
return x + y;
}

console.log(addTwoNumbers()); //0
console.log(addTwoNumbers(1, 2)); //3



7. Rest Parameters

리스트를 ...으로 해당 원소들의 리스트로 반환

var list1 = [1, 2, 3, 4];
var list2 = [5, 6, 7];
var list3 = [list1, list2];
var list4 = [...list1, ...list2];

console.log(list3); //[[1, 2, 3, 4], [5, 6, 7]]
console.log(list4); //[1, 2, 3, 4, 5, 6, 7]




8. Classes

드디어 상속 표현인 extends 등장! 
기존까진 prototype으로 함수들을 선언해서 연결하고 상속시엔 prototype.constructor 로 다시 상위 클래스를 연결해서 사용하는 뻘짓을..
가독성이 심히 많이 정말 떨어졌었지만 
문법이 상당히 깔끔해 졌습니다. 
extends로 상위 클래스를 지정해주고 클래스 안의 함수들은 따로 function을 선언 하지 않아도 됩니다. 
class Person {
constructor(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}

incrementAge() {
this.age += 1;
}
}

class Personal extends Person {
constructor(name, age, gender, occupation, hobby) {
super(name, age, gender);
this.occupation = occupation;
this.hobby = hobby;
}

incrementAge() {
super.incrementAge();
this.age += 20;
console.log(this.age);
}
}



var p1 = new Personal("uiandwe", 20, "woman", "!", "@");

p.incrementAge();


ECMAScript6를 사용하기 위해선 babel를 사용하시면 하위 버전으로 컨버팅 됩니다!!

저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

언제나 그렇듯이 개발하는 도중에 가장 많이 깜박(그러면 안되지만!)하는 부분이 있습니다.

바로 스크립트로 HTML DOM을 추가하고 기존의 이벤트가 잘 돌아가겠지 하는것입니다.



<div id="test">

    <button>ADD</button>

    <ul>

        <li>test0</li>

        <li>test1</li>

        <li>test2</li>

    </ul>

</div>

<script type=" text/javascript ">      

    jQuery(function($){

         $( "#test button ").on( "click" , function() {

            $( "#test ul" ).append( "<li>test" +$('li').length+ "</li>" );

        });          


        $( "#test li" ).on( "click" , function() {     

            alert($(this).text());     

        });           

    });  

</script>



위의 소스는 버튼을 클릭하면 li을 생성하며 li를 클릭시 li의 text를 alert로 띄워주는 소스입니다. 위의 소스의 문제를 눈치 체셨나요? 결과물은 아래와 같습니다.



문제점은 기존에 미리 생성된 DOM에는 이벤트가 적용되지만 새롭게 생성/추가된 DOM에는 이벤트가 적용되지 않습니다.

해당 소스의 문제점은 아래의 소스로 해결할수 있습니다.



<script type=" text/javascript ">      

    jQuery(function($){

        $( "#test" ).on( "click" , "#button", function() {

            $("#test ul").append("<li>test" +$('li').length+ "</li>");

        });          

        $(document ).on( "click" , "li", function() {              

            alert($(this).text());          

        });         

    });  

</script>



문제 해결!!

이라 쓰고 글을 끝낸다면 이글을 쓴 이유가 없겠지요.(위의 정보는 구글에서 치면 바로 나옵니다.)

문제는 왜 이런 현상이 일어나느냐 입니다.

"DOM를 생성해서 그런거 아닌가요?" 네 맞습니다. 더욱 중요한것은 "javascript는 DOM를 잘 생성했지만 왜 이벤트 연결은 못시키지?" 입니다.

1. 사건 해결의 실마리는 document ?

위에서 해결방법으로 셀렉터를 document로 바꿨더니 정상 작동하였습니다. 그렇다면 document는 무엇일까요? (참고로 jquery에서의 document 는 DOM document 를 가르킵니다.)

W3C 에서는 DOM document 를 다음과 같이 정의하고 있습니다.

  • The document itself is a document node
  • All HTML elements are element nodes
  • All HTML attributes are attribute nodes
  • Text inside HTML elements are text nodes
  • Comments are comment nodes


즉 Document 개체는 DOM의 스팩이자 문서 전체를 대표하는 최상위 개체입니다. 브라우저에서 보이는 모든 HTML들을 품고 있는 개체 입니다.

해결 방법의 소스에서 $(document).on()를 써서 해결할수 있었던 이유는 바로 시작점부터 모든 DOM탐색을 거쳐서 하위단까지 클릭된 객체를 탐색하게 됩니다. 이때 셀렉터로 선언된 <li> 와 같다고 판단하여 이벤트가 발생하게 됩니다. 사실 document개체까지 쓸 필요는 없습니다. 상위노드인 <ul>를 셀렉트로 하고 이벤트를 걸어주면 됩니다.(물론 어떤 노드에서 정확히 이벤트가 일어났는지까지 판단해야 하는 로직이 필요합니다.) 즉 새롭게 생성된 DOM의 상위 DOM(새롭게 생성된 DOM이 아닌 지속적으로 있었던 DOM)을 이용하면 이벤트 발생이 가능하다가 됩니다.


2. jquery.on() 때문인가?

on()메소드는 태어난지 얼마 안된 메소드 입니다. 이전엔 live(), bind(), delegate() 등의 메소드를 이용하여 이벤트를 걸어주는 역활(이벤트 맴핑)을 했었습니다. 하지만 on()은 jquery 1.7.x 이후 버전에서 live(), bind(), delegate()를 대체하는 메서드로 이벤트 핸들러 바인딩에 필요한 기존 메서드의 모든 기능을 제공하면서 live()는 jquery 1.7.x 버전 이후부터 폐기되었습니다. 폐기전 함수들은 각기 다른 역활로 이벤트를 맴핑을 했었습니다. bind()는 HTML문서에 로드가 완료된 DOM객체들만 이벤트 맴핑을 live()는 동적/앞으로 생성될 DOM개체 들에게 이벤트 맴핑을 하는 역활 이었습니다. 이렇듯 같은 이벤트 맵핑을 하는 동작을 두가지 함수로 나뉘다 보니 on()으로 통합하게 된것입니다.

즉 "기존에도 새롭게 생성된 DOM개채에 대해서는 jquery 로직을 따로 만들어줘야 했다." 그리고 처음 소스에서의 on()함수가 이벤트 맴핑을 못했다는것은 "on()함수도 해당 DOM개체의 생성에 대한 이벤트 맵핑을 할수가 없다. (document 같이 상위 개체를 거치지 않는이상)" 가 됩니다. 그러면 여기서 새로운 의문점이 나오게 됩니다. "DOM개체의 script 이벤트 맵핑은 언제 해주는걸까?" 입니다.

3. 브라우저를 알아보자.



출처 : http://www.html5rocks.com/en/tutorials/internals/h...

위의 그림이 우리가 사용하고 있는 브라우저 계층을 도식화 한것입니다.

  • 유저 인터페이스- 주소표시줄/다음이전 버튼 등의 우리가 보고 있는 화면출력부분입니다.
  • 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
  • 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
  • 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
  • 자료 저장소는 쿠키와 같이 브라우저내에서 저장하는 공간입니다.

우리가 주목해야 할 부분은 랜더링엔진과 자바스크립트 해석기 부분입니다.

랜더링엔진의 경우 여러 엔진이 있지만 가장 많이 사용하고 있는 webkit 엔진의 동작 과정입니다.



출처 : http://www.html5rocks.com/en/tutorials/internals/h...

랜더링 엔진은 html과 css를 DOM개체/Tree로 변환하여 우리가 보고 있는 Layout을 만든후 보여주는 역활을 해주는 부분입니다. (이 엔진의 차이때문에 css에서 브라우저별 핵이 존재하며 선언부 '-webkit-/-moz-/-o-/-ms-' 가 엔진에서 판단하여 해석을 달리해줍니다.) 이 엔진의 마지막 부분인 Display이후인 DOM이 탐색 및 조작될 준비가 되면 그때 자바스크립트 해석기가 스크립트를 작동시킵니다. 이때 스크립트의 함수들에 따라 이벤트가 실행 및 맵핑되게 됩니다! 모든 DOM에 대한 이벤트를 엔진이 총괄하게 되면서 사용자 인터페이스에 대한 반응을 기다리게 됩니다.

즉 우리가 보고 있는 브라우저 화면이 표시되기 직전에 이벤트 맵핑이 이루어집니다. 그리고 해당 이벤트 맵핑은 이미 로드된 DOM개체들에 한해서만 맵핑됩니다. 



결론!!

이벤트 맵핑의 시작점에 의해서 새롭게 DOM이 생성되면 이벤트 맵핑은 걸리지 않습니다. 단 on()함수는 DOM 개체의 이벤트를 항시 체크하기 때문에 브라우저의 Dispaly이후에 생성된 동적 DOM일 지라도 이벤트 맵핑이 가능합니다.


끝!


추가.

"이벤트 맵핑을 위해 $(document).on()대신 $(document).ready(function() {}); 안에 모두 넣으면 되지 않나요?" 하신다면 ready() 함수의 특성상 브라우저 마다 DOMContentLoaded 이벤트 시작점과 이미지의 경우엔 이미지 로드와 ready()의 시작차이 때문에 문제가 발생할수 있습니다. 또한 스크립트의 모듈화 및 캡슐화가 안되므로 재사용 불가능한 소스만 생성할 가능성이 있습니다.



참고사이트.

http://helloworld.naver.com/helloworld/textyle/593...

http://www.html5rocks.com/en/tutorials/internals/h...

저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret








function isRetinaDisplay() {
if (window.matchMedia) {
var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
return (mq && mq.matches || (window.devicePixelRatio > 1));
}



저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret



jquery scoll 기능을 파이어폭스 작동이 안되는것을  인터넷에서 찾아보면 버그라고 나오면서

(정확히는 파이어폭스에서 scoll이벤트가 먹는 경우는 스크롤이 있을 경우에만 먹는 괴현상이 있습니다. onepage 같은 스크립트를 쓸때 스크롤이 없으니 scoll 이벤트가 않먹더군요. 만일 최신 것을 쓴다면 위와 같은 버그를 미리 스크립트로 방지했는지 확인하시고 쓰기 바랍니다.)


파이어폭스에서만 지원하는 함수인 "DOMMouseScoll" 를 사용하라고 하지만 작동하지 않았다. (저에게만 해당하는 사항일수도 있습니다.)


반면 아직 파이어폭스는 지원하지 안흔다는 "mousewheel" 가 작동을 하더군요. (이게 무슨.....)

해당 이벤트에서 event.originalEvent 객체를 보면 X/Y의 휠 이동값을 가져올수 있습니다. 


다음은 대략적인 예제입니다. 

$(document).on( 'DOMMouseScroll mousewheel', function ( event ) {
if(event.originalEvent.deltaY > 0) {

console.log("up");
return false;
}
if(event.originalEvent.deltaY < 0) {

console.log("down");
return false;
}
return false;
});


혹시 외부 js를 쓸때 스크롤을 지원하지 않는 스크립트였다면 위의 소스로 이벤트를 잡아줘서 구현해주면 됩니다. 



저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

jquery change

web/jQuery 2012.11.21 14:43

http://api.jquery.com/change/


예제로는 어제 올린 달력샘플에서 날짜가 변경시 기존에 월/일/년도 에서 년도/월/일 로 바꾸는 소스입니다.


ex) 미국식날짜 코드 11/09/2012 -> 한국식날짜 코드 2012/11/09






더보기




소스보기에서 빨간색 부분만을 추가하였습니다.

input 값이 바뀐다면 날짜를 배열로 뽑아서 다시 집어 넣는 소스 입니다.


간단하죠?

저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

제목 그대로 정말 유용한 달력피커 입니다.

원본 링크 : http://www.tripwiremagazine.com/2012/08/jquery-datepicker.html



그중에서 제가 좋아하는놈은 요놈.


jQuery UI Datepicker 링크 : http://jqueryui.com/datepicker/


소스또한 심플하고 스크립트도 모두 링크 형식으로 되어 있어서
복사만 해서 가져다가 쓰시면 됩니다.

저작자 표시
신고

'web > jQuery' 카테고리의 다른 글

파이어폭스 / IE 에서 scoll 이벤트가 안될때  (0) 2015.09.18
jquery change  (0) 2012.11.21
Useful jQuery Datepicker  (0) 2012.11.20
jquery-number 를 이용하여 천 단위 콤마 간단히 찍기  (2) 2012.11.16
jquery 체크박스를 통한 내용 복사  (0) 2011.02.01
jquery masonry  (0) 2011.01.20

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

script 를 통하여 단위 콤마를 찍는거야 소스가 널리고 널렸지만. 매일 ctrl+c, ctrl+v 하기도 지겨울때가 되었고

jquery 도 사용하는 마당에 jquery 이용해서 하면 어떨가 싶어서 찾아보다가 재밌는 스크립트를 찾았다.


원본 : https://github.com/teamdf/jquery-number

(아래의 적용 스크립트는 위의 링크에서 받은것으로 사용하였습니다.)



소스코드




더보기





해당 소스를 브라우져에서 보면 다음과 같이 나온다. ready function 에서 이미 콤마를 찍기를 완료하고 보여준다.

마지막 input에는 blur를 적용하여 포커스를 잃었을때 반응한다. 적용화면은 아래와 같다.

(blur 이기 때문에 키보드와 마우스 포커스아웃 모두 먹힌다.)



앞의 0자리는 당연히 알아서 삭제 해준다. 나중에 한번 사용해보길 바란다.


더 많은 기능을 원하신다면 이쪽 링크 참조 : http://code.google.com/p/jquery-numberformatter/

저작자 표시
신고

'web > jQuery' 카테고리의 다른 글

jquery change  (0) 2012.11.21
Useful jQuery Datepicker  (0) 2012.11.20
jquery-number 를 이용하여 천 단위 콤마 간단히 찍기  (2) 2012.11.16
jquery 체크박스를 통한 내용 복사  (0) 2011.02.01
jquery masonry  (0) 2011.01.20
jQuery hide() show()  (0) 2011.01.13

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글  2개가 달렸습니다.
  1. 안녕하세요
    html에서 천단위 콤마처리에 대해서 검색하던 도중
    알게되어 js파일도 받고 import도 모두 적용했는데
    ${"ABC"} 형식의 객체의 숫자에도 적용해보고 싶어서
    함수도 등록해서 span 태그 안에 넣어보고 했는데
    잘 안되서 문의드립니다.
    객체형태의 숫자에 적용하려면 어떻게 해야 하나요?
  2. 객체를 숫자로 바꿔주셔야져 ㅋ

    Integer.parseInt() 이건가 ? ㅎㅎ
secret
인터넷 쇼핑몰에서 흔히 볼수 있는 요거

정보 동일 체크 버튼을 true로 하면 정보가 복사되는 이것을 구현해 보았다.(사실...예제로 있던건데 안되서 내가 만들어버렸다;;)

책 : jquery in action 7장 참조



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#sameAddressControl').click(function(){
          var same = this.checked;
          $('#billAddress').val(same ? $('#shipAddress').val():'');
          $('#billCity').val(same ? $('#shipCity').val():'');
          $('#billState').val(same ? $('#shipState').val():'');
          $('#billZip').val(same ? $('#shipZip').val():'');
          if(same == true){
           $('#billingAddress input').filter('input:text')
       .attr('readonly',true)
     .css('opacity', 0.5);
     }else{
       $('#billingAddress input').filter('input:text').attr('readonly',false)
     .css('opacity', 1);
     }
        });
      });
    </script>
  </head>

  <body>
    <fieldset>
      <legend>시험 양식</legend>
      <div>
        <form name="testForm">
     <div>
       <label>성:</label>
       <input type="text" name="lastName" id="lastName"/>
     </div>
          <div>
            <label>이름:</label>
            <input type="text" name="firstName" id="firstName"/>
          </div>
          
          <div id="shippingAddress">
            <h2>배송지 주소</h2>
            <div>
              <label>거리 주소:</label>
              <input type="text" name="shipAddress"
                     id="shipAddress"/>
            </div>
            <div>
              <label>도시, 주, 우편번호:</label>
              <input type="text" name="shipCity" id="shipCity"/>
              <input type="text" name="shipState" id="shipState"/>
              <input type="text" name="shipZip" id="shipZip"/>
            </div>
          </div>
          <div id="billingAddress">
            <h2>청구지 주소</h2>
            <div>
              <input type="checkbox" id="sameAddressControl"/>
              청구지 주소는 배송지 주소와 동일합니다.
            </div>
            <div>
              <label>거리 주소:</label>
              <input type="text" name="billAddress"
                     id="billAddress"/>
            </div>
            <div>
              <label>도시, 주, 우편번호:</label>
              <input type="text" name="billCity" id="billCity"/>
              <input type="text" name="billState" id="billState"/>
              <input type="text" name="billZip" id="billZip"/>
            </div>
          </div>
        </form>
      </div>
    </fieldset>
  </body>
</html>

-_- 아주 간단하지 않은가;;
jquery 부분만 따로 보면은
 $(function(){
        $('#sameAddressControl').click(function(){
          var same = this.checked;
          $('#billAddress').val(same ? $('#shipAddress').val():'');
          $('#billCity').val(same ? $('#shipCity').val():'');
          $('#billState').val(same ? $('#shipState').val():'');
          $('#billZip').val(same ? $('#shipZip').val():'');
        // 위의 것들은 그대로~ 복사하는거
          if(same == true){
           $('#billingAddress input').filter('input:text')
        .attr('readonly',true)
        .css('opacity', 0.5);
       }else{
         $('#billingAddress input').filter('input:text').attr('readonly',false)
        .css('opacity', 1);
       }
       //체크박스true or false 를 통해서
       //textbox readonly 의 상태를 변경시키고 투명도를 변화시킨다.
        });
      });

-_- 참간단하게 만들수 있구나..;; 나중에 홈페이지 만들때 써먹어야겠다.


저작자 표시
신고

'web > jQuery' 카테고리의 다른 글

Useful jQuery Datepicker  (0) 2012.11.20
jquery-number 를 이용하여 천 단위 콤마 간단히 찍기  (2) 2012.11.16
jquery 체크박스를 통한 내용 복사  (0) 2011.02.01
jquery masonry  (0) 2011.01.20
jQuery hide() show()  (0) 2011.01.13
jQuery after() prepend()  (0) 2011.01.11

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

jquery masonry

web/jQuery 2011.01.20 16:01
masonry란 벽돌로 건축하는것는 것을 뜻한다. 
원본 : http://desandro.com/demo/masonry/docs/ (라이센스는 jquery 에 있다고 명시되어 있다.)
The MIT License

Copyright © 2010 David DeSandro

아래 그림을 보는게 훨신 빠르겠다.
문단을 위와 같이 벽돌 모양으로 하는 것. jquery 를 하다가 잼있는 라이블러리를 찾아서 해볼려고 한다.
(실패 할수도 잇음..;; 아직 않해봐서 실시간으로 해서 올리는중?)

먼저 css만으로 문단으로 나눠 보았다.


<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style>
.wrap {
  background: #FFF;
  border: 0px solid #456;
  padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
clear: both;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
       border-radius: 5px;
}

.wrap:after,
#tumblelog:after,
#filtering-nav:after { 
  content: ''; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.box {
  margin: 5px;
  padding: 5px;
  background: #D8D5D2;
  font-size: 11px;
  float: left;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }

.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }



* {
  margin: 0;
  padding: 0;
}

body { 
  font: 13px 'Helvetica Neue', Arial, sans-serif;
  background: #D8D5D2;
  color: #222;
}

a {
  color: #A2C;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #D26;
}

h1, h2 {
  font-weight:100;
}

h1 {
  font-size: 36px;
}

h1, h2, h3, p, ul, ol, pre, dl {
  margin-bottom: 1.0em;
}

#comparison .example {
  width: 420px;
  float: left;
  margin-right: 20px;
}


#comparison .box h5 {
  float: left;
  margin-bottom: 0;
  font-size: 30px;
  margin-right: 4px;
  line-height: 28px;
  font-weight: bold;
  color: #FFF;
}


</style>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>

<div id="comparison">
<div class="example"> 
        <h3>Masonry</h3> 
        <div id="secondary" class="wrap"> 
          <div class="box col1"> 
            <h5>1</h5> 
            <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris. </p> 
          </div> 
 
          <div class="box col2"> 
            <h5>2</h5> 
            <p>Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.</p> 
          </div> 
 
          <div class="box col1"> 
            <h5>3</h5> 
            <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit.  Aenean ac mauris non ligula.  </p> 
          </div> 
 
          <div class="box col1"> 
            <h5>4</h5> 
            <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p> 
          </div> 
 
          <div class="box col1"> 
            <h5>5</h5> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p> 
          </div> 
 
          <div class="box col1"> 
            <h5>6</h5> 
            <p>Cadipiscing in, lacinia vel, tellus. </p> 
          </div> 
 
          <div class="box col1"> 
            <h5>7</h5> 
            <p>Pellentesque a diam sit amet mi ullamcorper vehicula.  adipiscing in, lacinia vel, tellus.</p> 
          </div> 
 
          <div class="box col3"> 
            <h5>8</h5> 
            <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.  Suspendisse ac urna. Etiam pellentesque. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.  Suspendisse ac urna. Etiam pellentesque. </p> 
          </div> 
 
          <div class="box col2"> 
            <h5>9</h5> 
            <p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Pellentesque a diam sit amet mi ullamcorper vehicula.  adipiscing in, lacinia vel, tellus.</p> 
          </div> 
 
          <div class="box col1"> 
             <h5>10</h5> 
             <p>Etiam pellen tesque mauris ut lectus.</p> 
           </div> 
 
           <div class="box col1"> 
             <h5>11</h5> 
             <p>Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspen disse ac urna. Ut condi mentum mi vel tellus.</p> 
           </div> 
 
           <div class="box col1"> 
              <h5>12</h5> 
             <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p> 
           </div> 
 
        </div> <!-- /#secondary.wrap --> 
      </div>    
      
     </div> 
</body>
</html>



문단(<div>)의 설정상 각 고유의 영역을 가지게 된다. 가장 큰 영역을 기준으로 나뉘기 때문에 위와 같이 공백이 생기게 된다. 이제 간단하게 jquery 을 통해서 처음 봤던 벽돌 모양으로 만들어 본다.
http://desandro.com/resources/jquery-masonry/ 에서 js 파일을 다운 받아 보일려는 페이지와 동일한 디렉토리에 넣은 다음 아래의 코드만 추가 하면 된다.

  <script src="./jquery.masonry.js"></script> 
    <script> 
   $(function(){
   $('#secondary').masonry({columnWidth: 100});
   });
  </script> 



- 소스
예제에 미디어와 문단별 구분도 있는데 다음 포스팅은 그걸로 해야겠다.
정말..jquery 는....대박이다.
저작자 표시
신고

'web > jQuery' 카테고리의 다른 글

jquery-number 를 이용하여 천 단위 콤마 간단히 찍기  (2) 2012.11.16
jquery 체크박스를 통한 내용 복사  (0) 2011.02.01
jquery masonry  (0) 2011.01.20
jQuery hide() show()  (0) 2011.01.13
jQuery after() prepend()  (0) 2011.01.11
jQuery click()  (0) 2011.01.10

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

jQuery hide() show()

web/jQuery 2011.01.13 06:16
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <div></div>

 <script>
 function show() {
 $('#con').show();
 $('.con').show();
}
function hide1() {
 $('#con').hide();
 
}

function hide2() {
 
 $('.con').hide();
}
 </script>
 
 <input type="button" value="보이기" onclick="javascript:show();">
<input type="button" value="tr감추기" onclick="javascript:hide1();">
<input type="button" value="td감추기" onclick="javascript:hide2();">



<table>
 <tr id ="con">
  <td>1</td><td>2</td><td>3</td>
 </tr>
 <tr>
   <td>4</td><td class = "con">5</td><td>6</td>
 </tr>
</table>
 
 
</body>
</html>

1. 보이기 누른 상태(혹은 초기상태)

2. tr 감추기 버튼을 누른 상태(위의 첫번째 줄이 사라진다.)
3. td감추기 버튼을 누른 상태(아래의 5가 사라진다.)
4. tr감추기와 td감추기를 누른 상태



hide() 함수는 선택한 엘레멘트가 show 상태일때  화면상에서 숨기는 역활을 한다.
show() 함수는 선택한 엘레멘트가 hide 상태일 경우 화면에 보여주는 역활을 한다.
저작자 표시
신고

'web > jQuery' 카테고리의 다른 글

jquery 체크박스를 통한 내용 복사  (0) 2011.02.01
jquery masonry  (0) 2011.01.20
jQuery hide() show()  (0) 2011.01.13
jQuery after() prepend()  (0) 2011.01.11
jQuery click()  (0) 2011.01.10
jQuery val() 두번째  (0) 2011.01.09

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret