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;
}

저작자 표시
신고

설정

트랙백

댓글

jquery 플러그인 다단네비게이션 심플

jQuery/jQuery플러그인 2010.04.02 13:48

jquery 플러그인 다단네비게이션


출처는

http://apycom.com/menus/8-white-smoke.html
여기서 색깔에따라원하는것을 받을 수 있다

다좋지만 문제는 span남발이며 jquery의 특성인 옵션 부가기능이 없다.그냥 단순하게 사용하고싶은이에게 추천

저작자 표시
신고

설정

트랙백

댓글

jQuery 다단 네비게이션 플러그인

jQuery/jQuery플러그인 2010.04.01 16:20

jQuery 다단 네비게이션 플러그인

다단 네비게이션을 jQuery를 통해 쉽게 만들어보자 목표는 흔히보는 아래 그림과 같은 네비게이션을 구해볼것이다.

출처는http://plugins.jquery.com/project/jfastmenu

기본 html

메인메뉴는 5개로나누어진다.홈,그림,음악,방명록,잡다이것을 리스트로 코딩하자

  • 그림
  • 음악
  • 방명록
  • 잡다

세분화한 카테고리로 그림안에 일반,디자인,미술가를 더 넣을것이다.또 거기에 좀더 넣어 다단계로 만든다.아래와같은 결과.

소스는 다음과 같다.


jquery로 작동 시키기

이제 플러그인의 기능을 이용하여 작동시켜보자. CSS꾸밈없이 작동여부만 확인한다.사용방법은 플러그인이라서 간단하다.


내용에 위와같은 아이디를 지정해주고 아래와 같이 사용

$(document).ready(function(){
	$.jFastMenu("#menu");
   });

CSS로 꾸미기

css에서 중요한것은 별반없다. 네비게이션의 색깔, 호버시 색깔,이 정도는 잘알것이다.중요한것은 다단계 레이아웃이므로 호버 전 기본 초기값으로 하위 네비게이션(예제 같은경우 일반,디자인,미술가등등)을 display :none으로 감춰주는것이다.나머지는 꾸밈으로 사용자가 원하는데로.

#menu{
	font-family:tahoma, verdana, arial;
	font-size:11px;
}
#menu ul{
	list-style:none;
	margin:0px;
	padding:0px;
}
#menu ul li{
	float:left;
	margin:0px;
	padding:0px;
	position:relative;
}
#menu ul li a{
	background-color:#EFEFEF;
	color:#000;
	display:block;
	margin:0px;
	padding:10px;
	text-decoration:none;
}
#menu ul li a:hover{
	background-color:#E9E9E9;
	color:#000;
}
#menu ul li ul{
	position:absolute;
	display:none;
    /*일반,디자인,미술가를 초기값으로 보이지않게한다.*/
}
#menu ul li ul li{
	clear:left;
}
#menu ul li ul li a{
	text-decoration:none;
	width:120px;
}
#menu ul li ul li ul{
	clear:left;
	display:none;
    /*디자인,미술가의 하위네비를 감춘다.*/
	left:140px;
	/* Bengin CSS-HACK, for Microsoft Internet Explorer */
	_left:120px;
	/* End CSS-HACK */
	position:absolute;
	top:0px;
}

마지막으로 살필것은 IE핵

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

저작자 표시
신고

설정

트랙백

댓글

jQuery 이미지 슬라이드 플러그인

jQuery/jQuery플러그인 2010.03.30 15:31

jQuery 이미지 슬라이드 플러그인

이 플러그인은 가운데 그림을 클릭시 확대 그리고 양쪽그림을 클릭시 다음그림을 슬라이방식으로 보여준다,

다운은 여기서 http://plugins.jquery.com/files/jquery.slidingGallery-1.1.js.txt

먼저 html 부터 보자


스크립트는
        $(function() {
            $('div.gallery img').slidingGallery();
        });

확인은 아래링크에서

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


저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바