web standard/jquery2016. 10. 5. 10:31

출처: http://recoveryman.tistory.com/120




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style></style>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $("html, body").on('mousewheel DOMMouseScroll'function(e) {
                var E = e.originalEvent;
                delta = 0;
                console.log(E);
                if (E.detail) {
                    delta = E.detail * -40;
                    $('body').text(delta);
                }else{
                    delta = E.wheelDelta;
                    $('body').text(delta);
                };
            });
        });
   </script>
</head>
<body>
    
</body>
</html>
 
cs


'web standard > jquery' 카테고리의 다른 글

이벤트 설정 시에 jQuery의 .on()을 사용하자.  (0) 2014.10.13
[jquery] ajax 방법  (0) 2014.04.11
jQuery Slider plugin  (0) 2014.01.09
width가 100%인 이미지에 맵 걸기  (0) 2013.04.22
좌우(상하) 슬라이드  (0) 2012.02.29
Posted by 수라
web standard/jquery2014. 10. 13. 17:09

출처 : http://www.mimul.com/pebble/default/2013/03/06/1362559765579.html


jQuery 1.7에서 .bind(), .live(), .delegate()가 .on()으로 통합되었다길래 좀 살펴보았다.

개요

.bind(), .live(), .delegate(), .on()은 이벤트에 관련된 기능으로, 먼저 각각의 기능들을 살펴보는 것이 순서인것 같아 먼저 기능들을 살펴본다.

.bind()는 가장 많이 쓰는 이벤트 설정 함수이다. DOM이 로드된 후 추가된 element들에 대해서 event handler를 처리할 수 없고, .live(), .delegate()는 나중에 추가된 element들의 이벤트들을 처리할 수 있다.

foo에 이벤트를 설정하고 싶다면 아래와 같이 사용된다.
$(".foo").bind("click", handler);
$(".foo").on("click", handler);

.delegate()는 이벤트 설정을 부모에 대해 한다. 이런 방식을 이벤트 대리자라고 명명한다.

.foo에 이벤트를 설정하면 다음과 같이 사용된다.
$("#container").delegate(".foo", "click", handler);
$("#container").on("click", ".foo", handler);

.live()는 이벤트의 설정 대상이 document가 된다.

foo에 이벤트를 설정하고 싶다면 아래와 같이 사용된다.
$(".foo").live("click", handler);
$(document).on("click", ".foo", handler);

.on()을 사용해야 하는 이유

1. .on()으로 통합 될 예정

.live()와 .die()는 jQuery 1.9에서 빠졌고(1.7 Deprecations), .delegate()도 향후 없어질 예정이어서 .on을 사용하는 습관을 가지자.

2. .on()으로 여러 종류의 이벤트 설정이 가능

- 첫번째 인자에 공백로 구분자로 해 여러 이벤트에 대응이 가능하다.
$(".foo").on("change blur", handler);

- 각 이벤트에 여러 처리자를 둘 수 있다.
. 하나의 elements에 여러 이벤트 설정
$(".foo").on({ 
  "change" : function(){...},
  "blur" : function(){...} 
});

. 이벤트 대리자에서의 여러 이벤트 설정
$("#container") on ( { 
  "change" : function(){...},
  "blur" : function(){...} 
}, ".foo");


'web standard > jquery' 카테고리의 다른 글

마우스 휠 이벤트 체크  (0) 2016.10.05
[jquery] ajax 방법  (0) 2014.04.11
jQuery Slider plugin  (0) 2014.01.09
width가 100%인 이미지에 맵 걸기  (0) 2013.04.22
좌우(상하) 슬라이드  (0) 2012.02.29
Posted by 수라
web standard/jquery2014. 4. 11. 16:09

출처 : http://rocabilly.tistory.com/27


[jQuery] Ajax 방법

 

- 각 Ajax 방식을 호출하는 방법

  1. // 버튼 클릭시 ajax 실행  
  2.     var url="test.aspx";  
  3.     var params="param1="+param1+"¶m2="+param1;  
  4.   
  5. $("#btnOK").click(function(){  
  6.       
  7.     $.ajax({      
  8.         type:"POST",  
  9.         url:url,      
  10.         data:params,      
  11.         success:function(args){   
  12.             $("#result").html(args);      
  13.         },   
  14.         beforeSend:showRequest,  
  15.         error:function(e){  
  16.             alert(e.responseText);  
  17.         }  
  18.     });  
  19.       
  20. });  

 

 

