웹 퍼블리셔 기록/jQuery (6) 썸네일형 리스트형 팝업 안의 slick slider 가 뜨지 않을 때? slick slider 를 레이어 팝업에 넣었는데, 레이어 팝업을 열었을 때 slick slider 가 뜨지 않고 slick slider 의 arrow 만 뜨는 현상 발생. arrow를 몇번 클릭 하면 slick slider 가 뜨긴 함... 여기서, 보통 $(슬라이드).slick(); 기능을 HTML 최하단에 덩그러니 설정하는게 일반적인데 팝업에 slick slider 를 넣는 경우 팝업을 띄운 후 slick(); 이 작동되어야 함. $(팝업 키는 버튼).click(function(){ $(팝업).show(); $(슬라이드).slick(); }); 이런 형태로 만들어 줘야 합니다. stack overflow 에서 아무리 찾아도 안나와서 진짜 답답했는데.. 겨우 어떤 분이 해결하신 거 블로그에 올려놓으셔.. 휴대폰 번호 입력 형식 - replace() 와 substring 휴대폰 입력 형식 1) 숫자 사이 '-' 자동기입 '-' 자동 기입은 되나 3자리 까지 입력시 '-''-' 두 개가 동시에 나옴 '-' 바는 000-0000-0000 처럼 순차적으로 나와야함 2) 글자 입력 불가 숫자입력 후 글자는 입력이 불가 최초 입력시 글자 기입이 가능 (tel의 pattern으로 인한 알람이 뜨기 때문에 큰 요소는 아님) 추후 코드 업그레이드가 필요 선택한 색상으로 색 변하게 만드는 법(onclick, for, switch) 안녕하세요! 이번에 다루는 기능은 제가 예전에 만들었었는데 안타깝게도 적용되지 않은 기능이랍니다...ㅠㅠ 비록 쓰이지는 않았지만 블로그에 게시해서 공유해보고 싶었어요! ㅎㅎ 선택한 색상에 따라 대표 색상이 바뀌도록 만들었는데요! 여기서 사용한 대표적인 기능은! onclick="" html에서 태그에 적용하는 함수입니다. for(){} 증가문을 설정해줍니다 switch(){} 상황을 하나씩 설정해줍니다. (case1, case2....) 입니다 [1] 각 html 에 onclick(num, this) 를 먼저 설정해주고 [2] for 를 사용해 증가문을 설정해주고 (색상의 개수 이하로 증가되도록 설정) [3] 증가문의 수와 html의 onclick에 설정된 num이 같으면 [4] 각 넘버에 해당하는 색상이.. [scrollTop] 스크롤을 내리면 숨겨져있던 객체 등장! 스크롤 시, 숨겨진 객체가 등장하는 기능! 스크롤만 하면 뿅 등장하는게 재밌죠 (문과 감수성) 기능 소개에 앞서 살짝 헷갈릴 수 있으니 설명을 좀 달게요 스크롤 시 객체가 등장하는 기능은 일정 높이를 지났을 때, 숨겨진 객체를 등장시키는 개념이에요 그래서 처음 *^^* 가 적힌 객체의 높이를 먼저 구한 후, 윈도우 스크롤이 그 높이를 지났을 때 숨겨진 객체가 등장하는 거랍니다. 대표적으로 사용하는 기능입니다! $(객체).height(); 객체의 높이를 재줍니다. $(window).scroll(function(){}); 윈도우 스크롤 시 발생되는 기능 문법입니다. $(this).scrollTop(); 윈도우 스크롤 상단 수치라고 생각하시면 됩니다. (스크롤이 시작되는 지점은 0부터 시작합니다.) 작동원리 .. 클릭할 때마다 객체 추가하는 법(append, prepend) 버튼을 누를 때 마다 박스가 추가되는 기능! 뿅뿅뿅 하고 나타나는 박스들 좀 보세요~ 꺄올 여기에 쓰이는 대표기능은?? $(박스들이 추가되는 공간"부모").append(박스, HTML 형식으로 작성합니다.); 자매품 prepend 도 있습니다. (같은 형식으로 사용) (부모요소).append(추가할 자식요소); append, prepend 로 요소를 추가하는 기능은 부모요소에 적용하여 자녀를 늘리는 방식! append는 기존객체 뒤로 생성, prepend는 기존객체 앞에 생성 끝 감사합니다 checkbox 클릭시 버튼 활성화하는 법 이 포스팅에서 다룰 것은 체크 박스를 클릭 했을 때 버튼 활성화 되는 기능 입니다. $(체크박스).prop("checked" boolean ); $(체크된 체크박스).length; 첫 포스팅인 만큼, 문제를 풀어나간 과정을 게시하고 싶어서 3단계로 나눴습니다. 최종 결과물만 보시고 싶다면 가장 하단의 코드만 참고부탁드립니다. :) 1. 첫번 째 시도 체크박스를 다중 선택 후 하나라도 체크 해제하면 버튼이 비활성화되는 문제 발견! 하단의 2번으로 해결! 2. 두번째 시도 체크된 checkbox 의 length값을 구하여 1이상이면 버튼 활성화되도록 설정하여 문제해결 이때 var tt =$("[name='order2_chki']").prop("checked").length; 로 하면 기능이 먹지 않고, va.. 이전 1 다음
