개발이야기/jQuery58

• 

  [jQuery] 로딩 이미지 보여주기 / 숨기기 (Ajax 호출) 데이터를 조회하거나 처리할 때 사용자에게 알리기 위해 로딩 이미지를 사용합니다. 사용자에게 알리기 뿐만 아니라 중복으로 action 하지 못하게 하는 용도로도 사용할 수 있습니다. 로딩 이미지의 스타일을 작성합니다. 저는 화면 가운데 고정시켰고, 다른 action을 하지 못하게 z-index 속성을 추가해 맨 앞으로 노출시켜 줬습니다. loading 변수를 통해 이미지를 숨기고 있다고 필요한 부분에 show를 통해 노출시키면 됩니다. 간단한 예제이니 확인해서 응용하시면 됩니다. (src 경로에 이미지 경로 작성하시면 됩니다.) 개발이야기/jQuery 2022. 12. 6.

• 

  [jQuery] form 초기화(리셋) 사용법 (form clearForm) jquery로 간단히 form을 리셋시키는 간단한 메서드를 알려 드립니다. jquery 객체에 사용자 메서드를 추가해서 $("셀렉터") 부분에 form id를 지정하시면 됩니다. 저는 초기화 버튼을 클릭하면 메서드를 호출해 form을 리셋시키는 구조입니다. 간단한 소스이니 금방 사용 가능하실 것 같습니다. 소스코드 이름 휴대전화번호 성별 남성 여성 별명 자기소개 초기화 소스화면 개발이야기/jQuery 2022. 11. 22.

• 

  [jQuery] jqGrid multiselect disabled / checked false 처리 (onSelectAll, loadComplete, onSelectRow) jqGrid 리스트 안에 체크박스를 넣는 옵션을 (multiselect: true) row 상태에 따라서 제어하는 소스입니다. 저는 memo_yn='N' (메모가 없는) row에 대해서 체크박스를 비활성화 시켰습니다. jqGrid가 모두 로드 된 후에 실행되는 loadComplete 부분과, checkbox를 전체 선택할 수 있는 onSelectAll 부분, 그리고 해당 row를 클릭했을 때 발생하는 onSelectRow의 소스를 살펴보시면 됩니다. 소스코드 날짜 이름 아이디 상품 가격 메모 소스화면 개발이야기/jQuery 2022. 11. 9.

• 

  [jQuery] jqGrid tooltip 만들기, 표시하기 (jqgrid tooltip example) jqGrid의 셀 위에 마우스를 오버하면 tooltip을 노출시키는 소스입니다. colModel 옵션의 formatter을 활용해서 메모가 있는 상태를 체크해서 표시하고 있습니다. jqGrid의 tooltip 옵션이 아닌 스타일로 꾸미다 보니깐 손쉽게 수정 가능하십니다. row를 클릭했을 때는 메모의 상세 내용은 오른쪽 input 창에도 보이고 있습니다. 저는 메모 내용과 날짜만 data에 담아서 노출하고 있는데 더 많은 정보를 tooltip으로 수정 가능하십니다. 날짜 이름 아이디 상품 가격 메모 소스화면 ↓↓↓↓↓ jqGrid 다른 예제 입니다. [jQuery] jqGrid formatter 버튼 만들기 (jqGrid colModel formatter) jqGrid를 사용하면서 json 형식의 데이터.. 개발이야기/jQuery 2022. 11. 4.

• 

  [jQuery] jqGrid onSelectRow 사용법, 예제 (onSelectRow example) jqGrid row를 클릭했을 때 발생하는 이벤트입니다. onSelectRow : function(index, status) { } 해당 이벤트의 index는 row의 id (첫 번째 row는 1)이며, status는 선택이 되었을 때 true, 반대는 false를 반환합니다. jqGrid의 함수 getRowData로 해당 index의 row의 값들을 가져와서 뿌려주고 있습니다. 아래 소스코드를 보시면 쉽게 이해 가능하시니 응용해서 사용하시면 됩니다. 날짜 이름 아이디 상품 가격 소스화면 [jQuery] jqGrid header colspan (헤더 병합), setGroupHeaders jqGrid header(colNames)를 병합해서 위에 그룹화된 header를 생성하는 방법입니다. grid를 위에.. 개발이야기/jQuery 2022. 11. 2.

• 

  [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.

• 

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

• 

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