분류 전체보기401

• 

  [jQuery] validate 사용법, 예제 (form validation) form 입력값에 유효성을 체크하는 validation plugin 입니다. 저는 메시지를 tooltip으로 띄우기 위해 bootstrap과 같이 사용했습니다. form id를 지정하시고, form 태그 안에 name을 지정하셔서 필수 입력값에 대해서 메시지를 입력해주시면 됩니다. form 유효성 체크가 끝나면 submitHandler 가 실행됩니다. submit 될 때 마지막 이벤트를 등록하시면 됩니다. 이름 휴대전화번호 성별 남성 여성 별명 자기소개 저장 소스 화면 개발이야기/jQuery 2022. 11. 1.

• 

  [jQuery] jqGrid header colspan (헤더 병합), setGroupHeaders jqGrid header(colNames)를 병합해서 위에 그룹화된 header를 생성하는 방법입니다. grid를 위에서 먼저 그려주고 병합을 해주시면 됩니다. 사용방법 $("#jqgrid ID").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: '병합할 colname', numberOfColumns:병합할 개수, titleText: "명칭"}, {startColumnName: '병합할 colname', numberOfColumns:병합할 개수, titleText: "명칭"} ] }); 코드 실행화면 [jQuery] jqGrid 사용법, 설정 (jqgrid cdn example) 관리자 템플릿으로 사용하.. 개발이야기/jQuery 2022. 10. 27.

• 

  [jQuery] jqGrid multiselect (checkbox) 체크 된 값 가져오기 jqGrid 리스트 안에 체크박스를 넣고 싶으시면 multiselect: true 옵션만 추가하시면 됩니다. (colname, colmodel 무관) 다음은 체크박스가 체크된 값들만 화면에 노출시켜 보겠습니다. selarrrow 옵션을 이용해서 체크 된 모든 열의 rowId를 가져옵니다. sel_rows의 배열 길이를 체크해서 선택 여부도 확인할 수 있습니다. 체크박스가 하나 이상 선택이 되면 each() 메서드를 활용해서 값들을 가져옵니다. 저는 화면에 보여 드리기 위해 json 형태로 가공했습니다. 확인 [jQuery] jqGrid 사용법, 설정 (jqgrid cdn example) 관리자 템플릿으로 사용하기 좋은 jqgrid를 소개드립니다. 저는 무료로 사용 할수 있는 v4.6으로 사용했습니다. c.. 개발이야기/jQuery 2022. 10. 26.

• 

  [jQuery] jqGrid formatter 버튼 만들기 (jqGrid colModel formatter) jqGrid를 사용하면서 json 형식의 데이터 이외에 사용자가 원하는 데이터를 노출하고 싶을 때 colModel의 옵션에 formatter를 활용하시면 됩니다. 저는 리스트의 마지막 2열에 수정/삭제 버튼을 만들었습니다. formatter 부분에 함수명을 넣고 버튼 클릭 시 행의 rowID와 숨겨져 있는 idx의 값을 화면에 노출했습니다. 함수 formatOpt1, formatOpt2의 선택한 row의 데이터를 가져오는 부분을 참고하셔서 응용하시면 됩니다. [jQuery] jqGrid 사용법, 설정 (jqgrid cdn example) 관리자 템플릿으로 사용하기 좋은 jqgrid를 소개드립니다. 저는 무료로 사용 할수 있는 v4.6으로 사용했습니다. cdn으로 v4.6을 로드해 줍니다. 이 외에도 jq.. 개발이야기/jQuery 2022. 10. 26.

• 

  [jQuery] jqGrid 사용법, 설정 (jqgrid cdn example) 관리자 템플릿으로 사용하기 좋은 jqgrid를 소개드립니다. 저는 무료로 사용 할수 있는 v4.6으로 사용했습니다. cdn으로 v4.6을 로드해 줍니다. 이 외에도 jquery-ui.css 와 jquery min.js도 로드합니다. (필수) table의 id를 지정해서 jqgrid의 리스트로 만듭니다. 하단의 div 영역은 pager 부븐이고 jqgrid의 옵션에 pager 부분에 작성해줍니다. jqgrid의 리스트 내용은 예제이며, json형태의 배열입니다. (var mydata) jqgrid 옵션 datatype : 리스트에 뿌려줄 데이터 타입을 설정합니다. json과 local을 많이 사용합니다. colNames : 리스트 header 부분 (배열로 설정) colModel : data의 매핑 자료입.. 개발이야기/jQuery 2022. 10. 25.

• [PHP] 문자열 비교 strcmp 사용법, 예제 (로그인) php 내장 함수로 문자열을 비교할 때 사용하는 함수입니다. 사용방법 strcmp(문자열1, 문자열2) 문자열이 같으면 0 (true), 다르면 1 (false) 리턴합니다. 아래 예제는 아이디와 비밀번호를 비교해서 로그인 기능을 구현했습니다. 사용자가 입력한 값과 db 데이터 아이디, 비밀번호를 비교하였습니다. (사용자 입력값 : input_id, input_password / db 데이터 값 : db_id, db_password) 사용법이 간단해서 응용해서 활용해주세요. 개발이야기/PHP 2022. 10. 25.

• [자바스크립트] 실시간 시계 만들기 (타이머) 자바스크립트로 구현한 실시간 시계(타이머)입니다. 스크립트로 현재 날짜와 시간을 가져와서 date/ month / 분 / 초 에는 10보다 작으면 앞에 0을 붙여주는 형태입니다. setTimeout() 함수를 통해서 0.5초마다 함수를 실행하고 있습니다. 간단한 소스 이므로 쉽게 구현 가능하십니다. ↓↓↓↓↓ 소스 예제 화면입니다. HTML 삽입 미리보기할 수 없는 소스 개발이야기/자바스크립트 2022. 10. 21.

