일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- #image
- #업종별
- CSS
- #웹솔루션
- happycgi
- #솔루션
- 해피CGI
- CGIMALL
- #홈페이지
- #홈페이지제작
- 사이트제작
- 솔루션
- 이미지
- 웹솔루션
- jquery
- javascript
- #이미지
- #cgimall
- #happycgi
- 해피씨지아이
- #jQuery
- #CSS
- #동영상
- 홈페이지제작
- #해피CGI
- 게시판
- #쇼핑몰
- 홈페이지
- #뉴스
- php
- Today
- Total
웹솔루션개발 25년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] 드래그 앤 드랍으로 폼 생성하기 본문
textarea Form Builder는 사용자가 드래그 앤 드롭 방식으로 빠르게 웹 양식을 만들 수 있도록 하는 온라인 양식 빌더로 전환해주는 jQuery 플러그인입니다. 또한 지정한 폼 템플릿에서 폼을 렌더링할 수 있는 formRender 구성 요소를 제공합니다.
# 사용방법
1. 프로젝트에 jQuery 라이브러리와 jQuery 폼 빌더의 스타일 및 Script 를 로드 합니다.
<script src="./dist/form-builder.min.js"></script>
<script src="./dist/form-render.min.js"></script>
2. 드래그 앤 드랍이 가능한 폼 구성요소를 만드는데 필요한 jQueryUI를 로드합니다.
3. 폼 빌더에 대한 표준 HTML 을 만듭니다.
<textarea name="formBuilder" id="formBuilder"></textarea>
4. 플러그인을 호출하여 기본 빌더를 생성 합니다.
<script>$('#formBuilder').formBuilder();</script>
# 주의사항
웹페이지가 자동으로 만들어 지는게 아닙니다.
웹 페이지에서 사용할 폼 종류, 옵션 값, 위치 등의 JSON 데이터를 사용자로 부터 제공 받을 수 있도록 하는 기능입니다.
결국 개발자가 JSON 데이터를 이용하여 폼을 생성하는 작업을 해야 합니다.
'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글
[해피CGI][cgimall] 간단한 이미지 내부 확대/축소 플러그인 - jQuery Zoom (0) | 2025.09.23 |
---|---|
[해피CGI][cgimall] 텍스트 URL을 링크로 변환 - linkify (0) | 2025.09.04 |
[해피CGI][cgimall] 다양한 모양의 프로세서바 - loading-bar (0) | 2025.08.29 |
[해피CGI][cgimall] jQuery 및 Bootstrap을 사용하여 비밀번호 필드 텍스트 표시/숨기기 (0) | 2025.08.21 |
[해피CGI][cgimall] 텍스트 영역에 대한 사용자 정의 가능한 줄 번호 - jQuery Linenumbers (0) | 2025.08.20 |
Comments