본문 바로가기

JavaScript

(29)

[jQuery] Depth gnb 네비게이션 $(function(){ var $header = $('#header'), $gnb = $('ul.gnb'), $gnbLi = $gnb.find(' > li'), $gnb2Dep = $gnbLi.find('.depth2') $gnbLi.on({ "mouseenter focusin" : function(){ $gnb2Dep.addClass("on"); $(this).addClass('on').find($gnb2Dep).stop().slideDown(200); }, "mouseleave focusout" : function(){ $gnb2Dep.removeClass("on"); $(this).removeClass('on').find($gnb2Dep).stop().slideUp(200); } }); }); 메..

[jQuery] 메모 포스팅.. var sFloatState = 1; /* 0 : off상태 1 : mid상태 (디폴트) 2 : on상태 */ function fnFloatControl(el){ switch(sFloatState){ case 0: //현재상태가 off상태 $(".floting-area").removeClass("off"); $(".floting-area").addClass("mid"); sFloatState = 1; break; case 1: //현재상태가 mid상태 var $getName = $(el).attr("name"); if($getName == "close"){ $(".floting-area").removeClass("mid"); $(".floting-area").addClass("off"); sFloatSt..

[jQuery] datepicker 날짜 선택 옵션 datepicker 플러그인 포스팅 : http://dh5032.tistory.com/11?category=764114 $('input').datepicker({ dateFormat: 'yy-mm-dd', onSelect: function (date) { alert(date); } }) 이런식으로 추가해주면 날짜 클릭시 event가 발생한다.

[jQuery] radio버튼 체크 이벤트 $('input[type=radio][name=name]').change(function() { if (this.value == '01') { alert("1"); } else if (this.value == '02') { alert("2"); } });

[jQuery] 스크롤 따라다니는 퀵메뉴 $(function(){ var $win = $(window); var top = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다. /*사용자 설정 값 시작*/ var speed = 1000; // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec) var easing = 'linear'; // 따라다니는 방법 기본 두가지 linear, swing var $layer = $('#div'); // 레이어 셀렉팅 var layerTopOffset = 0; // 레이어 높이 상한선, 단위:px $layer.css('position', 'absolute'); /*사용자 설정 값 끝*/ // 스크롤 바를 내린 상태에서 리프레시 ..

[jQuery] 이미지의 경로와 사이즈 구하기 jQuery - width값 $("div").find("img").each(function() { $(this).load(function(){ var node_wid = $nodeDiv.width(); if(node_wid > 75){ alert(node_wid); } }); }); jQuery - 경로 $("div").find('img').each(function(){ var src = $(this).attr('src'); var none = '../images/common/none.png'; if(src==none){ // }else{ // } });

[jQuery] datepicker 달력 플러그인 datepicker : https://jqueryui.com/datepicker/ HTML JS $( function() { $( "#datepicker").datepicker({ changeMonth: false, dateFormat: "yy-mm-dd", dayNames: ['월요일', '화요일', '수요일', '목요일', '금요일', '토요일', '일요일'], dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'], monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'], monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','..

[jQuery] jQuery를 이용한 이미지 오버효과 CSS .con dl dt { position:relative;} .con dl dt img.on { position:absolute;opacity:0;top:0;left:0;} HTML 첫번째내용 두번째내용 세번째내용 jQuery $(".con dl").hover(function(){ var $this = $(this); var $on = $this.find("img.on"); $on.stop().animate({"opacity":1}, 450, "swing"); $(this).find("dd").css('color','#4a8ef3'); }, function(){ var $this = $(this); var $on = $this.find("img.on"); $on.stop().animate({"opa..

이전 1 2 3 4 다음

티스토리툴바