1. $.post() 방식

 

- 서버에 데이터를 HTTP POST 방식으로 전송한 후 서버측 응답 받을 때 사용

 

[형식]

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

- dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )

 

 

[$.ajax 로 표현]

  1. $.ajax({  
  2.   type: 'POST',  
  3.   url: url,  
  4.   data: data,  
  5.   success: success,  
  6.   dataType: dataType  
  7. });  

 

 

[사용예]

  1. // 요청 Url 만 , 리턴 결과값 무시  
  2. $.post("http://web/test/");  
  3.   
  4. // 요청 Url + 추가적으로 보내는 Json Data, 리턴 결과값 무시  
  5. $.post("http://web/test/", { name: "John", time: "2pm" } );  
  6.   
  7. // 요청 Url + 추가적으로 보내는 Array Data, 리턴 결과값 무시  
  8. $.post("http://web/test/", { 'choices[]': ["Jon""Susan"] });  
  9.   
  10. // 요청 Url + 폼데이터, 리턴 결과값 무시  
  11. $.post("http://web/test/", $("#testform").serialize());  
  12.   
  13. // 요청 Url, xml(또는 html)리턴 결과값  
  14. $.post("http://web/test/",   
  15.       function(data) {    alert("Data Loaded: " + data);  });  
  16.   
  17. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값, 결과값 형식  
  18. $.post("http://web/test/", { name: "John", time: "2pm" },    
  19.       function(data) {    process(data);  },   "xml" );  
  20.   
  21. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식  
  22. $.post("http://web/test/", { "func""getNameAndTime" },    
  23.       function(data){      
  24.                      console.log(data.name); // John      
  25.                      console.log(data.time); //  2pm    
  26.       }, "json");  

 

 

 

 

2. $.get() 방식

 

- 서버에 데이터를 HTTP GET 방식으로 전송한 후 서버측 응답 받을 때 사용

 

[형식]

jQuery.get(  url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

- dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )

 

 

[$.ajax 로 표현]

  1. $.ajax({  
  2.   url: url,  
  3.   data: data,  
  4.   success: success,  
  5.   dataType: dataType  
  6. });  

 

 

