Trình tạo mẫu JQuery nguồn mở miễn phí

Alpaca Forms Trình tạo mẫu miễn phí

Trình tạo mẫu JQuery nguồn mở cho các biểu mẫu HTML5 tương tác

ALPACA Forms là một trình tạo mẫu jQuery nguồn mở, cho các biểu mẫu HTML5 tương tác cho các ứng dụng web và di động của bạn bằng các mẫu JSON Lược đồ và tay lái.

Trình tạo mẫu JQuery nguồn mở miễn phí

Alpaca Forms

GitHub

Tổng quan

Có rất nhiều công cụ tạo mẫu HTML5 miễn phí có sẵn. Nhưng, ALPACA Forms là một trình tạo mẫu jQuery rất đơn giản và dễ sử dụng để tạo các biểu mẫu HTML5 cho các ứng dụng web và di động. Nó cho phép bạn tạo ra các giao diện người dùng trông tuyệt vời trên đầu Twitter Bootstrap, JQuery UI, JQuery Mobile và HTML5 bằng cách sử dụng các mẫu Lược đồ JSON và các mẫu tay lái đơn giản. Alpaca là một nhà thiết kế biểu mẫu jQuery rất hữu ích và mọi thứ bạn cần đều được cung cấp ra khỏi hộp. Nó được đóng gói sẵn với một thư viện lớn các điều khiển, mẫu, bố cục và tính năng. Alpaca là một người tạo mẫu JavaScript hướng đến JSON, điều này giúp cho việc tạo các hình thức đẹp. Nó rất mở rộng và được thiết kế xung quanh một mẫu hướng đối tượng có thể mở rộng. Tính mở rộng tích hợp này cho phép bạn mở rộng và thực hiện các điều khiển mới, mẫu, gói i18 và sự tồn tại của dữ liệu tùy chỉnh cho các dự án của bạn. ALPACA Forms cung cấp tài liệu toàn diện, hình thành các nhà xây dựng và nhà phát triển có thể tham khảo để làm việc với các điều khiển hiện trường, bố cục, mẫu, gọi lại và các điểm mở rộng khác trong ALPACA.

Đặc trưng

Sau đây là các tính năng chính của các biểu mẫu Alpaca

  • định hướng JSON
  • Hỗ trợ JQuery UI, JQuery Mobile và HTML5 cho đầu ra được hiển thị
  • Mẫu tay lái
  • Khả năng mở rộng
  • Một tài liệu toàn diện
  • Một số lượng lớn các điều khiển được hỗ trợ
  • Hỗ trợ nhiều loại nguồn dữ liệu
  • Hỗ trợ cho các cuộc gọi lại
  • Được hỗ trợ bởi đám mây CMS
  • Nguồn mở và miễn phí của nó

Hướng dẫn cài đặt

Sao chép mã sau vào TheBlock của trang web của bạn:

    <!-- 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>

Gọi $ .Alpaca () với lược đồ biểu mẫu của bạn và bất kỳ cấu hình nào:

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

Điều này sẽ tạo biểu mẫu HTML5 sau đây bằng cách sử dụng kết hợp Twitter Bootstrap và Alpaca.

 Tiếng Việt