본문 바로가기

JavaScript/jQuery

(23)
[jQuery] input text 값 추가 제거 HTML 등록 등록 JS $(document).ready(function () { $(".refer_wrap.apply button").on("click", handletextSelect); }); //텍스트 등록 function handletextSelect(e){ var $this = $(this); var $fileItem = $(""); var $parentWrap = $this.closest(".refer_wrap.apply") var $parent = $parentWrap.find(".refer_area"); var $fileRmvBtn = $(""); var list = new Array(); $parentWrap.find("input.apply_input").each(function(ind..
[jQuery] 푸터 위에서 멈추는 플로팅 메뉴 HTML 내ㅔ용 맨위로 푸터 css #wrap{position:relative} #container{height:1000px;background-color: #00c2f2} .floatingBtnWrap {position:fixed;right:50%;margin-right:-708px;bottom:50px;z-index:10;display:none;font-size:0;} .floatingBtnWrap li{font-size:0;display: inline-block;} .floatingBtnWrap li a{display:block;width:54px;height:54px;background-color: #2b2b2b;color:#fff;font-size:14px;} #footer{width:100%;..
[jQuery] input file 다중 이미지 업로드 HTML 이미지등록 + 이미지등록 + 이미지등록 + CSS .input_img ul{width:100%;font-size:0;} .input_img ul li{display:inline-block;position:relative;vertical-align:top;width:20%;border-left:5px solid #fff;border-right:5px solid #fff;} .input_img ul li.on span{display:none;} .input_img ul li.on label{background-color: transparent} .input_img ul li.on button{z-index:99;display:block;position:absolute;width:32px;height..
[jQuery] 모바일 햄버거메뉴 스크롤 막기 HTML 닫기 메뉴 내용 CSS body.leftOpen{overflow:hidden;} body.leftOpen .left_close{opacity:1; transition:all 0.5s; z-index:901;} body.leftOpen .menu_wrap{left:0; transition:all 0.5s; z-index:901;} body.leftOpen #left_modal{opacity:1; z-index:901; transition:all 0.5s;} #left_modal{position:fixed; top:0; right:0; left:0; bottom:0; background:rgba(0,0,0,.65); z-index:-1; opacity:0; transition:all 0.5s;} ...
[jQuery] id값으로 다중 모달 띄우기 1. HTML 팝업 제목 확인 팝업열기 2.script function fnShowPop(sGetName){ var $layer = $("#"+ sGetName); var mHeight = $layer.find(".m_content").height()/2; $layer.find(".m_content").css({'margin-top':-mHeight}); $layer.addClass("on"); } function fnHidePop(sGetName){ $("#"+ sGetName).removeClass("on"); } 3.css .modal{position:fixed;width:100%;height:100%;top:0;left:0;bottom:0;background-color:rgba(0,0,0,.8);..
[jQuery] 간단한 image 모달 띄우기 http://dimsemenov.com/plugins/magnific-popup/ HTML
[jQuery] 아코디언 메뉴 만들기 HTML asd asdasd asdasd asdasd asda asdasd CSS li .con{display:none;} JS $('ul.qna_list').on('click','.tit', function() { var $this = $(this); var $hasCls = $this.hasClass("on"); $this.closest("li").find(".con").stop().slideDown(400); $this.closest("ul").find("li .tit").each(function(){ $(this).removeClass("on"); $(this).closest("li").find(".con").stop().slideUp(400); }).promise().then(function()..
[jQuery] 체크박스로 활성화,비활성화 제어하기 체크박스 선택시 활성화,비활성화로 바꾸는 기능이 필요해서 메모.. HTML 버튼입니다. 버튼 CSS .box.on{color:#999;} JS $(".box button").attr("disabled", true); $("#chk").on('click',function(){ var chk = $('input:checkbox[id="chk"]').is(":checked"); if(chk==true){ $(".box button").removeAttr('disabled'); $(".box").removeClass("on"); }else{ $(".box button").attr("disabled", true); $(".box").addClass("on"); } });