我遇到了一个问题,试图在我的页面上运行一个"加载微调器",该表在一个表被分类时运行,特别是对于较慢的客户端,因为对页面进行排序可能需要10秒钟.我可以看到使用微调器代码修改DOM,但是它不会显示.我希望在排序发生之前我可以做些什么来强制显示微调器,当然也可以在排序完成时停止它.
我的排序基于'sorttable.js',我已经修改它来处理表的第一列的二级排序(其中包含名称).
我的微调器使用'spin.js'.
我仍然是这个jQuery东西的新手,而且这个可排序的代码非常复杂.我突出显示了下面的部分,但我的完整修改后的可排序代码(现在)可以在'sorttable-TESTING-ONLY.js'找到, 并在'TESTING-ONLY-sort_and_spin.htm'上有一个测试html页面.
因此,脚本在页面加载时设置一些函数("......"表示跳过行):
makeSortable: function(table) { //line 75
......
headrow = table.tHead.rows[0].cells;
for (var i=0; i<headrow.length; i++) { //line 114
.....
headrow[i].sorttable_sortfunction = sorttable.guessType(table,i); //line 126
// code to start/stop spinner
headrow[i].sorttable_spinner = (function(val) { //line 136
return function(val) {
var $this = $(this),
data = $this.data();
if (data.spinner) {
data.spinner.stop();
delete data.spinner;
}
if (val > 0) {
var opts = {
.......
};
data.spinner = new Spinner($.extend({color: …我有以下简单的标记和样式(请参阅JSFiddle):
HTML:
<div id="wrapper"><div id="content"></div></div>
CSS:
#content {
background-color:lightyellow;
height:200px;
color:green;
}
#wrapper{
border:1px solid black;
color:red;
}
我正在#content div使用Vanilla JS和jQuery选项设置微调器目标,我遇到了一些问题.首先,在这两种情况下,微调器似乎不是在目标元素的父元素的中间构造的,与文档所说的相反:
定位
从版本2.0.0开始,微调器绝对位于其偏移父级的50%.您可以指定顶部和左侧选项以手动定位微调器.
其次,使用Vanilla JS时,微调器不会使用目标上的颜色集.当使用jQuery启动时,它确实(即#content它使用绿色).
我理解文档错了吗？如果是这样,我如何将微调器置于特定元素内？如果没有,为什么上面的片段不在目标内？
刚刚找到spin.js,它似乎是一个救生员.
问题是如何将微调器插入我的div？
我有一个跟随按钮,单击时我删除背景图像,目前替换为loader.gif.
我怎么能用spin.js做同样的事情？
我敲了一个jsfiddle的简单例子:
我想旋转器在红色方格内.
<div id="foo"></div>
<button id="spin"> Spin! </button>
var opts = {
lines: 13, // The number of lines to draw
length: 17, // The length of each line
width: 8, // The line thickness
radius: 21, // 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, …我正在尝试使用spin.js库来显示加载动画.但是,关闭spin.js开发人员示例我似乎无法让它工作/出现; 当我在Firefox中打开我的html文件时,空div标签显而易见.
这是我的代码(spinnertest.html):
<html>
<head>
<script src="spin.min.js">
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render …我正在尝试从客户端使用spin.js（https://spin.js.org/#！），但是我有一些问题。
在做
npm install spin.js
然后
const Spinner = require('spin.js');
无法使用，因为您需要浏览该模块才能使用客户端中的模块。
我也尝试过复制并过去spin.js（https://spin.js.org/spin.js）并从html引用它，但是它给了我spin.js错误
export { Spinner };
如
Uncaught SyntaxError: Unexpected token export
从客户端使用spin.js需要什么？