jQuery 페이지 스크롤링(scrolling) 플러그인

jQuery/jQuery플러그인 2010.07.06 20:27

jQuery 페이지 스크롤링(scrolling) 플러그인

클릭에따라 페이지로 가는 플러그인이다. CSS3로 구며줬고 변경가능은 페이지이동시 속도(duration)이다.

미리보는 데모 http://sianasiatiger.cafe24.com/study/Jp_scroll.html

HTML 코드

네비게이션은 다음과 같이 구성한다. 아이디명, 클래스명을 잘봐두자


<div id="nav-dock"> 
 <ul>
	<li><a href="#" id="prev">↑ Prev</a></li>
	<li><a href="#" id="next">↓ Next</a></li>
	<li><a class="scrolltoanchor" href="#comments">Comments</a></li>
	<li><a class="scrolltoanchor" href="#reply">Reply</a></li>
    <li><a href="#top" class="scrolltoanchor">맨위로</a></li>
    </ul>
</div>

콘텐츠 html소스는 다음과 같다.클래스의명을 post로 해주었다.


<div class="post"><h2>포스팅 1</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 2</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 3</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 4</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 5</h2><p>내용물,그림등</p></div>

네비게이션

네비게이션은 페이지이동해도 유지하도록 고정으로 해준다.


#nav-dock {
	position: fixed;
	right: 15px;
	top: 35%;
}

Javascript

jquery와 사용된스크립트

이 플러그인은 http://sianasiatiger.cafe24.com/js/jquery.scrollTo-min.js

삽입된 스크립트를 보자


$(function() {
    function scroll(direction) {
        var scroll, i,
                positions = [],
                here = $(window).scrollTop(),
                collection = $('.post');
            collection.each(function() {
            positions.push(parseInt($(this).offset()['top'],10));
       });
       for(i = 0; i < positions.length; i++) {
         if (direction == 'next' && positions[i] > here) 
		     { scroll = collection.get(i); break; }
         if (direction == 'prev' && i > 0 && positions[i] >= here) 
		     { scroll = collection.get(i-1); break; }
        }
        if (scroll) {
            $.scrollTo(scroll, {
                duration: 750
            });
        }
        return false;
    }
    $("#next,#prev").click(function() {
        return scroll($(this).attr('id'));
    });
    $(".scrolltoanchor").click(function() {
        $.scrollTo($($(this).attr("href")), {
            duration: 750
        });
        return false;
    });
});

post는 콘텐츠내용의 클래스이다

#next,#prev는 아이디로, scrolltoanchor는 클릭시 href에서 지정해준주소로 가게 지정한것을 보여준다.


마지막으로 꾸미기. CSS는 알아서 꾸미자 예제는 CSS3를 사용해서 둥근모서리를 보여준다.


body {
	background: #ededed;
	width: 800px;
	margin: 40px auto 100px;
}
ul,li{list-style : none; }
a {
	color: #66F;
	text-decoration: none;
	outline: none;
}
.post {
	height: 600px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#comments {
	height: 1000px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#reply {
	height: 600px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#nav-dock {
	position: fixed;
	right: 15px;
	top: 35%;
}
#nav-dock a {
	display: block;
	padding: 3px 10px;
	margin: 3px 0;
	background: #666;
	color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#nav-dock a:hover {
	background: #000;
}
#nav-dock #next {
	margin-bottom: 10px;
}

저작자 표시
신고

설정

트랙백

댓글

DOM 라운드박스 심플

jQuery/DOM&jQuery 2009.07.02 15:00
먼저 올린 라운딩 박스는 가로 세로 내용물 모두 자유롭게 설정가능하다.
그런데 굳이 가로가 일정치라면  그방법대로 할필요가 없다.
이번엔 가로 사이즈가 정해진경우

목적은
태그
<div id="cb>내용물</div> 여기에 앞뒤로 라운딩그림을 추가해주는것이다.
dom으로 생성할 코드는
<div id="cbbt"></div> //위 라운드박스
<div id="cb>내용물</div>
<div id="cddd"></div> //아래 라운드박스

//먼저요구되는건 insertAfter 함수. insertBefore은 스크립트에서 지원되지만 insertBefore은 없다 
//두함수의 기능은
insertBefore(A, B); :B 엘레먼트앞에 A를 삽입
insertAfter(A, B);   :B 엘레먼트뒤에 A를 삽입

//먼저 insertAfter을 만들어준다, 원리는 insertBefore를 역이용한것이다.
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

