README

Modalizable 是一个 Bootstrap 4 样式的弹出模态编辑插件，它可以使您轻松创建编辑模态弹出窗口，并且可以根据您的需求进行自定义。它目前支持所有输入类型，并且可以自动提交表单。

要求

Bootstrap 4
Jquery
Laravel

用法

通过 composer 安装

composer require dragonsofware/modalizable

发布资源

php artisan vendor:publish --tag="dragon_modal"

包含脚本

@include("modalizable::modalscript",["click"=>"","modal"=>"","autoSubmit"=>(bool)])

上面 @include 数组中的 click、modal 和 autoSubmit 键是可选的。但如果您想给 Bootstrap 模态框赋予不同的 id，则必须提供它们。默认情况下，click 是一个 html 5 类属性，当您的前端编辑按钮被点击时触发模态框。这默认设置为 modalizable，这意味着如果您有一个编辑的标记代码，您应该将其以下类附加到它上。

modal 表示要赋予模态框的 id，默认情况下为 modalizableModal。

autoSubmit 表示当您点击保存按钮时，此库是否应自动使用 AJAX 并处理错误。

<button class="modalizable">Edit</button>

特性！

要使用此库，请确保您执行以下操作：

按照以下代码示例调用 modalizableGenerator()，用于文本、数字、电话、文件、范围、日期时间、日期、电子邮件、搜索、颜色、文本区域等输入类型。

 Modalizable::modalizableGenerator()

示例

<td>
     <div data-edit="{!! Modalizable::modalizableGenerator('text',['Salam Justice',false, 'Full Name'],'user',['name'=>'full_name','data-menu'=>'main'],'form-control clearError','edit-name') !!}">
     {{$name/anything}}
     </div>
 </td>;

上述代码将创建以下模态弹出窗口内容

<div class='form-group'>
         <div class='input-group'>
           <div class='input-group-prepend'>
             <span class='input-group-text'>Full Name <i class="fa fa-user"></i></span>
           </div>
             <input type="text" name='edit-name' value="Salam Justice" data-menu='main' />
         </div>
 </div>

传递给 modalizableGenerator() 的第一个参数表示要创建的输入类型。

第二个参数是一个数组，包含[用于输入的值、此值无效果、分配给输入组的标签]。

第三个参数是要使用的 font awesome 图标。

第四个参数是一个数组，包含用于作为 html 5 标签属性和值的属性键和相应值，每个键是属性本身，属性值的值是相关键的值。

第五个参数是应用于输入标签的类。

第六个参数是要分配给输入标签的 id。

同时，对于类型为选择、多选、复选框、单选按钮、开关的输入，遵循相同的模式，但需要对传递给 modalizableGenerator 方法的第二个参数进行轻微修改。您只需传递一个数组，该数组包含用作值和标签的每个元素的值，例如

[
    ["id"=>1,"name"=>"Alaska","created_at"=>'2012-02-03'],
    ["id"=>2,"name"=>"Newyork", "created_at"=>'2012-02-03']
] 
the above similar type of array should be used as the second argument passed to the method of the modalizableGenerator.

然后，您还需要传递一个用于选择标签的标签（modalizableGenerator 方法的第 6 个参数）。对于选择选项，此标签用作 optgroup，对于单选按钮、复选框和开关，它用作整个单选按钮或复选框的标题。

下一个参数（第 7 个参数）是选定的值，表示要选择或检查的项目，应作为数组传递。对于选择，需要一个单个值，对于复选框，需要多个或单个值。例如，对于上面定义的值数组

[1] for select means Alaska is selected
[1,2] for checkbox or radio or multiSelect means Newyork and Alaska are checked

下一个参数（第 8 个参数）是键，用于确定从值参数数组中使用的键，用于标签、值以及确定选择或检查的内容。例如。

['label'=>'name','value'=>'id','selected'=>'id']

下一个参数（第9个）是自定义属性，如果您想将数组作为selext、radio、checkbox、switch标签的自定义属性使用，则可以使用此属性。例如，每个值键的索引用于属性。

['name'=>'my',values=>[ array of values each index corresponds to input of the value argument]] to access this a custom attribute of data-my is created with value of index of the currently iterated value argument

最后一个参数是父类，它定义了要附加到包含整个输入标签的主要div中的类。

要初始化此功能，请确保您的用于编辑的按钮具有以下属性

 $text = "Name: {$collection->get('name')},";
                $option= json_encode(["id"=>$collection->get('id'),"caption"=>"Edit Programme For $text","url"=>route('crudprogramme.update',['crudprogramme'=>$collection->get('id')]),"csrf"=>csrf_token(),"class"=>"silentSubmit","placeholder"=>"editErrorMessages","errors"=>"clearEditInvalidity","type"=>"edit"]);
<button type='button' data-option='".$option."' class='mx-1 modalizable my-1 btn btn-sm btn-primary'><i class='fa fa-edit'></i>

上述内容可以解释如下。

id表示当前编辑表单的唯一标识符

标题表示用作模态标题的文本

url表示表单提交的位置

class表示当模态中的保存按钮被点击时触发自动提交应使用的类

占位符表示它应给显示错误的标签id的名称

错误表示用于清除发现验证错误的字段的类，如果启用了自动提交，则此操作将自动处理

类型表示在可模态化的Controller上的标记中用作id的前缀的内容，例如edit-name

##更多示例：checkbox使用

$nestedArray['attributes'] = "<div data-edit='".Modalizable::modalizableGenerator('checkbox',Attribute::all()->sortBy('name')->toArray(),'',['name'=>'attribute_id[]'],'clearEditInvalidity custom-select form-control my-2','edit-attribute_id','Attribute',collect($collection->get('attributes_model'))->pluck('id')->all(),['selected'=>'id','label'=>'name','value'=>'id'])."'>" . $name . "</div>";

select选项使用

$nestedArray['admin_category_id']= "<div data-edit='".Modalizable::modalizableGenerator('select',AdminCategory::all()->toArray(),'',['name'=>'admin_category_id'],'clearEditInvalidity searchableSelect form-control','edit-admin_category_id','Admin Category',[$collection->get('admin_category_id')],['selected'=>'id','label'=>'name','value'=>'id'])."'>".optional($collection->get('admin_category'))['name']."</div>";

##执行复杂格式化以执行复杂任务时，请监听bootstrap模态打开事件

jQuery('#modalizableModal').on('shown.bs.modal', function () {
  jQuery('#edit-name').trigger('focus')
})
if the id was changed do put the respective name of the modal passed to the modal key at the @include

即将推出的功能

文件预览
更多来自您的建议

dragonsoftware / modalizable

维护者

详细信息

README

要求

用法

特性！

示例

即将推出的功能