Flask实战第50天:cms添加轮播图的模态对话框制作

编辑cms_banners.html, 在{% block main_content%}中加上表给内容如下

{% block main_content %}
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>图片链接</th>
                    <th>跳转链接</th>
                    <th>优先级</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>11</td>
                    <td><a href="#" target="_blank">测试数据</a></td>
                    <td><a href="#" target="_blank">测试数据</a></td>
                    <td>测试数据</td>
                    <td>测试数据</td>
                    <td>
                        <button class="btn btn-default btn-xs edit-banner-btn">编辑</button>
                        <button class="btn btn-danger btn-xs delete-banner-btn">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
{% endblock %}

{% block main_content %}

然后我们需要在表格上面添加一个"添加轮播图"按钮

{% block head %}
    <style>
        .top-box button{
            float: right;
        }

        .top-box{
            overflow: hidden;
            background: #ecedf0;
            padding: 10px;
        }
    </style>
{% endblock %}

{% block main_content %}
    <div class="top-box">
       <button class="btn btn-warning">添加轮播图</button>
    </div>
        ...
{% endblock %}

..

原文地址:https://www.cnblogs.com/sellsa/p/9545261.html

时间: 2024-11-10 06:17:32

Flask实战第50天:cms添加轮播图的模态对话框制作的相关文章

Flask实战第53天:cms编辑轮播图功能完成

后端逻辑 表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可 编辑cmd.forms.py class UpdateBannerForm(AddBannerForm): banner_id = IntegerField(validators=[InputRequired(message='请输入轮播图的id!')]) 视图,编辑cms.views.py ... from .forms import UpdateBannerForm @bp

Flask实战第54天:cms删除轮播图功能完成

后台逻辑 编辑cms.views.py @bp.route('/dbanner/',methods=['POST']) @login_required def dbanner(): banner_id = request.form.get('banner_id') if not banner_id: return xjson.json_param_error(message='请传入轮播图id!') banner = BannerModel.query.get(banner_id) if not

一百二十七:CMS系统之添加轮播图前后台逻辑

后台逻辑 模型 from exts import dbfrom datetime import datetime class BannerModel(db.Model): __tablename__ = 'banner' id = db.Column(db.Integer, primary_key=True, autoincrement=True) name = db.Column(db.String(255), nullable=False, comment='banner名') image_

JavaScript实战项目:移动端 Touch 轮播图

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"

Flask实战第48天:首页轮播图实现

首页的布局如下 因为以后所有的内容都是在main-container里面,所以这里我们修改front_base.html,把{% block body%}{% endblock%}放到里面去 <div class="main-container"> {% block body %}{% endblock %} </div> 创建static/front/css/front_base.css, 并且在front_base.html中引入它 .main-contai

NodeJS Express博客项目实战 之 轮播图管理

轮播图管理添加功能 后台轮播图管理的位置: 因此需在此处加一个路由的跳转: 在视图views中后台的index.html <h2><span class="icon-user"></span>系统管理</h2> <ul > <li><a href="/admin/slider" target="right"><span class="icon-ca

AngularJS:实现轮播图效果

要实现这个功能,可以https://github.com/sroze/ngInfiniteScroll这个第三方控件实现的.实现步骤如下: 1. 下载ng-infinite-scroll.js程序http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(

Swift3.0 轮播图

使用三个UIButton实现无限轮播:https://github.com/LXfeiYu/LXCarouselImages.git 喜欢的朋友给个星!!! 功能: 1.可以选择开启和关闭定时器 2.有点击事件 使用方法: //添加轮播图 let showView = LXShowView.init(frame: CGRect(x:0,y:20,width:self.view.frame.size.width,height:200)) showView.isUserInteractionEnab

一百三十二:CMS系统之前端动态获取后台添加的轮播图

先准备几张轮播图 排序顺序改为根据优先级倒序排 前端首页接口 @bp.route('/')def index(): banners = BannerModel.query.order_by(BannerModel.priority.desc()).limit(4) # 只取4条 context = {'banners': banners} return render_template('front/front_index.html', **context) 在首页模板中动态渲染轮播图 {% fo