function displaydivision(){
     if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    // 모든 div를 검색
 var cb = document.getElementById("cb"); //cb라는id를 얻는다.
 var bottom = document.createElement("div"); //div태그생성 변수명은 bottom
 bottom.id="cbbb"; // 생성된 태그의 아이디를 cbbb로지정
 insertAfter(bottom, cb); //insertAfter을 이용해서 cb 아래에 만들어준다.

 var header = document.createElement("div");//역시 div태그 생성 변수명은 header
 header.id="cbbt"; //생성된 태그 아이디를 cbbt
 cb.parentNode.insertBefore( header, cb); // nsertBefore를 이용해서 cb위에 만들어준다.
}
저작자 표시
신고

설정

트랙백

댓글

dom 라운드 박스

jQuery/DOM&jQuery 2009.07.02 14:58
원래 의도는 둥근박스를 위해서 의미 없는 불필요한 클래스를 여러개 지정해야 하는데...이를 자바로 따로 생성한다.

의도하고자하는 기본 html는 다음과 같고
 <div class="box">
 
  <div class="bt"><div></div>
  </div>
   <div class="i1">
     <div class="i2">
       <div class="i3">sdsasd</div></div></div>

  <div class="bb"><div></div>
  </div>
</div>

사용될 html은
<div class="box">
<div class="cbb">
</div>
</div>
준비할 이미지는 box.gif(이미지 에디터 에서 제작한 커다란  라운드 박스) borders.gif(양쪽 라인)이둘.

css는
.box {
margin: 15px 0 0 0;
padding: 5px 0 5px 0;
}
/* cbb 자바스크립트가 지원 안될때 */
.cbb {
margin: 0 10px 0 10px;
background: #FFF;
padding: 5px 0 5px 0;
line-height: 170%;
}

/* 메인박스 */
.cbb p, .cb p {
margin: 0;
padding: 0 5px 5px 50px;
color: #333;
}

/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

.cb {
margin: 0.5em 0;
line-height: 170%;
    }

/* 상단 코너*/
.bt {
    background:url(box.png) no-repeat 100% 0 !important;
    background:url(box.gif) no-repeat 100% 0;
    margin:0 0 0 18px;
    height:27px;
    }
.bt div {
    height:27px;
    width:18px;
    position:relative;
    left:-18px;
    background:url(box.png) no-repeat 0 0 !important;
    background:url(box.gif) no-repeat 0 0;
    }

/* 하단코너*/
.bb {
    background:url(box.png) no-repeat 100% 100% !important;
    background:url(box.gif) no-repeat 100% 100%;
    margin:0 0 0 12px;
    height:14px;
    }
.bb div {
    height:14px;
    width:12px;
    position:relative;
    left:-12px;
    background:url(box.png) no-repeat 0 100% !important;
    background:url(box.gif) no-repeat 0 100%;
    }

/* 왼쪽 라인 */
.i1 {
    padding: 0 0 0 12px;
    background:url(borders.png) repeat-y 0 0 !important;
    background:url(borders.gif) repeat-y 0 0;
    }
/*오른쪽라인 */
.i2 {
    padding: 0 12px 0 0;
    background:url(borders.png) repeat-y 100% 0 !important;
    background:url(borders.gif) repeat-y 100% 0;
    }
/*내용*/
.i3 {
    background:#FFF;
border: 1px solid #FFF;
    border-width:1px 0;
    padding:0 5px;
    }
저작자 표시
신고

설정

트랙백

댓글

DOM 함수 addLoadEvent

jQuery/DOM&jQuery 2009.07.02 14:55

함수를 여러번 사용할때 쓰는 addLoadEvent

function A(){ }
 function B(){ }
 function C(){ }
 .
 .
 .
 function D(){ }

여러합수를 사용할때 전역 함수가 아닌 경우, 그리고 각함수에 귀찮게 이벤트핸들러를 줄필요없게 쓰는함수이다.
addLoadEvent ( 함수명);

그리고 순차적으로 실행된다.
addLoadEvent(A) ;
addLoadEvent(B) ;

코드는 다음과 같다

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
저작자 표시
신고

설정

트랙백

댓글

티스토리 카테고리 메뉴...

jQuery/DOM&jQuery 2008.10.01 13:36
메뉴를 보면 답답함이 느껴 질떄가 있는데...

카테고리를 보면 줄줄이 이어져있는모습..떄론 좋기도 하지만 답답하기도 하다.

이걸 자바스크립트로  대체 시켜서 바꿀순없을까 하는 생각도..

아직 내게 그정도 능력은 없지만..ㅎㅎ
신고

설정

트랙백

댓글


티스토리 툴바