Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >flask 鼠标进入时显示弹窗(flask 99)

flask 鼠标进入时显示弹窗(flask 99)

作者头像
用户5760343
发布于 2019-08-21 06:24:59
发布于 2019-08-21 06:24:59
1.1K00
代码可运行
举报
文章被收录于专栏:sktjsktj
运行总次数:0
代码可运行
bootstrap的popover组件

html

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <div class="col-md-8">
        {% if photos %}
            {% for photo in photos %}
                <div class="card mb-3 w-100 bg-light">
                    <div class="card-header">
                        <a class="dead-link" href="{{ url_for('user.index', username=photo.author.username) }}">
                            <img class="rounded img-fluid avatar-s profile-popover"
                                 data-href="{{ url_for('ajax.get_profile', user_id=photo.author.id) }}"
                                 src="{{ url_for('main.get_avatar', filename=photo.author.avatar_m) }}">
                        </a>
                        <a class="profile-popover trend-card-avatar"
                           data-href="{{ url_for('ajax.get_profile', user_id=photo.author.id) }}"
                           href="{{ url_for('user.index', username=photo.author.username) }}">{{ photo.author.name }}</a>
                        <span class="float-right">
            <small data-toggle="tooltip" data-placement="top" data-timestamp="{{ photo.timestamp }}"
                   data-delay="500">
                {{ moment(photo.timestamp).fromNow(refresh=True) }}</small></span>
                    </div>

js

$(function () { var default_error_message = 'Server error, please try again later.';

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader('X-CSRFToken', csrf_token);
        }
    }
});

$(document).ajaxError(function (event, request, settings) {
    var message = null;
    if (request.responseJSON && request.responseJSON.hasOwnProperty('message')) {
        message = request.responseJSON.message;
    } else if (request.responseText) {
        var IS_JSON = true;
        try {
            var data = JSON.parse(request.responseText);
        }
        catch (err) {
            IS_JSON = false;
        }
        if (IS_JSON && data !== undefined && data.hasOwnProperty('message')) {
            message = JSON.parse(request.responseText).message;
        } else {
            message = default_error_message;
        }
    } else {
        message = default_error_message;
    }
    toast(message, 'error');
});

var flash = null;

function toast(body, category) {
    clearTimeout(flash);
    var $toast = $('#toast');
    if (category === 'error') {
        $toast.css('background-color', 'red')
    } else {
        $toast.css('background-color', '#333')
    }
    $toast.text(body).fadeIn();
    flash = setTimeout(function () {
        $toast.fadeOut();
    }, 3000);
}

var hover_timer = null;

function show_profile_popover(e) {
    var $el = $(e.target);

    hover_timer = setTimeout(function () {
        hover_timer = null;
        $.ajax({
            type: 'GET',
            url: $el.data('href'),
            success: function (data) {
                $el.popover({
                    html: true,
                    content: data,
                    trigger: 'manual',
                    animation: false
                });
                $el.popover('show');
                $('.popover').on('mouseleave', function () {
                    setTimeout(function () {
                        $el.popover('hide');
                    }, 200);
                });
            }
        });
    }, 500);
}

function hide_profile_popover(e) {
    var $el = $(e.target);

    if (hover_timer) {
        clearTimeout(hover_timer);
        hover_timer = null;
    } else {
        setTimeout(function () {
            if (!$('.popover:hover').length) {
                $el.popover('hide');
            }
        }, 200);
    }
}

function update_followers_count(id) {
    var $el = $('#followers-count-' + id);
    $.ajax({
        type: 'GET',
        url: $el.data('href'),
        success: function (data) {
            $el.text(data.count);
        }
    });
}

function update_collectors_count(id) {
    $.ajax({
        type: 'GET',
        url: $('#collectors-count-' + id).data('href'),
        success: function (data) {
            console.log(data);
            $('#collectors-count-' + id).text(data.count);
        }
    });
}

function update_notifications_count() {
    var $el = $('#notification-badge');
    $.ajax({
        type: 'GET',
        url: $el.data('href'),
        success: function (data) {
            if (data.count === 0) {
                $('#notification-badge').hide();
            } else {
                $el.show();
                $el.text(data.count)
            }
        }
    });
}

function follow(e) {
    var $el = $(e.target);
    var id = $el.data('id');

    $.ajax({
        type: 'POST',
        url: $el.data('href'),
        success: function (data) {
            $el.prev().show();
            $el.hide();
            update_followers_count(id);
            toast(data.message);
        }
    });
}

function unfollow(e) {
    var $el = $(e.target);
    var id = $el.data('id');

    $.ajax({
        type: 'POST',
        url: $el.data('href'),
        success: function (data) {
            $el.next().show();
            $el.hide();
            update_followers_count(id);
            toast(data.message);
        }
    });
}

function collect(e) {
    var $el = $(e.target).data('href') ? $(e.target) : $(e.target).parent('.collect-btn');
    var id = $el.data('id');

    $.ajax({
        type: 'POST',
        url: $el.data('href'),
        success: function (data) {
            $el.prev().show();
            $el.hide();
            update_collectors_count(id);
            toast(data.message);
        }
    });
}

