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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小程序webview组件,小程序内联h5页面,webview实现微信支付
先说下实现原理吧,实现原理就是我们在webview的h5页面里实现下单功能,然后点击支付按钮,我们点击支付按钮的时候会跳转到小程序页面,把订单号,订单总金额,传递到小程序里,然后小程序里使用订单号和订单金额去调起微信支付,实现付款,付款成功或者失败时都会有回调。我们再把对应的回调传递给webview,刷新webview里的订单和支付状态。
编程小石头
2019/08/15
4.7K0
小程序webview组件,小程序内联h5页面,webview实现微信支付
小程序打开h5页面,并实现H5与小程序的通信
web-view组件是承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。
拿我格子衫来
2022/01/24
2.9K0
uniapp 在app和小程序端使用webview进行数据交互
结论:app端支持比较好可以做到实时传递,微信小程序支持比较差,小程序向url传参只能通过url,url向app传参需要特定时机(后退、组件销毁、分享、复制链接)触发才能收到消息。
风花一世月
2024/03/19
7830
小程序开发总结03 - 数据传递与缓存
和H5不同,元素上绑定事件只能传入事件名,不能直接传参,需用通过dataset传参
CS逍遥剑仙
2018/06/23
1.3K0
小程序开发总结03 - 数据传递与缓存
小程序内嵌webview实现支付
在webview中不能支付,那只能把webview嵌入h5页面的支付挪到小程序中,也就是把支付时的参数传给小程序,小程序调起原生支付,这里面有两种情况,一种是同一主体的,另外一种是非同主体。
青年码农
2022/05/31
4.5K0
小程序内嵌webview实现支付
微信小程序 web-view 开发踩坑大全
如果要在小程序中使用 web-view 组件,则首先需要开发者账号不仅是该小程序的开发者而且还有网页开发权限,这需要在该小程序关联的公众号里面绑定开发者账号为开发者。不然在开发工具里面会弹窗提示没有网页开发权限。提示如下:
极乐君
2019/08/02
4.6K0
微信小程序 web-view 开发踩坑大全
【愚公系列】2022年09月 微信小程序-webview内嵌网页的授权认证
随着微信小程序的广泛应用,小程序的用户越来越多,但受其小程序体积限制的影响,不能够完全满足用户的要求,应运而生的web-view组件很好的解决的这一问题。
愚公搬代码
2022/09/28
9080
【愚公系列】2022年09月 微信小程序-webview内嵌网页的授权认证
『uni-app』web-view 大量数据通信
该组件是一个浏览器组件,可以承载网页的内容。而且该组件是全屏的,会覆盖该组件之外的其他内容。
德育处主任
2022/09/23
1.2K0
『uni-app』web-view 大量数据通信
微信小程序之内嵌网页(webview)
微信小程序提供了新的开放能力!它终于开放了在小程序中内嵌HTML页面的功能!从微信小程序基础库1.6.4开始,我们就可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了。在这之前,我们在小程序中没有办法整合我们已有的HTML程序(比如HTML5文章系统,商城系统等),只能使用小程序的方式重新开发一套,现在有了<web-view>就可以方便的集成这些网页系统,为我们减少了可观的工作量。
一斤代码
2018/08/21
11.3K0
微信小程序之内嵌网页(webview)
『教程』微信小程序webview的使用
小程序 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。 关于如何注册配置就不多言了,本文主要还是体验了下web-view的功能。 web-view详解 有了这个组件之后,小程序可以很好的嵌入一些页面,可以环境小程序size告急的问题,同样也使开发更加便捷,毕竟小程序开发者基本都对前端开发较为了解。 web-view能力 说再多还是需要去看官方文档,web-view文档, 兼容 首先就需要注意:兼
极乐君
2018/02/05
5.3K0
微信小程序设置web-view的业务域名
登录官方小程序后台,选择设置,选择开发设置,中间有个业务域名,添加业务域名后,小程序才能调用组件打开限定域名内的网页.
达达前端
2019/07/03
8.3K0
微信小程序设置web-view的业务域名
微信小程序和web之间的交互
通常我们写了一套自适应的 web 程序,想在多种环境中使用.比如 app 里,微信小程序里,各种 app 分享中, 假如只是能使用 app 浏览,问题不大,但是要在被嵌入 app 里面和 app 本身交互,就要做各种折腾, 如是就有了本文.
chuchur
2022/10/25
1.4K0
微信小程序webview保存图片
在小程序的 webview 里保存图片. 因为微信的 js-sdk 没有提供 saveImageToPhotosAlbum 方法
chuchur
2022/10/25
3.5K0
小程序-实现怎么跳转打开 H5 网页链接(或跳转至公众号文章)
背景 有时候,因为业务需求,在小程序当中,需要跳转到 h5 网页,或跳转到公众号,形成流量的闭环,那在小程序当中怎么实现呢? 实例效果 (小程序跳转到公众号) (小程序跳转到h5网页) 小程序实现跳
itclanCoder
2020/10/28
24.6K0
小程序-实现怎么跳转打开 H5 网页链接(或跳转至公众号文章)
小程序支持跳转网页会带来什么影响
11月2日,iphone X 发售的前一晚,微信小程序发布了一个重量级的更新: 小程序内嵌网页能力开发 使用教程很简单: 到mp.weixin.qq.com登录小程序号,并进入“设置”-“开发设置”-
花叔
2018/04/18
2.4K0
小程序支持跳转网页会带来什么影响
微信小程序调起H5页面支付的全流程解析与实战
咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE相关知识点了,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~
bug菌
2024/12/30
1.3K1
微信小程序调起H5页面支付的全流程解析与实战
【uniapp】H5向uniapp通信存储数据——H5如何传递数据到uniapp方法的解决方案
最近在做H5号码认证无感登录,发现市场上的H5登录文档不健全,没有适合uniapp的,综合对比了多家,找了一家个推的接入,由于SDK、demo都是H5,精力有限,于是打算通过H5完成认证,通过回调数据发送给Uniapp进行验证
德宏大魔王
2024/05/25
4510
【uniapp】H5向uniapp通信存储数据——H5如何传递数据到uniapp方法的解决方案
webview调用小程序支付流程
最近在做一个叫资源树的小型商城项目,其中有一个场景需要在小程序中嵌入的web-view内向小程序发起支付请求完成支付,折腾了一天,在网上各种经验的帮助下总算搞定了,现在记录一下流程
lestat
2018/09/21
3.2K0
webview调用小程序支付流程
关于 uni-app 使用 web-view 页面之间互相跳转、通信等问题的解决方案
最近开发小程序的时候、需要嵌入一个第三方网站、并且和第三方网站有些交互。这个第三方页面本身就是一个 HTML 页面、想着把它给嵌入到 uni-app 中,结果没实现......(很多的 js 代码在小程序中不识别)。
hedeqiang
2019/12/17
12.6K0
【微信小程序】---- CustomBar 公用组件封装
1. WXML 代码 公用 CustomBar 盒子,此处可以设置公用的背景/字体颜色和字体大小; CustomBar 具体内容,按照胶囊右边距设置 CustomBar 盒子的左右 margin,设置盒子的高度; 右侧胶囊占位,左侧动态根据 title 判断展示 slot 还是直接显示 title; 除去 CustomBar 的展示数据,其他的 slot ! <view class="rui-head-content" style="background: url({{bannerBgIcon}}) no-
Rattenking
2022/01/06
3.1K0
【微信小程序】---- CustomBar 公用组件封装
推荐阅读
相关推荐
小程序webview组件,小程序内联h5页面,webview实现微信支付
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验