javascript Jquery Gritter 设置位置

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18461530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 12:01:18  来源:igfitidea点击:

Jquery Gritter set position

javascriptjquerygritter

提问by Marc Rasmussen

is it possible to change the possition of gritter? Or even better bind it to an element such as a span or a div?

可以改变位置gritter吗?或者甚至更好地将它绑定到一个元素,例如 span 或 div?

Ive tried:

我试过了:

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

(also tried with buttom, top ect) but the position remain unchanged

(也尝试过buttom,top ect)但位置保持不变

采纳答案by jainvikram444

Change position by css like left and top position:

通过 css 更改位置,如左侧和顶部位置:

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

回答by Bonbelo

By reading the documentation, it seems you can't centered the gritter like this, only ths'bottom-left', 'bottom-right', 'top-left', 'top-right'

通过阅读文档,您似乎无法像这样将 gritter 居中,只有“左下”、“右下”、“左上”、“右上”

$.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...
});

What if you change the position with css ?

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

回答by vIrex

You can try...

你可以试试...

//css

//css

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

//Javascript

//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'  
});

回答by Bech_Med

Add a custom class 'center' into your specific css file

将自定义类“中心”添加到您的特定 css 文件中

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

Tweak css params to adjust the gritter notification position.

调整 css 参数以调整 gritter 通知位置。

  • Make a work-around into jquery.gritter.js (int the add function...)
  • 对 jquery.gritter.js 进行变通(在 add 函数中...)

Replace the line

更换线路

position = $.gritter.options.position,

with

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

Finally call your add gritter function

最后调用你的 add gritter 函数

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

回答by mike

instead of doing 33%, which will position the gritter near center but almost always slightly off, I would suggest the following. This should work if you customize the gritter to a different/non fixed width as well.

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

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

then, (as mentioned by bech) to allow the position to be configurable as originally requested, instead of only in the options in the js file:

然后,(如 bech 提到的)允许根据最初的要求配置位置,而不是仅在 js 文件中的选项中:

in jquery.gritter.js, replace

在 jquery.gritter.js 中,替换

position = $.gritter.options.position,

with

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