[英]Make spin.js spinner's position relative to the target div
currently the jQuery spin.js spinner has options to position it. 当前,jQuery spin.js微调器具有定位它的选项。
I have used the following config before: 我之前使用过以下配置:
// set up spin.js vars
var opts = {
lines: 13, // The number of lines to draw
length: 5, // The length of each line
width: 2, // The line thickness
radius:5, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 58, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#fff', // #rgb or #rrggbb or array of colors
speed: 0.9, // Rounds per second
trail: 100, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'mySpinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
// show a spinner in place of the icon
var target = document.getElementById('testdiv');
var spinner = new Spinner(opts).spin(target);
$(target).data('mySpinner', spinner);
However the position shows its relative to its parent. 但是,该位置显示了其相对于其父对象的位置。
So currently the structure of: 因此,目前的结构为:
<div id="container">
<div id="testdiv">
</div>
<div>
The spinner will get centered in the containing div and not the targetted div. 微调框将位于包含div而不是目标div的中心。 Is there a way around this? 有没有解决的办法?
If you're still looking for a solution, I guess you can use position: relative
to make it work, like this: 如果您仍在寻找解决方案,我想您可以使用position: relative
使它起作用,如下所示:
.mySpinner {
position: relative !important;
}
This way the spinner will be centered in your testdiv
. 这样,微调器将位于testdiv
中心。 Here's a working JsFiddle . 这是工作的JsFiddle 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.