[사용예]

  1. // 요청 Url 만 , 리턴 결과값 무시  
  2. $.get("http://web/test/");  
  3.   
  4. // 요청 Url + 추가적으로 보내는 Json Data, 리턴 결과값 무시  
  5. $.get("http://web/test/", { name: "John", time: "2pm" } );  
  6.   
  7. // 요청 Url + 추가적으로 보내는 Array Data, 리턴 결과값 무시  
  8. $.get("http://web/test/", { 'choices[]': ["Jon""Susan"] });  
  9.   
  10. // 요청 Url, xml(또는 html)리턴 결과값  
  11. $.get("http://web/test/"function(data) {    alert("Data Loaded: " + data);  });  
  12.   
  13. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값, 결과값 형식  
  14. $.get("http://web/test/", { name: "John", time: "2pm" },  function(data) {    process(data);  },   "xml" );  
  15.   
  16. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식  
  17. $.get("http://web/test/", { "func""getNameAndTime" },  function(data){    console.log(data.name); // John    console.log(data.time); //  2pm  }, "json");  

 

 

 

 

3. $.getJSON() 방식

 

- 서버에 데이터를 HTTP GET 방식으로 전송한 후 서버측 응답을 JSON 형식으로 받을때 사용 

 

[형식]

jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

 

 

[$.ajax 로 표현]

  1. $.ajax({  
  2.   url: url,  
  3.   dataType: 'json',  
  4.   data: data,  
  5.   success: callback  
  6. });  

 

 

[사용예]

  1. <script>   
  2.     $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",   
  3.     {   
  4.         tags: "mount rainier",   
  5.         tagmode: "any",   
  6.         format: "json"   
  7.       },   
  8.       function(data) {   
  9.         $.each(data.items, function(i,item){   
  10.           $("<img/>").attr("src", item.media.m).appendTo("#images");   
  11.           if ( i == 3 ) return false;   
  12.         });   
  13.     });  
  14.   </script>  

 

 

 

 

4. $.ajax() 방식

 

- 서버에 데이터를 HTTP POST,GET,JSON 모든 방식 전송 가능한 통합적인 함수

- 다양한 Parameter 존재

 

[형식]

jQuery.ajax( url [, settings] ) [ 1.5 이상버젼 ] ,jQuery.ajax( settings ) [ 1.0 이상버젼 ]

 

- url : 요청 Url

- settings : key/value 쌍으로 된 Ajax 요청 Set ( optional )

 

 

[사용예]

  1. // 요청 Url + 추가적 데이터, 완료된 후 리턴 메시지를 받음  
  2. $.ajax({   
  3.       type: "POST",   
  4.       url: "http://web/test/",   
  5.       data: { name: "John", location: "Boston" }   
  6. }).done(function( msg ) {   
  7.       alert( "Data Saved: " + msg );   
  8. });  
  9.   
  10. // 최종 버전 리턴 Html 가져오기  
  11. $.ajax({   
  12.       url: "http://web/test/",   
  13.       cache: false   
  14. }).done(function( html ) {   
  15.       $("#results").append(html);   
  16. });  
  17.   
  18. // 서버에 데이터를 보낸 후 저장처리, 그리고 사용자에게 리턴 완료 메시지 반환  
  19. var menuId = $("ul.nav").first().attr("id");   
  20. var request = $.ajax({   
  21.     url: "http://web/test/",   
  22.     type: "POST",   
  23.     data: {id : menuId},   
  24.     dataType: "html"   
  25. });   
  26.    
  27. request.done(function(msg) {   
  28.     $("#log").html( msg );   
  29. });   
  30.    
  31. request.fail(function(jqXHR, textStatus) {   
  32.     alert( "Request failed: " + textStatus );   
  33. });  
  34.   
  35.   
  36. // 자바 스크립트 로딩 및 실  
  37. $.ajax({   
  38.     type: "GET",   
  39.     url: "test.js",   
  40.     dataType: "script"   
  41. });  

 

 

 

4.1 $.ajaxSetup()

 

- 공통적인 기본 ajax 요청을 미리 설정함

 

[형식]

jQuery.ajaxSetup( options )

 

- optional : default Ajax 요청의 설정값 ( key/value )

 

 

[사용예]

  1. // 미리 ajaxSetup에 기본사항들을 설정한 후 ajax 로 각각 호출  
  2. $.ajaxSetup({  
  3.     url: 'http://web/test/',  
  4.     global: false,   
  5.     type: "POST"   
  6.   
  7. });  
  8. $.ajax({  
  9.       // url not set here; uses 'http://web/test/'  
  10.       data: {'name''Dan'}  
  11. });  
  12. $.ajax({  
  13.       // url not set here; uses 'http://web/test/'  
  14.       data: {'name''John'}  
  15. });  

 

 

 

 

5. $.load() 방식

- 외부 컨텐츠 가져올때 사용

 

[형식]

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- complete(responseText, textStatus, XMLHttpRequest) : 요청이 완료될때 실행되는 callback 함수

 

 

[사용예]

  1. //  Html Content 로딩  
  2. $('#result').load('ajax/test.html');  
  3.   
  4. //  Html Content 로딩 후 메시지  
  5. $('#result').load('ajax/test.html'function() {  
  6.   alert('Load was performed.');  
  7. });  
  8.   
  9. //  Html Content #container Target 로딩  
  10. $('#result').load('ajax/test.html #container');  
  11.   
  12. //  array parameter 전달 후 Html Content 로딩  
  13. $("#objectID").load("test.asp", { 'choices[]': ["Jon""Susan"] } );  


'web standard > jquery' 카테고리의 다른 글

마우스 휠 이벤트 체크  (0) 2016.10.05
이벤트 설정 시에 jQuery의 .on()을 사용하자.  (0) 2014.10.13
jQuery Slider plugin  (0) 2014.01.09
width가 100%인 이미지에 맵 걸기  (0) 2013.04.22
좌우(상하) 슬라이드  (0) 2012.02.29
Posted by 수라
web standard/jquery2014. 1. 9. 17:46

출처 : http://egorkhmelev.github.io/jslider/


'web standard > jquery' 카테고리의 다른 글

이벤트 설정 시에 jQuery의 .on()을 사용하자.  (0) 2014.10.13
[jquery] ajax 방법  (0) 2014.04.11
width가 100%인 이미지에 맵 걸기  (0) 2013.04.22
좌우(상하) 슬라이드  (0) 2012.02.29
lnb 슬라이드메뉴  (0) 2012.02.21
Posted by 수라
web standard/jquery2013. 4. 22. 11:49

출처 : https://github.com/stowball/jQuery-rwdImageMaps


c / jQuery-rwdImageMaps

JavaScript

Responsive Image Maps jQuery Plugin Read more



Read-Only access

README.md


'web standard > jquery' 카테고리의 다른 글

[jquery] ajax 방법  (0) 2014.04.11
jQuery Slider plugin  (0) 2014.01.09
좌우(상하) 슬라이드  (0) 2012.02.29
lnb 슬라이드메뉴  (0) 2012.02.21
수평네비게이션 기초  (0) 2012.02.13
Posted by 수라
web standard/jquery2012. 2. 29. 09:45
[좌우]
<script type="text/javascript">
var pagging = 0;
$(document).ready(function() {
    var contWidth = $('.thumList').width();
    var cnum = ($('.slide > div').size())-1;
    var slideLeft = 0 - contWidth;
    $('.slide').css('width',contWidth*(cnum+1));
    $('.btnLeft').click(function() {
        pagging--;
        if (pagging < 0) {pagging = 0; };
        $('.magazineTitle img').attr('src', '../images/whatissue/title_magazine0'+pagging+'.gif');
        $('.slide').animate({marginLeft: slideLeft*pagging});
    });
    $('.btnRight').click(function() {
        pagging++;
        var max=cnum;
        if(pagging > max) {pagging = max; };
        $('.magazineTitle img').attr('src', '../images/whatissue/title_magazine0'+pagging+'.gif');
        $('.slide').animate({marginLeft: slideLeft*pagging});
    });
});
</script>

<div class="container">
    <div class="slide clfix">
        <!-- contents01 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents01 -->
        <!-- contents02 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents02 -->
        <!-- contents03 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents03 -->
    </div>
</div>

[상하] (페이징이 추가되고, 소스만 조금 다를뿐 방식은 위와 동일)
<script type="text/javascript">
var page = 1;    //시작페이지 카운트
var slideNum = 3;    //슬라이드 갯수

function pagging(num){
    var $slide = $('.slide');    //슬라이드할 class
    var $pagging = $('.pagging a');    //페이징 class
    var slideHeight = 0 - ($('.slide > ol').height());    //슬라이드에 필요한 수치값
    page = num;
    listTop = slideHeight * (num-1);
    $slide.animate({marginTop:listTop}, {duration:500});
    $pagging.removeClass('on');
    $pagging.eq(num).addClass('on');
}

$(document).ready(function() {
    $(".left").click(function(){
        page--;
        if (page < 1) {page = 1; };
        pagging(page);
        return false;
    });
    $(".right").click(function(){
        page++;
        var max=slideNum;
        if(page > max) {page = max; };
        pagging(page);
        return false;
    });
});

<div class="area">
    <div class="slide clfix">
        <ol>
            <li onclick="link(1);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
        <ol>
            <li onclick="link(11);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
        <ol>
            <li onclick="link(21);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
    </div>
</div>

'web standard > jquery' 카테고리의 다른 글

jQuery Slider plugin  (0) 2014.01.09
width가 100%인 이미지에 맵 걸기  (0) 2013.04.22
lnb 슬라이드메뉴  (0) 2012.02.21
수평네비게이션 기초  (0) 2012.02.13
수직네비게이션 기초  (0) 2012.02.13
Posted by 수라
web standard/jquery2012. 2. 21. 17:25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/inc/css/common.css" />
<script type="text/javascript" src="/inc/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function lnb(hn,sn){

    var $lnb = $('#lnb > ul > li');
    var $lnb_depth = $('.lnbDepth > li');

    $lnb.eq(hn-1).addClass('on');
    $lnb.eq(hn-1).find('.lnbDepth').children().eq(sn-1).addClass('sel');

    $lnb.find('ul').hide();

    $lnb.each(function(){
        if($(this).hasClass('on')){
            if($(this).find('div').next().is('ul')){
                $(this).find('div').next().slideToggle(300);
            }else{
                $(this).find('div').addClass('brnone');
            }
            $(this).find('img').attr('src', $(this).find('img').attr('src').replace('_off.gif', '_on.gif'));
        }
    });

    $lnb.click(function(){

        if($(this).hasClass('on')) return false;

        $lnb.removeClass('on');
        $(this).addClass('on');

       
        $lnb.find('ul').slideUp(300);


        if($(this).find('div').next().is('ul')){
            $(this).find('div').next().slideToggle(300);
        }else{
            $(this).find('div').addClass('brnone');
        }

    });

    $lnb_depth.each(function(){
        if($(this).hasClass('sel')){
            $(this).find('img').attr('src', $(this).find('img').attr('src').replace('_off.gif', '_on.gif'));
        }
    });


    $('.lnbDepth li img').hover(function(){
        if($(this).parent().hasClass('sel')) return false;

        $(this).parent().addClass('over');
        $(this).attr('src', $(this).attr('src').replace('_off.gif', '_on.gif'));
    }, function(){
        if($(this).parent().hasClass('sel')) return false;

        $(this).attr('src', $(this).attr('src').replace('_on.gif', '_off.gif'));
        $(this).parent().removeClass('over');
    });

}
</script>
</head>
<body>
<div id="wrap">

    <div id="container">
        <div id="lnb">
            <ul class="menu">
                <li><a href="#"><img src="/images/news/lmenu_01_off.gif" alt="공지사항" /></a>
                    <div></div>
                    <ul class="lnbDepth">
                        <li><img src="/images/news/smenu_01_off.gif" alt="1" /></li>
                        <li><img src="/images/news/smenu_02_off.gif" alt="2" /></li>
                        <li><img src="/images/news/smenu_03_off.gif" alt="3" /></li>
                    </ul>
                </li>
                <li><a href="#"><img src="/images/news/lmenu_02_off.gif" alt="Silk" /></a>
                    <div></div>
                    <ul class="lnbDepth">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </li>
                <li><a href="#"><img src="/images/news/lmenu_03_off.gif" alt="진행 중 이벤트" /></a>
                    <div></div>
                    <ul class="lnbDepth">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </li>
                <li><a href="#"><img src="/images/news/lmenu_04_off.gif" alt="당첨자 발표" /></a>
                    <div></div>
                    <ul class="lnbDepth">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </li>
                <li><a href="#"><img src="/images/news/lmenu_05_off.gif" alt="지난 이벤트" /></a>
                    <div></div>
                    <ul class="lnbDepth">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </li>
            </ul>
            <script type="text/javascript">lnb(1,1);</script>
           
        </div>
        <div id="contWrap">
        </div>
    </div>


