티스토리 뷰

IT 이야기/프로그래밍

[JQuery 예제] 네이버 검색창 밑에 있는 검색목록 만들기

하늘과 나b 2012. 2. 24. 15:21

JQuery 예제- 네이버 검색창 밑에 있는 검색목록 만들기



오늘은 JQuery를 이용해서 네이버 검색창 밑에 있는 검색목록을 만들어 보도록 하겠습니다.

바로 아래 그림에 있는 빨간 부분이 오늘 만들어 볼 예제입니다.

 


아래와 같이 소스를 입력합니다


    
<!DOCTYPE html>
<html>
    <head>
        <title> sjisbmoc </title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script language='javascript' type='text/javascript'>
//<![CDATA[

var pos = 0;

function fncView(prm)
{
    var dvs = $('div.ldiv')
    pos += prm;
    if(pos>=dvs.length) pos = 0;
    else if(pos<0) pos=dvs.length-1;

    for(var i=0; i<dvs.length; i++)
    {
        if(i==pos) $(dvs[i]).css('display','block');
        else $(dvs[i]).css('display','none');
    }
}

//]]>
</script>
<style type='text/css'>
div.ldiv {font-size:12px; float:left; padding-left:5px; padding-right:5px; width:150px;}
</style>
    </head>
    <body>

        <div>
            <div class='ldiv'>운영체제(OS)</div>
            <div class='ldiv' style='display:none;'>프로그래밍</div>
            <div class='ldiv' style='display:none;'>웹사이트 제작, 운영</div>
            <div class='ldiv' style='display:none;'>컴퓨터네트워크</div>
            <div class='ldiv' style='display:none;'>데이터베이스</div>
            <div class='btn'>
                <img src='http://static.naver.net/kin/09renewal/btn_badge_prev.gif' onclick='fncView(-1)' style='cursor:pointer' />
                <img src='http://static.naver.net/kin/09renewal/btn_badge_next.gif' onclick='fncView(1)' style='cursor:pointer' />
            </div>
        </div>

    </body>
</html>


출처 : 네이버 지식인 태양신 sjisbmoc님의 답변  (구체적인 페이지 주소는 잘 모르겠네요)

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[HTML 쉽게 이해하기 강좌] - <meta> 태그에 대해서  (0) 2012.04.17
[C언어 소스] 짝수의 합을 구하는 프로그램 소스  (0) 2012.04.17
[C언어 소스] 대문자는 소문자 ,소문자는 대문자로 치환하는 프로그램  (3) 2012.04.17
[Javascript] 인터넷 익스플로러(Internet Explorer)에서 console.log 사용하기  (1) 2012.04.13
[Javascript] document.getElementById()  (4) 2012.04.10
[C언어 소스] 구구단 전체/홀수/짝수별 출력하는 소스  (0) 2011.12.08
[CSS 쉽게 이해하기] CSS 기본  (0) 2011.12.07
당신이 사용하고 있는 브라우저에서 HTML5를 사용한다면 점수는?  (0) 2011.12.07
[HTML 쉽게 이해하기 강좌] - <input> 태그  (0) 2011.12.07
[HTML 쉽게 이해하기 강좌] - <form> 태그  (0) 2011.12.07
공유하기 링크
댓글