Question

有没有办法将YUI 3 Slider widget设为100% width？在documentatiotn中，length属性设置在px中。我尝试使用%，但没有工作。

YUI().use('slider', function (Y) {
    var interval;
    var slider = new Y.Slider({
        min         : 0,
        max         : 3000,
        value       : 3000,
        length  : '100%'
    });
});

我的网站是响应式的，我的目标是在所有媒体查询断点中仅使用1个滑块。

Answer 1

如果您更改slider长度，则界面将为updated automatically。

这意味着您可以在创建时设置长度，然后在调整窗口大小时更改它：

length  : Y.one('.slider-parent').getComputedStyle('width');

添加事件调整大小模块：

YUI().use('slider', 'event-resize' …

调整逻辑大小：

Y.on('windowresize', function () { 
    slider.set('length', Y.one('.slider-parent').getComputedStyle('width'));
});

如何做YUI 3 Slider小部件为100％宽度

1 个答案: