README

#Inputter 一个灵活的表单输入控件

##构建状态

目前处于测试版...请稍后再看！

##版本

当前版本被视为测试版。这意味着它已经足够准备好进行测试和使用，但请注意，您应该频繁更新。

由于此软件是 测试版，使用风险自担！

变更日志

变更日志可在此处找到

快速功能亮点
安装
详细使用和服务器端设置
扩展 Inputter 并使用
输入类型和公共属性
与 Laravel 5 一起使用
控制器依赖注入 & 验证
Blade 模板视图
客户端使用
脚本设置
基本选项
Ajax 选项
HTML 历史和 pushState
级联输入
自定义开发
问题和错误报告
许可证

#快速功能亮点

清洁使用

  $exampleInput = new MyExampleInput;   
  $exampleInput->fill($_GET);     // <-- ie. fill it with data from GET request 
  $viewData = $exampleInput->render();    // <-- render it out as an array of HTML inputs for your View
  // and much more!

在 Laravel 5 控制器中实现超级清洁的使用

  public function index(MyExampleInput $exampleInput){   // <-- filled w/request data and validated automatically!
        return view('examples.index', $exampleInput->render());     
  }

简化服务器端输入表示。同时提供广泛的公共属性，以实现灵活的配置和控制

  // In a child class you can setup your inputs like this (read further into docs for more information...)

  $this->addField("state_id", "select")
       ->setValue("")
       ->setCascadeTo("city_id")
       ->setAttribs([
             "style" => "width:100px;",
             "class"=> "form-control"
         ])
       ->setOptions(function(){
              // some logic here that returns all the choices appearing in the drop-down box
         });
  
  $this->addField("city_id", "select")
       ->setValue("")
       ...

简化客户端代码

  // Client-side jQuery as simple as this
  $(".my-example").inputter({
        // set some options here
  });

客户端方法可供您使用（您不需要依赖于 <form> 标签）

  // Gather all the values from the inputs
  var data = $(".my-example").data("inputter").get();
  alert(data.state_id);   // <-- outputs the value of your state_id dropdown

安全且可放置在任何视图/模板中的任何位置，无需任何 <form> 标签（因此您可以在任何位置放置输入！）
```
  <table>
    <tr><td> State: </td><td> <?=$state;?> </td></tr>
    <tr><td> City:  </td><td> <?=$city;?>  </td></tr>
  </table>
```
处理 HTML5 历史记录/pushState 以及在浏览器地址栏中更新输入（无需刷新页面）
使输入级联变得轻而易举！
帮助防止 HTML 标签命名冲突（具有内置前缀和自动去除前缀的功能）
```
  $prefix = "my-example";
```
良好的文档，包含示例（继续阅读）
包含多个高级输入类型，例如 自动完成、日期时间选择器、Chosen.js 等，供您使用
或轻松自定义输入类型
使用 HTML 编码/XSS 防护来确保输入安全
轻松将 AJAX 加载动画 Gif 图片添加到输入中（例如在级联过程中）或任何目标选择器
Laravel 5 兼容（但不会添加任何额外的冗余或依赖项，因此您可以自由地单独使用它）

继续阅读文档以获取有关这些功能和更多功能的详细信息...

#安装

Composer

将以下内容添加到您的项目中的 composer.json 文件中

{
    "require": {
        "Prograhammer/Inputter": "dev-master"
    }
}

运行 composer update

Laravel 5

将服务提供程序添加到 config/app.php

'providers' => [
    // ...
    'Prograhammer\Inputter\InputterServiceProvider'
]

以及外观（也在 config/app.php 中）

'aliases' => [
    // ...
    'Inputter' => 'Prograhammer\Facades\Inputter'
]

详细使用和服务器端设置

扩展 Inputter 并返回您的设置数组

在您的应用程序中创建一个文件来保存一个扩展 Inputter、实现 InputInterface 并添加 setInput() 方法的类

// file: app/Http/Inputs/Examples/ExampleInput.php
<?php namespace App\Http\Input\Examples

use Prograhammer\Inputter
use MyTableDataGateways\Queries as Queries;

class ExampleInput extends Inputter implements InputInterface{
    
    public $prefix = "example-input";

    public function init()
    {
         $input = array();
          
         // Email
         $this->addField("email", "text")
              ->setValue("")
              ->setAttribs([
                   "style" => "width:100px;",
                   "class"=> "form-control",
                   "data-placeholder" => "enter your email",
                   "tabindex" => "0"
                ]);

         // Password
         $this->addField("password", "password")
              ->setValue("")
              ->setAttribs([
                   "style" => "width:100px;",
                   "class"=> "form-control",
                   "tabindex" => "1"
                ]);

         // Country
         $this->addField("cntry", "select")
              ->setValue("")
              ->setCascadeTo("state")
              ->setAttribs([
                   "style" => "width:100px;",
                   "tabindex" => "2"
                ])
              ->setOptions(function(){
                    // Example of using an array
                    return [["text"=>"",       "id"=>"" ],
                            ["text"=>"USA",    "id"=>"1"],
                            ["text"=>"Canada", "id"=>"2"]];                         
                });

         // State
         $this->addField("state", "select")
              ->setValue("")
              ->setCascadeTo("city")
              ->setAttribs([
                   "style" => "width:100px;",
                   "tabindex" => "3"
                ])
              ->setOptions(function(){
                    // Example of performing some logic (a query) and returning array
                    
                    $data = array();
                    $query = new Queries\Inputs\States();

                    // Query for an array of states
                    $data = $query->findByCountry("states.name as 'text', states.id as 'id'", 
                                                       $this->input['cntry']->getValue());
                       
                    // Add a blank row for the top option of the dropdown											    
                    array_unshift($data, array("text"=>"All","value"=>""));
                     
                    return $data;                        
                });

         // City
         $this->addField("city", "select")
              ->setValue("")
              ->setAttribs([
                   "style" => "width:100px;",
                   "tabindex" => "4"
                ])
              ->setOptions(function(){
                    // Example of performing some logic (a query) and returning array
                    
                    $data = array();
                    $query = new Queries\Inputs\Cities();

                    // Query for an array of cities
                    $data = $query->findByState("cities.name as 'text', cities.id as 'id'", 
                                                       $this->input['state']->getValue());
                       
                    // Add a blank row for the top option of the dropdown											    
                    array_unshift($data, array("text"=>"All","value"=>""));
                     
                    return $data;                        
                });

           return $input;   
    }    



}

