무료 오픈 소스 jQuery 양식 빌더

Alpaca Forms 자유 양식 건축업자

대화식 HTML5 양식을위한 오픈 소스 jQuery 양식 빌더

Alpaca Forms는 JSON 스키마 및 핸들 바 템플릿을 사용하여 웹 및 모바일 애플리케이션을위한 대화식 HTML5 양식을위한 오픈 소스 jQuery 양식 빌더입니다.

무료 오픈 소스 jQuery 양식 빌더

Alpaca Forms

GitHub

개요

무료 HTML5 양식 발전기 도구가 많이 있습니다. 그러나 Alpaca Forms는 웹 및 모바일 애플리케이션을위한 HTML5 양식을 생성하기 위해 매우 간단하고 사용하기 쉬운 jQuery 양식 빌더입니다. JSON 스키마 및 간단한 핸들 바 템플릿을 사용하여 Twitter Bootstrap, JQuery UI, JQuery Mobile 및 HTML5 위에 멋진 사용자 인터페이스를 생성 할 수 있습니다. Alpaca는 매우 유용한 jQuery 양식 디자이너이며 필요한 모든 것이 상자 밖으로 제공됩니다. 대규모 컨트롤 라이브러리, 템플릿, 레이아웃 및 기능으로 사전 포장됩니다. Alpaca는 JSON 중심의 JavaScript Form Creator로 아름다운 형태를 쉽게 렌더링 할 수 있습니다. 확장 가능한 객체 지향 패턴을 중심으로 매우 확장 가능하며 설계되었습니다. 이 내장 확장 성을 사용하면 프로젝트의 새로운 컨트롤, 템플릿, i18 번들 및 사용자 정의 데이터 지속성을 확장하고 구현할 수 있습니다. Alpaca Forms는 제작자 및 개발자가 Alpaca 내의 필드 컨트롤, 레이아웃, 템플릿, 콜백 및 기타 Extensibility Point를 사용하도록 참조 할 수있는 포괄적 인 문서를 제공합니다.

특징

다음은 알파카 양식의 주요 기능입니다

  • JSON 중심
  • 렌더링 된 출력에 대한 jQuery UI, JQuery Mobile 및 HTML5 지원
  • 핸들 바 템플릿
  • 확장 성
  • 포괄적 인 문서
  • 많은 수의 지원 컨트롤
  • 여러 유형의 데이터 소스를 지원합니다
  • 콜백 지원
  • 클라우드 CMS 지원
  • 무료 및 오픈 소스

설치 지침

다음 코드를 웹 페이지의 블록에 복사하십시오.

    <!-- dependencies (jquery, handlebars and bootstrap) -->
      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
      <link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
      <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
      <!-- alpaca -->
      <link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet"/>
      <script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>

양식 스키마 및 구성으로 $ .alpaca ()를 호출하십시오.

     
    <div id="form1"></div>
    <script type="text/javascript">
    $("#form1").alpaca({
        "schema": {
            "title": "What do you think of Alpaca?",
            "type": "object",
            "properties": {
                "name": {
                    "type": "string",
                    "title": "Name"
                },
                "ranking": {
                    "type": "string",
                    "title": "Ranking",
                    "enum": ['excellent', 'not too shabby', 'alpaca built my hotrod']
                }
            }
        }
    });
    </script>

Twitter Bootstrap 및 Alpaca 조합을 사용하여 다음 HTML5 양식을 생성합니다.

 한국인