1

我喜欢像这样将highslide“加载”居中：

.highslide-loading {
  display: block;
  position:fixed;
  top:50%;
  left:50%;
  height:32px;
  width:32px;
  padding: 24px;
  margin:-40px 0 0 -40px;
  text-indent:-9999em;
  background:#FFFFFF url(img/hslide_loader_white.gif) 50% 50% no-repeat;
  -webkit-box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.75);
  box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

但是 highslide 脚本提供了这样的内联样式：

element.style {
  left: 134px;
  opacity: 0.9;
  position: absolute;
  top: -9999px;
  z-index: 1003;
}

我在旧的支持论坛中找到了这个帖子，它解释了如何访问加载对象：http ://highslide.com/forum/viewtopic.php?f=1&t=1796&p=7975

hs.Expander.prototype.onShowLoading = function (sender) {
   var width = sender.thumbWidth;
   sender.loading.style.width = width +'px';
};

这也适用于“位置”，但不适用于“顶部”或“左侧”

因为：

顶部和左侧的值是在 onShowLoading 事件之后设置的，因此事件处理程序无法编辑这些值。您可以编辑 highslide.js 文件本身来解决此问题。另一种方法是将 marginLeft 和 marginTop 设置为加载标签，并让 Highslide 做顶部和左侧。

但是 - 我对 highslide 脚本有不同的用法，需要保留 highslide.js 的代码库。边距对我没有帮助。

我确实制作了一个自定义配置脚本 - 但 hs.loading 无法访问。

if (typeof(hs) != "undefined") {

  $.extend(true, hs || {}, {

    dimmingOpacity:0.75,
    ...,
    loading: hs.createElement('a', {
            className: 'highslide-loading',
            title: hs.lang.loadingTitle,
            innerHTML: hs.lang.loadingText,
            href: 'javascript:;'
        }, {
            position: 'fixed',
            top: '50%',
            opacity: hs.loadingOpacity,
            zIndex: 1
        }, hs.container
    )

  });

}

同样在 hs.overrides ( http://highslide.com/ref/hs.overrides ) 中也无法访问加载程序

有没有办法让加载器在窗口中居中？

如果不是 - 我停止调查 ;-)

4

0 回答 0