ThinkCMF后台页面模板demo

最新推荐文章于 2023-09-17 16:26:14 发布

节节竹

最新推荐文章于 2023-09-17 16:26:14 发布

阅读量2.8k

点赞数

分类专栏： Thinkphp

本文链接：https://blog.csdn.net/qq_32289849/article/details/103347451

版权

Thinkphp 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

index列表页面模板

<include file="public@header"/>
</head>
<body>
<!--页面内容-->
<div class="wrap js-check-wrap">
    <!--页面内导航开始-->
    <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:;">所有文章</a></li>
        <li><a href="{:url('AdminIndex/add')}">添加文章</a></li>
    </ul>
    <!--页面内导航结束-->
    <!--页面搜索-->
    <form class="well form-inline margin-top-20" method="post" action="{:url('AdminIndex/index')}">
        标题:
        <input type="text" class="form-control" name="keyword" style="width: 200px;"
               value="{$keyword|default=''}" placeholder="请输入关键字">
        <button class="btn btn-primary">搜索</button>
    </form>
    <!--页面搜索结束-->
    <!--页面列表主体-->
    <form class="js-ajax-form" action="" method="post">
        <!--列表操作多选-->
        <div class="table-actions">
            <button class="btn btn-danger btn-sm js-ajax-submit" type="submit" data-action="{:url('AdminIndex/delete')}"
                    data-subcheck="true" data-msg="{:lang('DELETE_CONFIRM_MESSAGE')}">{:lang('DELETE')}
            </button>
            <!--<button class="btn btn-primary btn-sm js-ajax-submit" type="submit"
                    data-action="{:url('AdminArticle/publish',array('yes'=>1))}" data-subcheck="true">发布
            </button>
            <button class="btn btn-primary btn-sm js-ajax-submit" type="submit"
                    data-action="{:url('AdminArticle/publish',array('no'=>1))}" data-subcheck="true">取消发布
            </button>
            <button class="btn btn-primary btn-sm js-ajax-submit" type="submit"
                    data-action="{:url('AdminArticle/top',array('yes'=>1))}" data-subcheck="true">置顶
            </button>
            <button class="btn btn-primary btn-sm js-ajax-submit" type="submit"
                    data-action="{:url('AdminArticle/top',array('no'=>1))}" data-subcheck="true">取消置顶
            </button>
            <button class="btn btn-primary btn-sm js-ajax-submit" type="submit"
                    data-action="{:url('AdminArticle/recommend',array('yes'=>1))}" data-subcheck="true">推荐
            </button>
            <button class="btn btn-primary btn-sm js-ajax-submit" type="submit"
                    data-action="{:url('AdminArticle/recommend',array('no'=>1))}" data-subcheck="true">取消推荐
            </button>-->
        </div>
        <!--列表操作多选结束-->

        <!--列表内容-->
        <table class="table table-hover table-bordered table-list">
            <!--头部展示-->
            <thead>
            <tr>
                <th width="16">
                    <label>
                        <input type="checkbox" class="js-check-all" data-direction="x" data-checklist="js-check-x">
                    </label>
                </th>
                <th width="100">ID</th>
                <th>标题</th>
                <th width="80">作者</th>
                <th width="160">发布时间</th>
                <th width="80">状态</th>
                <th width="120">操作</th>
            </tr>
            </thead>
            <!--头部展示结束-->
            <!--列表主体内容-->
            <foreach name="data" item="vo">
                <tr>
                    <td>
                        <input type="checkbox" class="js-check" data-yid="js-check-y" data-xid="js-check-x" name="ids[]"
                               value="{$vo.id}">
                    </td>
                    <td>{$vo.id}</td>
                    <td>
                        <a href="{:url('portal/page/index',array('id'=>$vo['id']))}" target="_blank">
                            {$vo.post_title}
                        </a>
                    </td>
                    <td>{$vo.user_nickname}</td>
                    <td>
                        <empty name="vo.published_time">
                            未发布
                            <else/>
                            {:date('Y-m-d H:i',$vo['published_time'])}
                        </empty>
                    </td>
                    <td>
                        <notempty name="vo.post_status">
                            <a data-toggle="tooltip" title="已发布"><i class="fa fa-check"></i></a>
                            <else/>
                            <a data-toggle="tooltip" title="未发布"><i class="fa fa-close"></i></a>
                        </notempty>
                    </td>
                    <td>
                        <a class="btn btn-xs btn-primary" href="{:url('AdminIndex/edit',array('id'=>$vo['id']))}">{:lang('EDIT')}</a>
                        <a class="btn btn-xs btn-danger js-ajax-delete" href="{:url('AdminIndex/delete',array('id'=>$vo['id']))}">{:lang('DELETE')}</a>
                    </td>
                </tr>
            </foreach>
            <!--列表主体内容结束-->
        </table>
        <!--列表内容结束-->
        <!--列表分页-->
        <div class="pagination">{$page}</div>
        <!--列表分页结束-->
    </form>
    <!--页面列表主体结束-->
