Jquery Gritter设置位置

Jquery Gritter set position

本文关键字：位置 设置 Gritter Jquery      更新时间：2023-09-26

是否可以更改gritter的可能性？或者更好地将它绑定到诸如span或div之类的元素？

我试过了：

        $.gritter.add({
            title: 'Dashboard',
            text: 'Field updated!',
            time: 2000,
            position: 'center'
       });

（也尝试使用底部、顶部等），但位置保持不变

通过阅读文档，您似乎无法像这样将砂砾居中，只有"左下"、"右下"、‘左上’、‘右上’

$.extend($.gritter.options, { 
    position: 'bottom-left', // defaults to 'top-right' but can be 'bottom-left', 'bottom-right', 'top-left', 'top-right' (added in 1.7.1)
    fade_in_speed: 'medium', // how fast notifications fade in (string or int)
    fade_out_speed: 2000, // how fast the notices fade out
    time: 6000 // hang on the screen for...
});

如果你用css改变位置怎么办？

您可以尝试。。。

//css

.gritter-center{
position:fixed;
left:33%;
right:33%;
top:33%
}

//Javascript

$.gritter.add({
 title: 'This is a centered notification',
 text: 'Just add a "gritter-center" class_name to your $.gritter.add or globally to   $.gritter.options.class_name',
 class_name: 'gritter-info gritter-center'  
});

将自定义类"center"添加到特定的css文件中

#gritter-notice-wrapper.center {
    position:fixed; 
    left:33%; 
    right:33%; 
    top:33%;
}

调整css参数以调整砂砾通知位置

  • 对jquery.gritter.js进行变通（int添加函数…）

更换线路

position = $.gritter.options.position,

带有

position = params.position || $.gritter.options.position,

最后调用您的添加砂砾函数

$.gritter.add({
            title: 'Dashboard',
            text: 'Field updated!',
            time: 2000,
            position: 'center'
       });

通过css更改位置，如左侧和顶部位置：

$("#gritter").css('left',"100px");
$("#gritter").css('top',"20px");

我建议如下，而不是做33%，这将使砂砾接近中心，但几乎总是稍微偏离。如果您将砂砾机定制为不同的/非固定的宽度，这也应该有效。

#gritter-notice-wrapper.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

然后，（正如bech所提到的）允许按照最初的请求配置位置，而不是只在js文件中的选项中：

在jquery.gritter.js中，替换

position = $.gritter.options.position,

带有

position = params.position || $.gritter.options.position,
相关文章：