webuiPopover的使用

最新推荐文章于 2024-11-08 11:23:10 发布

原创最新推荐文章于 2024-11-08 11:23:10 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

自用插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了webui-popover的使用方法，包括通过jQuery进行传统引入的方式，并提供了示例页面链接。在实际使用中，可能遇到显示后再次显示时，webui-popover-content高度增加18px的问题，需要注意处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://github.com/sandywalker/webui-popover

示例页

如是使用jquery，老式的引入方式

<link rel="stylesheet" href="/loft-desktop/webui-pop/webui-pop.min.css">

<script type="text/javascript" src="/loft-desktop/webui-pop/webui-pop.min.js"></script>

npm之类的引入请见上部链接

使用实例：

$("#id").webuiPopover(
                        {
                            title:popTitle,//标题
                            cache:true,
                            container: document.body,
                            content: contentStr,//内容
                            animation:'pop',
                            placement:'right-top',
                            trigger:'manual',//手动显示隐藏的形式
                            width: 400,
                            height: 240
                    });

显示（因为在显示之后再次显示，webui-popover-content的height会莫名其妙的增加18px，导致处理麻烦）

/* 详情的pop窗 */
$("#").off("click", '.').on("click", '.', function (e) {
    e.stopPropagation();

    let rowid = $(this).closest("tr.jqgrow").attr("id");
    let data = $('#').grid('getRowData', rowid);

    if(context.options.popIdName == "#applyContent_"+rowid){
        $("#applyContent_"+rowid).webuiPopover('hide');
        context.options.popIdName = '';
    }else{
        context.options.popIdName = "#applyContent_"+rowid;
        $("#applyContent_"+rowid).webuiPopover('show');//显示

        let idStr = '#webuiPopover' + (Number(rowid.split('jqg')[1]) - 1);
        if(!context.options.flagObj[rowid]){
            if(context.options.count == 0){
                $(idStr+' .webui-popover-content').css('height',(Number($(".webui-popover-content").css('height').split('px')[0]) + 18)+'px');
            }else{
                $(idStr+' .webui-popover-content').css('height',(Number($(".webui-popover-content").css('height').split('px')[0]) + 0)+'px'); 
            }
            context.options.count++;   
            context.options.flagObj[rowid] = true;
        }else{
            $(idStr).css('top',(Number($(idStr).css('top').split('px')[0]) + 18)+'px');
            $(idStr+">.arrow").css('top',(Number($(idStr+">.arrow").css('top').split('px')[0]) - 18)+'px');
        }
    }  
});

隐藏

//点击其他区域则关闭pop
$(document).on("click",function(e){
    var selected = e.target || e.srcElement;

    let $item = $(e.target);
    let parents = $item.parents('.webui-popover');//找寻含有class为webui-popover的父元素,结果为集合
    
    if(parents.length == 0){
        $(context.options.popIdName).webuiPopover('hide');
        context.options.popIdName = '';
    }
});