免费的开源jQuery Form Builder

Alpaca Forms 自由形式的构建器

交互式HTML5表单的开源jQuery Form Builder

羊驼表格是一种开源jQuery Form Builder，用于使用JSON模式和车把模板为您的Web和移动应用程序的交互式HTML5表单。

免费的开源jQuery Form Builder

Alpaca Forms

GitHub

概述

有很多免费的HTML5表单生成器工具。但是，羊驼表格是一种非常简单易用的jQuery表单构建器，可生成用于Web和移动应用程序的HTML5表单。它使您可以使用JSON模式和简单的车把模板在Twitter Bootstrap，Jquery UI，JQuery Mobile和HTML5上生成漂亮的用户界面。 羊驼是非常有用的jQuery表单设计师，您需要的所有内容都可以开箱即用。它预先包含大型控件，模板，布局和功能库。羊驼是JSON驱动的JavaScript形式的创建者，使其非常容易呈现美丽的形式。 它非常可扩展，并围绕着可扩展的对象图案进行设计。这种内置的可扩展性使您可以扩展和实施您项目的新控件，模板，i18捆绑包和自定义数据持久性。 羊驼表格提供了全面的文档，形成构建者和开发人员可以参考使用羊驼毛中的现场控件，布局，模板，回调和其他可扩展点。

特征

以下是羊驼形式的关键特征

  • 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和羊驼组合生成以下HTML5形式。

 简体中文