function uncollect(e) {
    var $el = $(e.target).data('href') ? $(e.target) : $(e.target).parent('.uncollect-btn');
    var id = $el.data('id');
    $.ajax({
        type: 'POST',
        url: $el.data('href'),
        success: function (data) {
            $el.next().show();
            $el.hide();
            update_collectors_count(id);
            toast(data.message);
        }
    });
}

$('.profile-popover').hover(show_profile_popover.bind(this), hide_profile_popover.bind(this));
$(document).on('click', '.follow-btn', follow.bind(this));
$(document).on('click', '.unfollow-btn', unfollow.bind(this));
$(document).on('click', '.collect-btn', collect.bind(this));
$(document).on('click', '.uncollect-btn', uncollect.bind(this));

// hide or show tag edit form
$('#tag-btn').click(function () {
    $('#tags').hide();
    $('#tag-form').show();
});
$('#cancel-tag').click(function () {
    $('#tag-form').hide();
    $('#tags').show();
});
// hide or show description edit form
$('#description-btn').click(function () {
    $('#description').hide();
    $('#description-form').show();
});
$('#cancel-description').click(function () {
    $('#description-form').hide();
    $('#description').show();
});
// delete confirm modal
$('#confirm-delete').on('show.bs.modal', function (e) {
    $('.delete-form').attr('action', $(e.relatedTarget).data('href'));
});

if (is_authenticated) {
    setInterval(update_notifications_count, 30000);
}