• 

  [자바스크립트] 오늘 하루 열지 않기 / 닫기 (레이어 팝업) map 태그를 사용해서 이미지맵을 만들어 각각의 버튼에 함수를 호출하도록 하였습니다. 자바스크립트에서 쿠키의 이름, value, 기간을 체크해 레이어 팝업을 visible / hidden 할지 체크합니다. 닫기 버튼을 클릭했을 경우는 레이어 팝업을 숨김 처리하고, 하루 동안 열지 않기를 체크하면 쿠키를 저장해서 다음 페이지에 진입 시 하루 동안 레이어 팝업을 노출하지 않게 됩니다. 레이어 팝업 영역을 확인하시고 소스를 응용해서 사용하시면 됩니다. 이미지 맵 좌표 구하는 글은 아래에 링크로 남겨 놓겠습니다. https://jh-tr.tistory.com/47 개발이야기/자바스크립트 2022. 10. 21.

• 

  [jQuery] 이미지맵 사용하기 / 이미지 좌표 구하기 /이미지 반응형 (rwdImageMaps) html의 map 태그를 이용해서 이미지맵을 만들어 링크를 걸어 보겠습니다. 사용방법 좌표 모양 (rect : 사각형, circle : 원형, poly : 다각형) 이미지 좌표 구하기 좌표는 그림판에서 쉽게 구하실 수 있습니다. 닫기 버튼의 좌표는 왼쪽 상단의 모서리와 오른쪽 하단의 모서리에 마우스 커서를 올립니다. 왼쪽 상단의 좌표는 23, 273이고 오른쪽 하단의 좌표는 86,300입니다. 닫기 버튼의 좌표는 coords="23,273,86,300" 입니다. 체크박스의 좌표도 동일하게 추출하시면 됩니다. 아래 소스는 이미지 좌표를 추출 후 클릭 시 alert을 띄우고 있습니다. 간단한 예제이니 응용하셔서 사용하시면 됩니다. 다음 예제는 이미지 팝업의 닫기와 하루 동안 열지 않는 기능을 구현해보겠습니다. 개발이야기/jQuery 2022. 10. 21.

• 

  [자바스크립트] Apexcharts 사용법, 예제, 차트 그리기 Chart.js 이어서 색감이 아름다운(?) Apexcharts를 소개드립니다. 다양한 색감을 보여드리기 위해 10개의 차트를 준비했습니다. div에 각각의 차트 영역을 지정 합니다. 각각의 차트 영역의 HTML을 읽고 이벤트를 발생시킵니다. 소스코드를 살펴보시고 사용하실 차트를 고르시면 됩니다. Line Chart Area Chart Column Chart Bar Chart Pie Chart Donut Chart Radar Chart Polar Area Chart Radial Bar Chart Bubble Chart ↓↓↓↓↓ 다양한 예제는 공식 사이트에서 확인 하실 수 있습니다. JavaScript Chart Examples & Samples Demo – ApexCharts.js Get a glimp.. 개발이야기/자바스크립트 2022. 10. 20.

• 

  SC제일은행 금리인하요구권 신청 / 신청후기 요즘 뉴스에서 자주 등장하는 단어가 있다. '영끌족' 영혼까지 끌어 모으다 라는 신조어이다. 부동산 쪽으로도 확장되어 대출을 받아서라도 사야 된다는 자산 관련 용어로 확장되었다. 필자는 2017년 SC제일은행에서 3억 원가량의 주택담보 대출을 받았다. 저금리가 유지될 거 같아 변동금리로 2022년까지 대출을 유지해 왔다. 그러던 중 이번 달 문자를 받고 충격에 빠졌다. 2022년까지 대출금을 내던 중 금리인하요구권에 대한 안내를 받던 기억이 있어 금리인하요구권을 신청하기로 했다. 고객센터로 전화를 하니 현재 대출상품이 금리인하요구권을 행사할 수 있는지 적합한지에 대해 확인을 해주면서 문자를 보내줬다. 위의 URL은 모바일뱅킹 앱에서만 접속이 가능하다. 금리인하요구권을 설명하고 인증을 통해서 신청을 할 수.. 일상이야기 2022. 10. 20.

• 

  [jQuery] 아코디언(accordian) 메뉴, slideUp / slideDown 사용하기 jquery로 만든 아코디언(accordian) 메뉴입니다. 아코디언 메뉴는 제목을 클릭하면 내용이 펼쳐지고, 다시 클릭하면 축소되는 기능을 말합니다. 스타일 태그를 사용해 제목은 노출시켜놓고, 내용은 숨겨 놓았습니다. 제목을 클릭했을 때 내용의 상태를 보고 숨겨져 있으면 활성화시키고, 반대로 활성화돼있으면 숨김 처리합니다. 간단한 내용이므로 소스 확인 해보시고 응용하시면 됩니다. 어떤 서비스 입니까? 후린개발자 블로그 입니다. 반갑습니다. 사용법이 어떻게 되나요? 블로그 게시글을 정독 해주시면 감사 하겠습니다. 클릭 해주세요. 클릭 해주셔서 감사합니다. 모든 페이지에서 지원하나요? class 명칭을 확인 하시면 쉽게 적용 가능 하십니다. ↓↓↓↓↓ 예제 입니다. (클릭해보세요.) HTML 삽입 미리보기.. 개발이야기/jQuery 2022. 10. 17.