</div>




</body>
</html>







'web standard > jquery' 카테고리의 다른 글

width가 100%인 이미지에 맵 걸기  (0) 2013.04.22
좌우(상하) 슬라이드  (0) 2012.02.29
수평네비게이션 기초  (0) 2012.02.13
수직네비게이션 기초  (0) 2012.02.13
이미지 순차적으로 스위칭  (0) 2012.01.26
Posted by 수라
web standard/jquery2012. 2. 13. 15:57
출처 : http://naradesign.net/wp/2011/07/02/1634/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    var gnbHr = $('.gnbHr');
    gnbHr.find('>ul>li>ul').hide();
    gnbHr.find('>ul>li>a')
        .mouseenter(function(){
            gnbHr
                .find('>ul>li>ul:visible')
                .slideUp(200)
                .parent('li')
                .removeClass('active')
                .find('>a')
                .css('fontWeight','');
            $(this)
                .next('ul:hidden')
                .slideDown(200)
                .parent('li')
                .addClass('active')
                .find('>a')
                .css('fontWeight','bold');
        })
        .focus(function(){
            //$(this).mouseover();
        })
        .end()
        .mouseleave(function(){
            gnbHr
                .find('>ul>li>ul')
                .slideUp(200)
                .prev('a')
                .css('fontWeight','');
        });
});
</script>
</head>