$("[data-toggle='tooltip']").tooltip({title: moment($(this).data('timestamp')).format('lll')})

});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.08.14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
如何使用 S3CMD 访问 COS 服务
作者简介 吴硕卫:腾讯云技术支持工程师,现负责腾讯云存储产品的技术支持专项工作。 S3cmd 是免费的命令行工具和客户端,用于在 Amazon S3 和其他兼容 S3 协议的对象存储中上传、下载和管理数据。本文主要介绍如何使用 S3cmd 访问 COS 上的文件。 准备工作 您已注册腾讯云账号,并且从访问管理控制台上获取了腾讯云密钥 SecretID 与 SecretKey。 一、使用环境 1、软件依赖 Python 2.6+/3+ 最新版本的 pip 2、安装及配置 环境安装与配置详细操作请参见 P
云存储
2020/07/31
2.3K0
如何在CVM实例中访问对象存储
对象存储服务与客户的VPC打通,需要客户先确认在哪个子网中使用。由腾讯云工程师进行网络配置,会在客户指定的子网中配置一个vip并与对象存储打通并映射。
本地专用集群CDC
2023/04/21
3.8K0
COS SDK有Flutter和React Native版本啦
对象存储COS简介 对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储和查看数据。腾讯云 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。 COS 通过控制台、API、SDK 和工具等多样化方式简单、快速地接入,实现了海量数据存储和管理。通过 COS 可以进行任意格式文件的上传、下载和管理。腾讯云提供了直观的 Web 管理界面,同时遍布全国范围的 CDN 节点可以对文件下载进行加速。 导语 Flu
云存储
2023/05/18
8890
COS SDK有Flutter和React Native版本啦
COS JavaSDK V4升级到V5版本
如果您细心对比过 JSON Java SDK 和 XML Java SDK 的文档,您会发现并不是一个简单的增量更新。XML Java SDK 在架构、可用性和安全性上有了非常大的提升,而且在易用性、健壮性和性能上也做了非常大的改进。如果您想要升级到 XML Java SDK,请参考下面的指引,完成 Java SDK 的升级工作。
卓恒
2020/12/29
1.8K0
s3cmd常用命令
1、配置s3cmd s3cmd --configure 2、列举所有buckets(bucket相当于根文件夹) 命令:s3cmd ls root@node4:/home# s3cmd ls 2016-09-18 03:51  s3://my-bucket 2016-09-18 02:02  s3://my-new-bucket-node4 2016-09-18 07:17  s3://zhangbo 3、创建bucket(bucket名称唯一,不能重复) 命令:s3cmd mb s3://{$BUCKET
py3study
2020/01/08
2.6K0
S3命令行工具:s3cmd与s5cmd的实用指南
本文主要记录的是两个 S3 服务的命令行工具,也就是 s3cmd 和 s5cmd;
MinChess
2024/11/13
1.3K0
S3命令行工具:s3cmd与s5cmd的实用指南
VMWARE 虚拟机导入腾讯云-离线迁移篇
对待迁移的虚拟机进行准备,包括检查并安装Virtio 驱动、安装 cloud-init。
本地专用集群CDC
2023/04/13
3.1K0
radowsgw 配置 s3cmd
http://www.lai18.com/content/6968965.html
py3study
2020/01/07
6150
【玩转腾讯云】使用 COSFS 挂载 COS 到云服务器节约空间
本文将介绍使用 COSFS 工具 将 WordPress/NextCloud 的文件目录挂载到 COS 存储桶的方法,以达到节约服务器硬盘空间的目的。
我是技术小白
2020/04/15
7.4K0
轻量对象存储,轻松上手应对各类文件管理
轻量对象存储(LighthouseCOS)是腾讯云专为中小企业开发者打造的易用、稳定、灵活扩展的轻量级数据存储服务,适用于云端网站、小程序、课堂演示、云盘/图床等场景下的数据存储和处理任务。轻量对象存储无目录层次结构、无数据格式限制,开箱即用、计费简单,为用户提供简单易用、高性价比的轻量存储体验。
用户10502126
2024/01/16
3970
轻量对象存储,轻松上手应对各类文件管理
使用腾讯云COS官方工具快速将本地数据迁移至COS
腾讯云COS提供了多种同步迁移工具,如COSCMD、COS Migration和COSBrowser客户端等
沈唁
2020/06/12
3.6K0
使用腾讯云COS官方工具快速将本地数据迁移至COS
在兼容亚马逊S3的第三方应用中使用COS的通用配置
Amazon Simple Storage Service(Amazon S3,下文简称 S3)是 AWS 最早推出的云服务之一,经过多年的发展,S3 协议在对象存储行业事实上已经成为标准。腾讯云对象存储 COS(下文简称 COS)提供了兼容 S3 的实现方案,因此您可以在大部分兼容 S3 应用中直接使用 COS 服务。本文将重点介绍如何将此类应用配置为使用 COS 服务。
云存储
2020/04/03
3.3K0
在兼容亚马逊S3的第三方应用中使用COS的通用配置
如何将本地数迁移至腾讯云之一工具篇 - COS Migration
COS Migration 是一个集成了 COS 数据迁移功能的一体化工具。通过简单的配置操作,用户可以将源地址数据快速迁移至 COS 中,它具有以下特点:
云存储
2019/11/28
2.2K0
如何将本地数迁移至腾讯云之一工具篇 - COS Migration
s3cmd安装与使用
一、安装  1.下载安装包。  这里我们使用s3cmd-1.0.0.tar.gz安装包  2.解压安装包  tar xzvf s3cmd-1.0.0.tar.gz  3.移动路径  mv s3cmd-1.0.0 /usr/local/s3cmd  4.创建软链接  ln -s /usr/local/s3cmd/s3cmd /usr/bin/s3cmd  5.执行配置命令(按提示输入相应密码等)  s3cmd --configure  注:执行该命令后,会生成~/.s3cfg配置文件。  6.编辑配置文件,修改以下几个参数。  vi ~/.s3cfg  [default]  access_key = xxx  secret_key = xxx  host_base = xxx.xxx.xxx  host_bucket = %(bucket)s.xxx.xxx.xxx
py3study
2020/01/07
4K0
php-sdk-腾讯云文字盲水印添加/提取
SDK文档链接:https://cloud.tencent.com/document/product/436/55584
phper-lee
2021/12/14
2.1K0
使用 COSFS 挂载 COS 到云服务器节约空间
作者介绍 我是技术小白:机械电子工程专业大四学生,业余时间喜欢折腾。 本文将介绍使用 COSFS 工具将 WordPress/NextCloud 的文件目录挂载到 COS 存储桶的方法,以达到节约服务器硬盘空间的目的。 Wordpress 的数据存放在安装目录下的 wp-content/uploads 文件夹,Nextcloud 的数据存放在安装目录下的 data 文件夹,里面存储着网站的媒体文件,占据的磁盘空间特别大。 为了节省磁盘空间,就将腾讯云对象存储(COS)挂载到他们的数据目录下,存储数据
云存储
2020/07/10
4.6K0
使用腾讯云CVM挂载COS作为Emby媒体服务器
多款腾讯云产品免费体验:https://cloud.tencent.com/act/free?from=20863 最近收集了一些4k杜比视界的资源,于是想搭建自己的媒体服务器,考虑到NAS维护麻烦、
4O4
2023/07/05
1.3K0
使用腾讯云CVM挂载COS作为Emby媒体服务器
腾讯云COS C++ SDK使用记录
目前有将服务器指定文件上传的需求, 手头正好有免费的COS资源使用, 于是使用COS作为存储工具
code-x
2022/08/21
8.5K1
腾讯云 cos Go SDK使用学习
参考资料 官方文档 官方示例 基本概念 Bucket(存储桶) 命名上,由存储桶名称(BucketName)和APPID两部分组成,中间以"-“相连,例如examplebucket-1250000000 存储桶具有着地域(region),对象存储允许用户在不同的地域上创建存储桶。 Object(对象) 存储桶上存储的内容称为对象,对象是对象存储(Cloud Object Storage, cos)的基本单元,包括对象键、对象值和对象元数据 对象键是对象在存储桶中的唯一标识,可以通俗理解为文件路径。 对象值
千灵域
2022/06/17
18.2K1
s3cmd命令_cmd常用命令详解
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/01
1.9K0
相关推荐
如何使用 S3CMD 访问 COS 服务
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验