티스토리

만들고, 퍼오고, 공유하고
검색하기

블로그 홈

만들고, 퍼오고, 공유하고

devlink.tistory.com/m

개발, 디자인, 마케팅 관련 자료실 입니다.

구독자
2
방명록 방문하기
공지 php 코딩 가이드 참조 모두보기

주요 글 목록

  • 셀렉트 박스 option의 텍스트 color에 맞춰 표기되는 항목 컬러 변경 적용 클래스 이름 : custom-color-select Red Green Blue Orange 공감수 1 댓글수 0 2024. 9. 23.
  • 텍스트 박스에 컬러피커 추가 MiniColors 공감수 1 댓글수 0 2024. 9. 23.
  • 텍스트 네온/레인보우 효과 Rainbow ■■■■■■■ 공감수 0 댓글수 0 2023. 11. 19.
  • Swiper 사용하기 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 코드정리 사이트 https://beautifier.io/ 자주쓰는 옵션 let swiper = new Swiper('#id', { slidesPerView : 보여질 개수, spaceBetween : 아이템 사이 간격, slidesPerGroup : 한번에 슬라이딩될 개수, centeredSlides: true, //센터모드 threshold:100, //.. 공감수 0 댓글수 1 2023. 10. 23.
  • ◈ 체크박스 이벤트 바인딩, 속성 추가 (addEventListener) 이벤트 바인딩 참고 클릭 if ($('.nav-link').length > 0) { $('.nav-link').click(function() { // }); } $(document).ready(function() { $('input[type=checkbox][name=gender]').change(function() { if ($(this).is(':checked')) { alert(`${this.value} is checked`); } else { alert(`${this.value} is unchecked`); } }); }); https://devlink.tistory.com/749 This is a paragraph. This is another paragraph. //약관2 사용체크시 내용 유효.. 공감수 0 댓글수 0 2023. 3. 5.
  • jquery data- 사용하기 Content 공감수 0 댓글수 0 2023. 2. 27.
  • jQuery bind(), unbind(), on(), off() 이벤트 등록 및 해제 jquery 1.7부터 bind/unbind가 개선되어 나온 것이 on/off 메서드 click! 또는 click! 공감수 0 댓글수 0 2023. 2. 10.
  • 셀렉터. form 요소 찾을때. form name test로 시작하는 이름 $("input[name^='test']") test를 포함하는 이름 $("input[name*='test']") test를 포함하는 이름 (공백포함) $("input[name~='test']") test로 끝나는 이름 $("input[name$='test']") 이름이 test가 아님 $("input[name!='test']") div중 class가 test로 시작 $("div[class^='test']") 공감수 0 댓글수 0 2022. 9. 8.
  • 제이쿼리 애니메이션 + 속도 주기 공감수 0 댓글수 0 2022. 6. 3.
  • 체크박스 전체 체크 https://devlink.tistory.com/865 #1 동의체크 전체동의 개인정보 수집 및 이용에 대한 동의 마케팅 활용 동의 #2 일반 체크박스 $(document).ready(function() { $("#cbx_chkAll").click(function() { if($("#cbx_chkAll").is(":checked")) $("input[name=chk]").prop("checked", true); else $("input[name=chk]").prop("checked", false); }); $("input[name=chk]").click(function() { var total = $("input[name=chk]").length; var checked = $("input[name=ch.. 공감수 0 댓글수 0 2022. 5. 10.
  • 제이쿼리 특수문자 제거 onkeyup='chkChar(this);' function regExp(str){ var reg = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+@\#$%&\\\=\(\'\"]/gi //특수문자 검증 if(reg.test(str)){ //특수문자 제거후 리턴 return str.replace(reg, ""); } else { //특수문자가 없으므로 본래 문자 리턴 return str; } } //특수문자 제거 `\'" 4가지 제거 function chkChar(obj){ var RegExp = /[`\\\'\"]/gi;//정규식 구문 if (RegExp.test(obj.value)) { // 특수문자 모두 제거 obj.value = obj.value.replace(RegExp , ''); } } 공감수 1 댓글수 0 2022. 2. 7.
  • ajax 파일 업로드 var formData = new FormData($('#frm')[0]); $.ajax({ url: 'http://...', //request 보낼 서버의 경로 type: 'post', // 메소드(get, post, put 등) dataType: "json", enctype: 'multipart/form-data', async: false, //동기: false, 비동기(기본값): ture data: formData, //보낼 데이터, processData: false, contentType: false, timeout: 3000, headers: { "Authorization": token //로그인 토큰 }, success: function (data) { alert(data.message); l.. 공감수 0 댓글수 0 2021. 11. 29.
  • Json 추출 - jQuery, 자바스크립트 + key 갯수 구하기 jQuery var json = { 'NAME':'홍길동', 'SEX':'남', 'AGE':'99세'}; $.each(json, function(key, value){ alert('key:' + key + ' / ' + 'value:' + value); }); Javascript var json = { 'NAME':'홍길동', 'SEX':'남', 'AGE':'99세'}; for(key in json) { alert('key:' + key + ' / ' + 'value:' + json[key]); } 일반적으로 배열 내 원소의 개수를 구할 땐 배열명.length 를 쓰면 간단히 구할 수 있는데, {키:값} 쌍으로 이루어진 JSON 형식의 오브젝트는 length로는 엘리먼트의 개수가 나오지 않음. var e.. 공감수 0 댓글수 0 2021. 8. 24.
  • jQuery 데이터 테이블 리스트 플러그인 (정렬, 검색, 페이징) https://cloudtables.com/ CloudTables Easily embed CloudTables in your web-site or app Seamless integration with your pages is straightforward with CloudTables through its extensive support for the most popular styling frameworks, such as Bootstrap and Semantic UI. It is actually part of your cloudtables.com https://datatables.net/examples/index DataTables examples - Examples index Examples index.. 공감수 0 댓글수 0 2021. 8. 13.
  • modal 에서 datepicker 사용시 위치 안 맞는 이슈 완벽하게 기능함! $(".calendar-modal").datepicker({ dateFormat: 'yy-mm-dd', prevText: '이전 달', nextText: '다음 달', monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], dayNames: ['일', '월', '화', '수', '목', '금', '토'], dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'], dayNamesMin:.. 공감수 0 댓글수 0 2021. 6. 25.
  • 제이쿼리 툴팁, tooltip https://getbootstrap.com/docs/3.4/javascript/#tooltips-usage 공감수 0 댓글수 0 2021. 5. 18.
  • 특정 일 까지 카운트 다운 (남은 일:시간:분:초) www.jqueryscript.net/time-clock/Digital-Countdown-Clock-jQuery.html Easy Digital Countdown Clock Plugin With jQuery A jQuery plugin for creating an easy-to-style digital clock to count down from a specific date on your coming soon/under construction pages and event landing pages. www.jqueryscript.net 공감수 0 댓글수 0 2021. 4. 30.
  • 상단 메뉴, 풀사이즈 메뉴, 전체 메뉴, 가로 네비게이션, 중복실행 방지 * {margin: 0; padding: 0; } li {list-style: none; } body {font-family: 'Nanum Gothic', sans-serif; width: 1200px; margin: 0 auto; } .logo {margin: 50px 0; font-size: 30px; text-align: center; font-family: 'Nanum Brush Script', cursive; } .topMenu {width: 100%; margin-bottom: 20px; text-align: center; height: 40px; } .topMenu:after {content: ""; display: block; clear: both; } .menu01>li {float: l.. 공감수 0 댓글수 0 2021. 4. 26.
  • 제이쿼리 슬라이딩 배너, 롤링 배너 OwlCarousel 중복으로 사용하면서 다른 효과 주기는 애매함 같은 형식이면 괜춘 owlcarousel2.github.io/OwlCarousel2/docs/api-options.html Options | Owl Carousel | 2.3.4 Options List including all options from built-in plugins video, lazyload, autoheight and animate. items Type: Number Default: 3 The number of items you want to see on the screen. margin Type: Number Default: 0 margin-right(px) on item. loop Type: Boolean D owlcarousel2.git.. 공감수 0 댓글수 0 2021. 4. 21.
  • 제이쿼리 모달 스크립트 부트스트랩 모달 사용시 UI가 깨진다면, 차선으로 선택 가능한 옵션 github.com/CreativeDream/jquery.modal CreativeDream/jquery.modal A simple jquery Modal boxes, alert, prompt, confirm, themes, buttons, animations, responsive and many other options included. - CreativeDream/jquery.modal github.com Other wonpaper.tistory.com/217 jquery 다양한 modal 예제 (Bootstrap4 Modal Wrapper Plugin) 실무에서 자주 쓰이는 modal 을 다양한 기능을 가진 플러그인 소스가 있다. .. 공감수 0 댓글수 0 2021. 3. 12.
  • 마우스 오른쪽 버튼 막기 등 공감수 0 댓글수 0 2021. 3. 9.
  • 아코디언 메뉴, 드롭다운 메뉴 샘플 메뉴1 메뉴1-1 메뉴1-2 메뉴1-3 메뉴2 메뉴2-1 메뉴2-2 메뉴2-3 메뉴3 메뉴3-1 메뉴3-2 메뉴3-3 메뉴4 메뉴4-1 메뉴4-2 메뉴4-3 공감수 0 댓글수 0 2021. 2. 22.
  • jquery 특정 테이블의 row에 마우스 오버시 색상 변경 $(document).ready(function(){ // 특정 테이블의 row에 마우스 오버시 색상변경 $( ".tb-list tbody tr" ).on( "mouseover", function() { $( this ).css( "background-color", "#f7f7f7" ); //$( this).children("td").css( "cursor", "pointer" ); }); $( ".tb-list tbody tr" ).on( "mouseleave", function() { $( this ).css( "background-color", "white" ); }); }); 공감수 0 댓글수 0 2021. 2. 17.
  • tr생성, 현재 tr 지우기 마지막에 tr 추가 $('#mytable > tbody:last').append('추가'); 자신이 속한 상위 tr 삭제 function deleteLine(obj) { $(obj).closest('tr').remove(); } Hello Brother! 1번 삭제 Hello Brother! 2번 삭제 공감수 0 댓글수 0 2021. 2. 12.
  • 한글만 입력, 숫자만 입력 input 창에 한글만 쓰도록 막기 $(function(){ $(".selecter").keyup(function (event) { regexp = /[a-z0-9]|[ \[\]{}()?|`~!@#$%^&*-_+=,.;:\"'\\]/g; v = $(this).val(); if (regexp.test(v)) { alert("한글만 입력가능 합니다."); $(this).val(v.replace(regexp, '')); } }); }); 한글 입력 막기 input 창에 숫자만 쓰도록 막기 ​ $(function(){ $(".selecter").keyup(function (event) { regexp = /[^0-9]/gi; v = $(this).val(); if (regexp.test(v)) { alert(".. 공감수 1 댓글수 0 2020. 11. 27.
  • (CI restAPI) ajax put 전송 javascript php public function targets_edit_put() { header("Access-Control-Allow-Origin:*"); $_POST = json_decode($this->security->xss_clean(file_get_contents("php://input")), true); $this->form_validation->set_data([ 'idx' => $this->input->input_stream('idx', TRUE), 'name' => $this->input->input_stream('name', TRUE) ]); $this->form_validation->set_rules('idx', 'Idx', 'trim|required', array('req.. 공감수 0 댓글수 0 2020. 9. 9.
  • 부트스트랩 모달 보일때, 닫을때 이벤트 // 모달이 보여질때 이벤트 $('#modal-add').on('shown.bs.modal', function (e) { //$('#md_name').focus(); }); // 모달 닫을때 이벤트 $('#modal-add').on('hidden.bs.modal', function (e) { //$(this).find('form')[0].reset() }); 공감수 0 댓글수 0 2020. 9. 8.
  • 클립보드에 복사하는 clipboard.js 라이브러리 clipboardjs.com/ clipboard.js A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped clipboardjs.com twpower.github.io/81-use-clipboard.js-in-javascript [Javascript] clipboard.js를 이용해 웹에서 클립보드에 복사하기 Practice makes perfect! twpower.github.io CDN Copy 공감수 0 댓글수 0 2020. 8. 5.
  • jQuery 바코드 생성 공감수 0 댓글수 0 2020. 7. 15.
  • 프로필, 아바타 이미지 업로드 (+미리보기) 코드 및 CSS 참조 plugins.krajee.com/file-avatar-upload-demo Bootstrap File Input Avatar Upload Demo - © Kartik plugins.krajee.com codepen.io/shantikumarsingh/pen/RRmWxo Profile Image Upload Jquery Custom profile image upload jquery with foundation framework... codepen.io 응용 공감수 1 댓글수 0 2020. 7. 13.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.