<body>
<div class="gnbHr">
    <ul>
        <li><a href="#">#1</a>
            <ul>
                <li><a href="#">#1-1</a></li>
                <li><a href="#">#1-2</a></li>
            </ul>
        </li>
        <li><a href="#">#2</a>
            <ul>
                <li><a href="#">#2-1</a></li>
                <li><a href="#">#2-2</a></li>
            </ul>
        </li>
        <li><a href="#">#3</a>
            <ul>
                <li><a href="#">#3-1</a></li>
                <li><a href="#">#3-2</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

'web standard > jquery' 카테고리의 다른 글

좌우(상하) 슬라이드  (0) 2012.02.29
lnb 슬라이드메뉴  (0) 2012.02.21
수직네비게이션 기초  (0) 2012.02.13
이미지 순차적으로 스위칭  (0) 2012.01.26
스크롤 따라다니는 퀵메뉴  (0) 2011.11.21
Posted by 수라
web standard/jquery2012. 2. 13. 15:55
출처 : http://naradesign.net/wp/2011/07/02/1634/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    var gnbVr = $('.gnbVr');
    gnbVr.find('>ul>li>ul').hide();
    gnbVr.find('>ul>li>a[href=#]')
        .click(function(){
            gnbVr
                .find('>ul>li>ul:visible')
                .slideUp(200)
                .parent('li')
                .removeClass('active')
                .find('>a')
                .css('fontWeight','');
            $(this)
                .next('ul:hidden')
                .slideDown(200)
                .parent('li')
                .addClass('active')
                .find('>a')
                .css('fontWeight','bold');
            return false;
        })
        .focus(function(){
            //$(this).click();
        });
});
</script>
</head>

