jquery 플러그인을 이용한 멀티라인 말줄임효과 방법을 알아보자.

 

http://dotdotdot.frebsite.nl/

위의 사이트에서 플러그인을 다운받을 수 있다.

 

이 플러그인을 이용하면 다음과 같은 효과를 적용할 수 있다.

 위의 그림과 같이 블럭을 벗어나는 글을 jquery 플러그인을 이용함으로써 말줄임 효과를 나타낼 수 있다. 

또한 Read More와 같은 링크를 주어 클릭하면 자세한 글을 볼 수 있게 만들 수 있다.

 그리고 윈도우 사이즈에 맞게 화면을 조절하거나…

중간 부분을 생각하여 보여줄 수도 있다.

 

플러그인의 자세한 내용은 홈페이지를 참고하길… 

 

∗적용 방법

1. 사이트에서 플러그인을 다운받아 압축을 해제한 후 홈페이지의 script폴더에 파일들을 넣는다.

2. <header></header> 태그 사이에 스크립트 파일의 경로를 작성한다.

예:

<header>

    <script src=”./script/jquery.dotdotdot.js” type=”text/javascript”></script>

</header>

3. 말줄임을 적용할 구간에 id 혹은 class를 작성한다.

예:

<div id=”ellipsis”>~~~~~~</div>

혹은 

<div class=”ellipsis”>~~~~~~</div>

4. css를 이용하여 div의 높이를 작성한다.

5. 말줄임을 적용할 jquery를 작성한다.(별도의 .js파일로 작성)

예: Read More를 적용한 예

$(document).ready(function() {
    $(“#ellipsis”).dotdotdot({
        after: “a.readmore”
    });
});

혹은

$(document).ready(function() {
    $(“.ellipsis”).dotdotdot({
        after: “a.readmore”
    });
});