</div>

<!--js操作-->
<script src="__STATIC__/js/admin.js"></script>
<!--js操作结束-->
<script>
    $(function () {
        //异步加载js、css ,别名或者绝对地址
        Wind.use('layer',function(){});
        Wind.css('layer',function(){})
    });
</script>
</body>
</html>

add添加页面模板

<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
</style>
<!--相册的js-->
<script type="text/html" id="photos-item-tpl">
    <li id="saved-image{id}">
        <input id="photo-{id}" type="hidden" name="photo_urls[]" value="{filepath}">
        <input class="form-control" id="photo-{id}-name" type="text" name="photo_names[]" value="{name}"
               style="width: 200px;" title="图片名称">
        <img id="photo-{id}-preview" src="{url}" style="height:36px;width: 36px;"
             onclick="imagePreviewDialog(this.src);">
        <a href="javascript:uploadOneImage('图片上传','#photo-{id}');">替换</a>
        <a href="javascript:(function(){$('#saved-image{id}').remove();})();">移除</a>
    </li>
</script>
<!--相册的js结束-->
<!--附件的js-->
<script type="text/html" id="files-item-tpl">
    <li id="saved-file{id}">
        <input id="file-{id}" type="hidden" name="file_urls[]" value="{filepath}">
        <input class="form-control" id="file-{id}-name" type="text" name="file_names[]" value="{name}"
               style="width: 200px;" title="文件名称">
        <a id="file-{id}-preview" href="{preview_url}" target="_blank">下载</a>
        <a href="javascript:uploadOne('文件上传','#file-{id}','file');">替换</a>
        <a href="javascript:(function(){$('#saved-file{id}').remove();})();">移除</a>
    </li>
</script>
<!--附件的js结束-->
</head>
<body>
<div class="wrap js-check-wrap">
    <!--页面内导航-->
    <ul class="nav nav-tabs">
        <li><a href="{:url('AdminIndex/index')}">{:lang('ADMIN_TAG_INDEX')}</a></li>
        <li class="active"><a href="{:url('AdminIndex/add')}">{:lang('ADMIN_TAG_ADD')}</a></li>
        <li><a  href="{:url('nav/edit')}" >{:lang('ADMIN_NAV_EDIT')}</a></li>
    </ul>
    <!--页面内导航结束-->
    <!--表单提交开始-->
    <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('AdminIndex/addPost')}">

        <!--提交的表单字段-->
        <div class="form-group">
            <label class="col-sm-2 control-label"><span class="form-required">*</span>名称:</label>
            <div class="col-md-6 col-sm-10">
                <input type="text" class="form-control" name="name" value="">
            </div>
        </div>
        <!--提交的表单字段结束-->
<div class="form-group">
            <label for="input-description">描述</label>
            <div>
                <textarea class="form-control" name="post[description]" id="input-description"></textarea>
            </div>
        </div>

       <div class="form-group">
            <label class="col-sm-2 control-label">缩略图</label>
            <div class="col-md-6 col-sm-10">
                <input type="hidden" name="more[thumbnail]" class="form-control"
                       id="js-thumbnail-input">
                <div>
                    <a href="javascript:uploadOneImage('图片上传','#js-thumbnail-input');">
                        <img src="__TMPL__/public/assets/images/default-thumbnail.png"
                             id="js-thumbnail-input-preview"
                             width="135" style="cursor: pointer"/>
                    </a>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">内容:</label>
            <div class="col-md-6 col-sm-10">
                <script type="text/plain" id="content" name="content"></script>
            </div>
        </div>

        <tr>
            <th>相册</th>
            <td>
                <ul id="photos" class="pic-list list-unstyled form-inline"></ul>
                <a href="javascript:uploadMultiImage('图片上传','#photos','photos-item-tpl');"
                   class="btn btn-default btn-sm">选择图片</a>
            </td>
        </tr>

        <tr>
            <th>附件</th>
            <td>
                <ul id="files" class="pic-list list-unstyled form-inline">
                </ul>
                <a href="javascript:uploadMultiFile('附件上传','#files','files-item-tpl','file');"
                   class="btn btn-sm btn-default">选择文件</a>
            </td>
        </tr>

        <tr>
            <th>音频</th>
            <td class="form-inline">
                <input id="file-audio" class="form-control" type="text" name="post[more][audio]"
                       value="{$post.more.audio|default=''}" placeholder="请上传音频文件" style="width: 200px;">
                <notempty name="post.more.audio">
                    <a id="file-audio-preview" href="{:cmf_get_file_download_url($post.more.audio)}"
                       target="_blank">下载</a>
                </notempty>

                <a href="javascript:uploadOne('文件上传','#file-audio','audio');">上传</a>
            </td>
        </tr>

        <tr>
            <th>视频</th>
            <td class="form-inline">
                <input id="file-video" class="form-control" type="text" name="post[more][video]"
                       value="{$post.more.video|default=''}" placeholder="请上传视频文件" style="width: 200px;">
                <notempty name="post.more.video">
                    <a id="file-video-preview" href="{:cmf_get_file_download_url($post.more.video)}"
                       target="_blank">下载</a>
                </notempty>
                <a href="javascript:uploadOne('文件上传','#file-video','video');">上传</a>
            </td>
        </tr>



        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary js-ajax-submit">{:lang("SAVE")}</button>
            <a class="btn btn-default" href="__URL__">返回</a>
        </div>
    </form>
    <!--表单提交结束-->
