-
[3분요리] 상/하 페이지 스크롤 버튼 달기 v0.01 beta프로그래밍/웹개발 2012. 2. 2. 21:043분요리 두번째입니다. ~
모바일 웹에서 스크롤이 너무 길어서 손가락에 쥐가 날것 같을때가 간혹 있습니다.
그래서 문득, 예전에 웹사이트들에 달려있던(지금도 몇몇사이트에 있는것 같긴 합니다) 스크롤 해주는 버튼이 생각이 나더라구요.
뭐 사실 별로 쓸데가 있을지는 모르겠지만, 제가 필요해서 만들었고, 만든김에 3분요리 시리즈로 다시 만들었습니다 :D
목적 : 한쪽 구석에 위아래 스크롤할수 있는 버튼을 붙여두고 누르면 한페이지씩 아래/위 로 넘겨줍니다.
장점 : 3분만에 달 수 있습니다. 패드 이미지를 직접 작업하실 수 있습니다.
단점 : 급조되어서 완벽하지 않습니다. 모바일에서 사용하려 했기에, 익스플로러 9 이하버젼은 테스트하지 않았습니다. (기타 크롬, 사파리등의 브라우져는 문제없이보입니다)
* 제 블로그에 올린 코드로 발생한 문제에 대해 일체 보증하지 않습니다. 문제점에 대해 알려주시면 수정하겠지만, 그것은 보증책임/유지보수의 의미가 아니며, 어떠한 책임도 지지 않습니다.
http://www.facebook.com/rawadykorea 를 좋아요 해주시면 업뎃이 됩니다 :D
Sample 확인하기
(테스트가 확실히 안되어서 파일 스크립트 파일 함께 올립니다.
다운받으셔서 수정해서 쓰셔도 되고, 수정하지 않으실거라면, 이전 3분요리 슬라이더 처럼, 직접 링크 걸으셔도 상관없습니다. 아래 내용 참고)
위에 들어가보시면, 우측 하단에 메달려있는 버튼입니다. 눌러보시면 무엇 하는지 확인하실 수 있습니다. (IE 9 이상 / 크롬, 사파리 에서 확인하세요)
버튼 이미지는 퍼오기도 뭐하고 해서 제가 대충 그렸습니다. 만 걱정하지마세요, 원하는 이미지로 호출할 수 있습니다. ^^
요녀석도 마찬가지로, 그냥 이대로 붙이실려면, 5~6줄의 코드만 추가하시면 됩니다.
샘플 페이지의 코드먼저 보겠습니다.
<div style....></div> 부분들은 그냥 화면채우기 용 입니다. ^^
사용시 추가하셔야 하는 코드는 다음과 같습니다..
1. <head> 안에
<script type="text/javascript" src="http://www.rawady.com/open/js/rawdpad.js"></script>
혹은, 직접 올리셨으면 직접 올리신 자바스크립트 파일을 링크해주세요.
2. <body> 에 onscroll 이벤트를 걸어주셔야합니다.
<body onscroll="rawScrollRefit();">
rawScrollRefit(); 입니다. 변경하시면 안되고, 반드시 호출되어야합니다.
3. div 추가
<body> 의 마지막 부근에 아래 내용을 추가해주세요.
<div id="raw_scrolldpad"></div>
div의 id 는 변경하셔도 괜찮습니다.
4. 초기화
방금 추가한 div 아래에 다음 스크립트를 추가합니다.
<script type="text/javascript">
initRawScrollpad("raw_scrolldpad");
</script>
initRawScrollpad("raw_scrolldpad"); 를 호출합니다.
원형 : initRawScrollpad( PAD_ID , IMAGE_URL );
파라미터가 두개이며, 첫번째는 필수, 두번째는 선택입니다.
첫번째 PAD_ID는 3번에서 추가한 div의 id를 적어야 하며, 필수값입니다.
두번째 IMAGE_URL 은 제가 그린 구린 버튼이미지를 바꿀때 필요합니다.
원하는 이미지를 그리신뒤에, 해당 이미지의 URL(http://를 포함하는 전체 주소) 을 적어주시면, 해당하는 이미지로 표시됩니다.
패드 이미지 변경하기
기본 버튼인데, 빨간색으로 새로 작업해봤습니다... ;;
여전히 이쁘지는 않네요. .. 아무튼 -_-;; 그렸고, 서버에 올려둔 url은 http://www.rawady.com/open/dummy/redbutton.png 입니다.
이제 위 이미지로 표시되게 하려면 마지막 4번에서 추가한 스크립트를 아래처럼 변경하시면 됩니다.
<script type="text/javascript">
initRawScrollpad("raw_scrolldpad","http://www.rawady.com/open/dummy/redbutton.png");
</script>
두번째 파라메타가 추가되었고, http로 시작하는 이미지 주소입니다. 이렇게 호출하면, 아래처럼 해당하는 이미지로 패드를 표시합니다.
이미지 만드실때 참고할 내용입니다.
이미지는 위아래 화살표가 분리되어 있지 않은, 50x100 (WxH)의 이미지입니다.
filetype : 관계없음
너비 : 50 pixel
높이 : 100 pixel
alpha : 1 ( 반투명은 자체적으로 적용됩니다.)
각각의 버튼 영역은,
40x40 크기이며, 위, 아래, 좌,우에 각각 5 pixel 의 여백이 추가되어있습니다.
도움이 되셨다면, 옆에 있는 페이스북에 좋아요 한번 꾸욱~ 해주시면 사랑을 드려요 ^____^
* 위 첨부파일을 다른곳에 재 배포시에, 반드시 출처를 표기해주시기 바라며, 스크립트의 상단 주석내용은 변경/삭제를 금지합니다.
수정하신 분의 추가 주석은 기존 주석에 이어서 작성해주시면 감사드리겠습니다. _ _
'프로그래밍 > 웹개발' 카테고리의 다른 글
[노트] ie6에서 ul li - inline-block 먹이기 (0) 2012.05.12 [3분 업뎃] 언프슬라이더 0.4 업뎃 (0) 2012.02.05 위시랜드 페이스북에 웹툰이 오픈했습니다~ > < (0) 2012.02.01 [3분요리] 플래시 필요없는 이미지 슬라이더 v.0.4 beta - update 0.4 (4) 2012.01.29 페이스북 메뉴 추가 - 위시랜드 (0) 2012.01.24 댓글
rawdpad.js.zip
