README

一个具有最小接口的实用库，允许您使用附加功能创建HTML表单字段。

包含的表单字段有

• 文本
• 多文本
• 多文本日历
• 多行文本框
• 选择框
• 多选选择框
• 图标
• 颜色
• 日历
• 标题
• 单选按钮
• 复选框

入门指南

先决条件

• PHP - 表单字段的完整工作需要以下PHP依赖项
  • PHP >= 5.4
  • "bonzer/exceptions" : "dev-master"
  • "oyejorge/less.php" : "v1.7.0.14"
• JavaScript - 表单字段的完整工作需要以下JavaScript依赖项
  • jquery
  • jquery-ui
    (包括：draggable, core, resizable, selectable, sortable, datepicker, menu, selectmenu, button, tooltip)
  • chosen (多选)
  • spectrum (颜色选择器)
• CSS - 表单字段的完整工作需要以下CSS依赖项
  • font-awesome
  • jquery-ui
  • jquery-ui.theme
    (包括：draggable, core, resizable, selectable, sortable, datepicker, menu, selectmenu, button, tooltip, theme)
  • chosen (多选)
  • spectrum (颜色选择器)

安装

可以通过composer安装。运行

composer require bonzer/inputs

配置

Bonzer\Inputs\config\Configurer::get_instance([
  'load_assets_automatically' => true, // recommended option is false, I have made it true so that library does not break if you don't configure
  'css_excluded' => [ ], // keys for js files you don't want the library to load, You should be responsible for loading them for library
  'js_excluded' => [ ],  // keys for js files you don't want the library to load, You should be responsible for loading them for library
  'env' => 'production', // development | production
  'is_admin' => false // flag you can set to tell library when the fields are opened in ADMIN mode, helpful for Exception handling
  'style' => '1', // 1,2,3
]);

上述代码必须放在任何与此库相关的代码之前。

• 注意：可以在src/config.php文件中找到放入js_excluded和css_excluded的键。

此库附带所需的CSS、JavaScript和字体。众所周知，css必须放在head tag中，而对于js，推荐选项是在</body>之前。对于此库，提供了两种方法

$Assets_Loader = Bonzer\Inputs\Assets_Loader::get_instance();
$Assets_Loader->load_head_fragment();
$Assets_Loader->load_before_body_close_fragment();

但如果你打算自己使用这两个选项，将配置中的'load_assets_automatically'键设置为FALSE。即：

'load_assets_automatically' => FALSE

使用方法

有一个名为Bonzer\Inputs\factories\Input的工厂类，它有一个create方法，该方法的蓝图如下

  /**
   * --------------------------------------------------------------------------
   * Create the Input field
   * --------------------------------------------------------------------------
   * 
   * @param string $type | input type ('calendar', 'checkbox', 'color', 'heading', 'icon', 'multi-select', 'multi-text', 'multi-text-calendar', 'radio', 'select', 'text', 'textarea',)
   * @param array $args 
   * 
   * @Return string 
   * */
   public function create( $type, $args );

第二个参数$args的蓝图如下

$args = [
   'name' => $field_name,    string
   'id' => $field_id,        string
   'label' => $field_label,  string
   'placeholder' => $field_placeholder,  string
   'value' => $value,        string
   'desc' => $description,   string
   'options' => $options,    array
   'attrs' => $attrs,        array
];

示例

$input = Bonzer\Inputs\factories\Input::get_instance();
echo $input->create('text', [
  'id' => 'text',
  'placeholder' => 'Hello',
  'value' => '',
]);
echo $input->create('icon', [
  'id' => 'icon',
  'placeholder' => 'select icon',
  'value' => '',
]);
echo $input->create('multi-text', [
  'id' => 'multi-text',
  'placeholder' => 'Hello',
  'value' => '',
]);
echo $input->create('calendar', [
  'id' => 'calendar',
  'placeholder' => 'Calendar',
  'value' => '',
]);
echo $input->create('multi-text-calendar', [
  'id' => 'multi-text-calendar',
  'placeholder' => 'Multi Text Calendar',
  'value' => '',
]);
echo $input->create('textarea', [
  'id' => 'textarea',
  'placeholder' => 'Textarea',
  'value' => '',
]);
echo $input->create('select', [
  'id' => 'select',
  'options' => [
    'hello' => 'Hello',
    'world' => 'World',
  ],
]);
echo $input->create('multi-select', [
  'id' => 'multi-select',
  'options' => [
    'hello' => 'Hello',
    'world' => 'World',
  ],
]);
echo $input->create('color', [
  'id' => 'color',
  'placeholder' => 'Hello',
  'value' => '',
]);

支持

如果你遇到问题，请告诉我。
你可以通过ralhan.paras@gmail.com联系我

致谢

• Font Awesome
• 矢量图标 -- Pixel Buddha来自www.flaticon.com，许可协议为CC 3.0 BY

许可证

本项目采用MIT许可证。