<body>
<div class="gnbVr">
    <ul>
        <li><a href="#">#1</a>
            <ul>
                <li><a href="#">#1-1</a></li>
                <li><a href="#">#1-2</a></li>
            </ul>
        </li>
        <li><a href="#">#2</a>
            <ul>
                <li><a href="#">#2-1</a></li>
                <li><a href="#">#2-2</a></li>
            </ul>
        </li>
        <li><a href="#">#3</a>
            <ul>
                <li><a href="#">#3-1</a></li>
                <li><a href="#">#3-2</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

'web standard > jquery' 카테고리의 다른 글

lnb 슬라이드메뉴  (0) 2012.02.21
수평네비게이션 기초  (0) 2012.02.13
이미지 순차적으로 스위칭  (0) 2012.01.26
스크롤 따라다니는 퀵메뉴  (0) 2011.11.21
iframe 다루기  (0) 2011.11.16
Posted by 수라
web standard/jquery2012. 1. 26. 11:42
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta name="viewport" content="user-scalable=no, initial-scale = 1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<script type="text/javascript">
var num = 1;
$(document).ready(function() {
    $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    $("ul.paging li.prev").click(function() {
        num--;
        if (num < 0) {num = 0; };
        $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    });
    $("ul.paging li.next").click(function() {
        num++;
        var max=($("ul.tabMenu01 li").size())-1;
        $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    });
});
</script>
<style>
* {margin:0;padding:0;}
img {width:100%;border:none;}
</style>
</head>
<body>
<div class="tabCont">
    <div class="cont"><img src="sian_01.jpg" usemap="#link1" alt="" /></div>
</div>
<ul class="paging">
    <li class="prev">prev</li>
    <li class="next">next</li>
</ul>
</body>
</html>

'web standard > jquery' 카테고리의 다른 글

수평네비게이션 기초  (0) 2012.02.13
수직네비게이션 기초  (0) 2012.02.13
스크롤 따라다니는 퀵메뉴  (0) 2011.11.21
iframe 다루기  (0) 2011.11.16
로그인 입력폼 description 제어  (0) 2011.11.09
Posted by 수라