</div>
<script src="__STATIC__/js/admin.js"></script>
<!--编辑器的js开始-->
<script type="text/javascript">
    //编辑器路径定义
    var editorURL = GV.WEB_ROOT;
</script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
    $(function () {

        editorcontent = new baidu.editor.ui.Editor();
        editorcontent.render('content');
        try {
            editorcontent.sync();
        } catch (err) {
        }
        /*缩略图的js*/
        $('.btn-cancel-thumbnail').click(function () {
            $('#thumbnail-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
            $('#thumbnail').val('');
        });

    });
</script>
<!--编辑器的js结束-->
</body>
</html>

edit编辑页面模板

<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
</style>
<!--相册js-->
<script type="text/html" id="photos-item-tpl">
    <li id="saved-image{id}">
        <input id="photo-{id}" type="hidden" name="photo_urls[]" value="{filepath}">
        <input class="form-control" id="photo-{id}-name" type="text" name="photo_names[]" value="{name}"
               style="width: 200px;" title="图片名称">
        <img id="photo-{id}-preview" src="{url}" style="height:36px;width: 36px;"
             onclick="imagePreviewDialog(this.src);">
        <a href="javascript:uploadOneImage('图片上传','#photo-{id}');">替换</a>
        <a href="javascript:(function(){$('#saved-image{id}').remove();})();">移除</a>
    </li>
</script>
<!--附件js-->
<script type="text/html" id="files-item-tpl">
    <li id="saved-file{id}">
        <input id="file-{id}" type="hidden" name="file_urls[]" value="{filepath}">
        <input class="form-control" id="file-{id}-name" type="text" name="file_names[]" value="{name}"
               style="width: 200px;" title="文件名称">
        <a id="file-{id}-preview" href="{preview_url}" target="_blank">下载</a>
        <a href="javascript:uploadOne('文件上传','#file-{id}','file');">替换</a>
        <a href="javascript:(function(){$('#saved-file{id}').remove();})();">移除</a>
    </li>
</script>
</head>
<body>
<div class="wrap js-check-wrap">
    <!--页面内导航-->
    <ul class="nav nav-tabs">
        <li><a href="{:url('AdminArticle/index')}">文章管理</a></li>
        <li>
            <a href="{:url('AdminArticle/add')}">添加文章</a>
        </li>
        <li class="active"><a href="#">编辑文章</a></li>
    </ul>

    <!--表单提交-->
    <form action="{:url('AdminArticle/editPost')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
        <!--提交的表单字段-->
        <div class="form-group">
            <label class="col-sm-2 control-label"><span class="form-required">*</span>名称:</label>
            <div class="col-md-6 col-sm-10">
                <input type="text" class="form-control" name="name" value="{$post.name}">
            </div>
        </div>
        <!--提交的表单字段结束-->


        <div class="form-group">
            <label class="col-sm-2 control-label">缩略图</label>
            <div class="col-md-6 col-sm-10">
                <input type="hidden" name="post[more][thumbnail]" id="thumbnail"
                       value="{$post.more.thumbnail|default=''}">
                <a href="javascript:uploadOneImage('图片上传','#thumbnail');">
                    <if condition="empty($post.more.thumbnail)">
                        <img src="__TMPL__/public/assets/images/default-thumbnail.png"
                             id="thumbnail-preview"
                             width="135" style="cursor: pointer"/>
                        <else/>
                        <img src="{:cmf_get_image_preview_url($post.more.thumbnail)}"
                             id="thumbnail-preview"
                             width="135" style="cursor: pointer"/>
                    </if>
                </a>
                <input type="button" class="btn btn-sm btn-cancel-thumbnail" value="取消图片">
            </div>
        </div>

        <tr>
            <th>内容</th>
            <td>
                <script type="text/plain" id="content" name="post[post_content]">{$post.post_content}</script>
            </td>
        </tr>

        <tr>
            <th>相册</th>
            <td>
                <ul id="photos" class="pic-list list-unstyled form-inline">
                    <notempty name="post.more.photos">
                        <foreach name="post.more.photos" item="vo">
                            <php>$img_url=cmf_get_image_preview_url($vo['url']);</php>
                            <li id="saved-image{$key}">
                                <input id="photo-{$key}" type="hidden" name="photo_urls[]"
                                       value="{$vo.url}">
                                <input class="form-control" id="photo-{$key}-name" type="text"
                                       name="photo_names[]"
                                       value="{$vo.name|default=''}" style="width: 200px;" title="图片名称">
                                <img id="photo-{$key}-preview"
                                     src="{:cmf_get_image_preview_url($vo['url'])}"
                                     style="height:36px;width: 36px;"
                                     onclick="parent.imagePreviewDialog(this.src);">
                                <a href="javascript:uploadOneImage('图片上传','#photo-{$key}');">替换</a>
                                <a href="javascript:(function(){$('#saved-image{$key}').remove();})();">移除</a>
                            </li>
                        </foreach>
                    </notempty>
                </ul>
                <a href="javascript:uploadMultiImage('图片上传','#photos','photos-item-tpl');"
                   class="btn btn-sm btn-default">选择图片</a>
            </td>
        </tr>

        <tr>
            <th>附件</th>
            <td>
                <ul id="files" class="pic-list list-unstyled form-inline">
                    <notempty name="post.more.files">
                        <foreach name="post.more.files" item="vo">
                            <php>$file_url=cmf_get_file_download_url($vo['url']);</php>
                            <li id="saved-file{$key}">
                                <input id="file-{$key}" type="hidden" name="file_urls[]"
                                       value="{$vo.url}">
                                <input class="form-control" id="file-{$key}-name" type="text"
                                       name="file_names[]"
                                       value="{$vo.name}" style="width: 200px;" title="图片名称">
                                <a id="file-{$key}-preview" href="{$file_url}" target="_blank">下载</a>
                                <a href="javascript:uploadOne('文件上传','#file-{$key}','file');">替换</a>
                                <a href="javascript:(function(){$('#saved-file{$key}').remove();})();">移除</a>
                            </li>
                        </foreach>
                    </notempty>
                </ul>
                <a href="javascript:uploadMultiFile('附件上传','#files','files-item-tpl','file');"
                   class="btn btn-sm btn-default">选择文件</a>
            </td>
        </tr>

        <tr>
            <th>音频</th>
            <td class="form-inline">
                <input id="file-audio" class="form-control" type="text" name="post[more][audio]"
                       value="{$post.more.audio|default=''}" placeholder="请上传音频文件" style="width: 200px;">
                <notempty name="post.more.audio">
                    <a id="file-audio-preview" href="{:cmf_get_file_download_url($post.more.audio)}"
                       target="_blank">下载</a>
                </notempty>

                <a href="javascript:uploadOne('文件上传','#file-audio','audio');">上传</a>
            </td>
        </tr>

        <tr>
            <th>视频</th>
            <td class="form-inline">
                <input id="file-video" class="form-control" type="text" name="post[more][video]"
                       value="{$post.more.video|default=''}" placeholder="请上传视频文件" style="width: 200px;">
                <notempty name="post.more.video">
                    <a id="file-video-preview" href="{:cmf_get_file_download_url($post.more.video)}"
                       target="_blank">下载</a>
                </notempty>
                <a href="javascript:uploadOne('文件上传','#file-video','video');">上传</a>
            </td>
        </tr>



        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary js-ajax-submit">{:lang("SAVE")}</button>
            <a class="btn btn-default" href="__URL__">返回</a>
        </div>
    </form>

</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<!--编辑器的js开始-->
<script type="text/javascript">
    //编辑器路径定义
    var editorURL = GV.WEB_ROOT;
</script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
    $(function () {

        editorcontent = new baidu.editor.ui.Editor();
        editorcontent.render('content');
        try {
            editorcontent.sync();
        } catch (err) {
        }

        /*缩略图*/
        $('.btn-cancel-thumbnail').click(function () {
            $('#thumbnail-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
            $('#thumbnail').val('');
        });

    });
</script>

节节竹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ThinkCMF后台页面模板demo

index列表页面模板<include file="public@header"/></head><body><div class="wrap js-check-wrap">  <ul class="nav nav-tabs"> ...
复制链接

扫一扫