审查视图

application/admin/view/example/customform/index.html 13.2 KB
王晓刚 authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
<div class="row">
    <div class="col-md-6">
        <div class="box box-success">
            <div class="panel-heading">
                {:__('自定义图片描述')}
            </div>
            <div class="panel-body">
                <div class="alert alert-success-light">
                    <b>温馨提示</b><br>
                    默认我们的多图是没有图片描述的,如果我们需要自定义描述,可以使用以下的自定义功能<br>
                    特别注意的是图片的url和描述是分开储存的,也就是说图片一个字段,描述一个字段,你在前台使用时需要自己匹配映射关系<br>
                    <b>下面的演示textarea为了便于调试,设置为可见的,实际使用中应该添加个hidden的class进行隐藏</b>
                </div>
                <form id="first-form" role="form" data-toggle="validator" method="POST" action="">
                    <div class="form-group row">
                        <label class="control-label col-xs-12 col-sm-2">{:__('一维数组示例')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <div class="input-group">
                                <input id="c-files" data-rule="required" class="form-control" size="50" name="row[files]" type="text" value="https://cdn.fastadmin.net/uploads/addons/blog.png,https://cdn.fastadmin.net/uploads/addons/cms.png,https://cdn.fastadmin.net/uploads/addons/vote.png">
                                <div class="input-group-addon no-border no-padding">
                                    <span><button type="button" id="plupload-files" class="btn btn-danger plupload" data-input-id="c-files" data-mimetype="*" data-multiple="true" data-preview-id="p-files"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                    <span><button type="button" id="fachoose-files" class="btn btn-primary fachoose" data-input-id="c-files" data-mimetype="*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                </div>
                                <span class="msg-box n-right" for="c-files"></span>
                            </div>

                            <!--ul需要添加 data-template和data-name属性,并一一对应且唯一 -->
                            <ul class="row list-inline plupload-preview" id="p-files" data-template="introtpl" data-name="row[intro]"></ul>

                            <!--请注意 ul和textarea间不能存在其它任何元素,实际开发中textarea应该添加个hidden进行隐藏-->
                            <textarea name="row[intro]" class="form-control" style="margin-top:5px;">["简洁响应式博客","CMS内容管理系统","在线投票系统"]</textarea>

                            <!--这里自定义图片预览的模板 开始-->
                            <script type="text/html" id="introtpl">
                                <li class="col-xs-3">
                                    <a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
                                        <img src="<%=fullurl%>" class="img-responsive">
                                    </a>
                                    <input type="text" name="row[intro][<%=index%>]" class="form-control" placeholder="请输入文件描述" value="<%=value?value:''%>"/>
                                    <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
                                </li>
                            </script>
                            <!--这里自定义图片预览的模板 结束-->
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-xs-12 col-sm-2">{:__('二维数组示例')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <div class="input-group">
                                <input id="c-images" data-rule="required" class="form-control" size="50" name="row[images]" type="text" value="https://cdn.fastadmin.net/uploads/addons/example.png,https://cdn.fastadmin.net/uploads/addons/upyun.png,https://cdn.fastadmin.net/uploads/addons/alioss.png">
                                <div class="input-group-addon no-border no-padding">
                                    <span><button type="button" id="plupload-images" class="btn btn-danger plupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                    <span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                </div>
                                <span class="msg-box n-right" for="c-images"></span>
                            </div>

                            <!--ul需要添加 data-template和data-name属性,并一一对应且唯一 -->
                            <ul class="row list-inline plupload-preview" id="p-images" data-template="desctpl" data-name="row[desc]"></ul>

                            <!--请注意 ul和textarea间不能存在其它任何元素,实际开发中textarea应该添加个hidden进行隐藏-->
                            <textarea name="row[desc]" class="form-control" style="margin-top:5px;">[{"info":"开发者示例插件","size":"1M"},{"info":"又拍云储存整合","size":"2M"},{"info":"阿里OSS云储存","size":"1M"}]</textarea>

                            <!--这里自定义图片预览的模板 开始-->
                            <script type="text/html" id="desctpl">
                                <li class="col-xs-3">
                                    <a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
                                        <img src="<%=fullurl%>" class="img-responsive">
                                    </a>
                                    <input type="text" name="row[desc][<%=index%>][info]" class="form-control" placeholder="请输入插件描述" value="<%=value?value['info']:''%>"/>
                                    <input type="text" name="row[desc][<%=index%>][size]" class="form-control" placeholder="请输入插件大小" value="<%=value?value['size']:''%>"/>
                                    <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
                                </li>
                            </script>
                            <!--这里自定义图片预览的模板 结束-->
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12 col-sm-8">
                            <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
                            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>

    </div>
    <div class="col-md-6">
        <div class="box box-info">
            <div class="panel-heading">
                {:__('自定义Fieldlist示例')}
            </div>
            <div class="panel-body">
                <div class="alert alert-danger-light">
                    <b>温馨提示</b><br>
                    默认我们的fieldlist只有一维数组,为键值形式,如果需要二维数组,可使用下面的自定义模板来实现<br>
                    默认追加的元素是没有进行事件绑定的,我们需要监听btn-append这个按钮的fa.event.appendfieldlist事件<br>
                    <b>下面的演示textarea为了便于调试,设置为可见的,实际使用中应该添加个hidden的class进行隐藏</b>
                </div>
                <form id="second-form" role="form" data-toggle="validator" method="POST" action="">

                    <div class="form-group row">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Fieldlist示例')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <dl class="fieldlist" data-template="basictpl" data-name="row[basic]">
                                <dd>
                                    <ins>{:__('标题')}</ins>
                                    <ins>{:__('介绍')}</ins>
                                    <ins>{:__('大小')}</ins>
                                </dd>
                                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
                                <!--请注意 dd和textarea间不能存在其它任何元素,实际开发中textarea应该添加个hidden进行隐藏-->
                                <textarea name="row[basic]" class="form-control" cols="30" rows="5">[{"title":"开发者示例插件","intro":"开发者必备","size":"1M"},{"title":"又拍云储存整合","intro":"一款云储存","size":"2M"},{"title":"阿里OSS云储存","intro":"一款云储存","size":"1M"}]</textarea>
                            </dl>
                            <script id="basictpl" type="text/html">
                                <dd class="form-inline">
                                    <ins><input type="text" name="<%=name%>[<%=index%>][title]" class="form-control" value="<%=row.title%>" placeholder="标题" size="10"/></ins>
                                    <ins><input type="text" name="<%=name%>[<%=index%>][intro]" class="form-control" value="<%=row.intro%>" placeholder="描述"/></ins>
                                    <ins><input type="text" name="<%=name%>[<%=index%>][size]" class="form-control" value="<%=row.size%>" placeholder="大小"/></ins>
                                    <!--下面的两个按钮务必保留-->
                                    <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                                    <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                                </dd>
                            </script>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-xs-12 col-sm-2">{:__('元素事件')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <dl class="fieldlist" data-template="eventtpl" data-name="row[event]">
                                <dd>
                                    <ins>{:__('管理员')}</ins>
                                    <ins>{:__('名称')}</ins>
                                    <ins>{:__('登录时间')}</ins>
                                </dd>
                                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
                                <!--请注意 dd和textarea间不能存在其它任何元素,实际开发中textarea应该添加个hidden进行隐藏-->
                                <textarea name="row[event]" class="form-control" cols="30" rows="5">[{"id":"1","name":"admin","time":"2019-06-28 12:05:03"}]</textarea>
                            </dl>
                            <script id="eventtpl" type="text/html">
                                <dd class="form-inline">
                                    <ins><input type="text" name="<%=name%>[<%=index%>][id]" class="form-control selectpage" data-source="auth/admin/selectpage" data-field="username" value="<%=row.id%>" placeholder="管理员" size="10"/></ins>
                                    <ins><input type="text" name="<%=name%>[<%=index%>][name]" class="form-control" value="<%=row.name%>" placeholder="名称"/></ins>
                                    <ins><input type="text" name="<%=name%>[<%=index%>][time]" class="form-control datetimepicker" value="<%=row.time%>" placeholder="时间"/></ins>
                                    <!--下面的两个按钮务必保留-->
                                    <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                                    <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                                </dd>
                            </script>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12 col-sm-8">
                            <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
                            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>

    </div>
</div>