输入类型和公共属性

使用 InputFactory::make 方法及其公共属性来设置您的输入。

$input['email'] = InputFactory::make('text');   // <-- makes an input type "text"
$input['email']->style = "width:100px;";    // <-- a property you can set for "text" inputs

Inputter 随附了几个现成的 输入类型。您可以在 src/Prograhammer/Inputter/InputTypes/ 文件中查看每个输入类型及其属性

选择 (Select.php) - 用于生成 <select> 类型下拉列表
文本 (Text.php) - 用于生成 <input type='text'> 文本输入
密码 (Text.php) - 用于生成 <input type='password'> 输入
隐藏 (Text.php) - 用于生成 <input type='hidden'> 输入框
自动完成 (AutoComplete.php) - 用于生成 jQuery UI 自动完成输入框
日期 (DateTime.php) - 用于生成 jQuery UI 日期选择器（和日期时间选择器）输入框
链接 (Links.php) - 用于生成一组作为输入框使用的链接（例如 Alpha 分页）

与 Laravel 5 一起使用

控制器依赖注入 & 验证

将包含您的 setInput() 方法的文件更新为以下所示更改。请参阅 Laravel 5 验证文档了解如何定义规则和自定义消息。

// file: app/Http/Inputs/Examples/ExampleInput.php
<?php namespace App\Http\Input\Examples

use Prograhammer\Inputter;
use Prograhammer\InputFactory;
use Illuminate\Http\Request;                                 // <-- Add this
use Illuminate\Contracts\Validation\ValidatesWhenResolved;   // <-- Add this

class ExampleInput extends Inputter implements InputInterface, ValidatesWhenResolved{   // <-- Add this additional interface

    use \Prograhammer\Inputter\ValidatesRequestsTrait;     // <-- Add this trait
    
    public function __construct(Request $request){         // <-- Add a constructor
         parent::__construct();
         $this->request = $request;
         $this->updateValues($this->request->input());
    }

    public $prefix = "example-input";

    public function setInput()
    {
         $input = array();

         $input['email'] = InputFactory::make("text");
         $input['email']->value = "";
         $input['email']->style = "width:100px;";
         $input['email']->custom['data-placeholder'] = "enter your email";
         $input['email']->custom['tabindex'] = "0";
         $input['email']->rules = ['required','email'];           // <-- add some rules to see them validated
         $input['email']->messages = ['email.required' => 'Blah blah email is required'];  // <-- and custom error messages

         // ...

现在您的输入文件已准备好注入到 Laravel 5 控制器中

public function index(MyExampleInput $exampleInput){    // <-- injected here, filled w/request data and validated
      return view('examples.index', $exampleInput->render());    // <-- send the inputs to a view
}

Blade 模板视图

在您的 blade 模板视图中，输入框已被进行 HTML 转义，因此您在 blade 中无需进行此操作。使用 {!! !!} 符号确保输入框不会被双重转义。

<table>
   <tr><td> State: </td><td> {!! $email; !!}     </td></tr>
   <tr><td> City:  </td><td> {!! $password; !!}  </td></tr>
</table>

客户端使用

脚本设置

Inputter 放弃了使用 <form> 标签的要求，让您可以随意在页面设计中使用输入框以及在任何位置使用。您仍然可以为了 渐进增强 的原因添加表单标签，并为您的 JS 用户提供增强的 AJAX 体验。

<html>
<body>
<div>
    <table>
       <tr><td> State: </td><td> {!! $email; !!}     </td></tr>
       <tr><td> City:  </td><td> {!! $password; !!}  </td></tr>
    </table>

    <button id="example-input-submit">Submit</button>
</div>

<script type="text/javascript" src="{{ asset('/packages/prograhammer/inputter/inputter.js') }}"></script>

<script>
    $(function() {

          // Setup Inputter, uses the prefix you set server-side, as a class selector here
          $(".example-input").inputter({
                 // some options can be set here
          });

          // Submit button
          $(".#example-input-submit").click(function(){

                // Retrieve input values into an array
                var data = $(".example-input").data("inputter").get();
                data.additional = "some additional param";   // Easy to add any additional param/values to the array

                 // Make an ajax call
                 $.ajax({
                       type:       "POST",
                       url:        "{{ Request::url()  }}",
                       dataType:   "json",
                       data:       data,
                       success:    function(response){
                            alert('data successfully sent!');
                       }
                 });
          });

</script>
</body>
</html>

待办事项

完成 README.md 文档
完全在客户端构建输入框（在首次页面加载时只发送一个大 JSON 设置字符串）

许可证

Inputter 根据 MIT 许可证发布。

prograhammer / inputter

维护者

详细信息