jssor

Question

很棒 api，干净且易于使用。

问题，如何才能在标题栏中包含操作项？我想添加按钮，例如删除图片的功能等。

我尝试将滑块高度设置为 300，图像 @ 250 和标题 @50，但是在 slides 属性上使用 overflow: hidden，它隐藏了标题栏。

更新

RedactorPlugins._imageManager = function()
{
return {

    renderImages: function($el, payload)
    {
        var html = '';

        html += '<div id="slider-1-wrap" style="position: relative; top: 0px; left: 0px; margin: auto; width: 600px; height: 300px;">';
        html += '    <div u="slides" style="cursor: move; position: absolute; left: 0px; to; width: 600px; height: 300px; overflow:hidden;">';
        html += '        <div>';
        html += '            <img src="http://www.engraversnetwork.com/files/placeholder.jpg" style="position: absolute; top: 0px; left: 0px; width: 600px; height: 250px;" />';
        html += '            <div style="position: absolute; top: 250px; left: 0px; width: 600px; height: 50px;">';
        html += '                <span style="cursor:pointer;" id="test1">Slot #1</span>';
        html += '            </div>';
        html += '        </div>';
        html += '        <div>';
        html += '            <img src="http://www.engraversnetwork.com/files/placeholder.jpg" style="position: absolute; top: 0px; left: 0px; width: 600px; height: 250px;" />';
        html += '            <div style="position: absolute; top: 250px; left: 0px; width: 600px; height: 50px;">';
        html += '                <span style="cursor:pointer;" id="test2">Slot #2</span>';
        html += '            </div>';
        html += '        </div>';
        html += '    </div>';
        html += '</div>';

        $('#test1, #test2').click(function() {
            console.log('hai');
        });

        var options =  {};

        $el.append(html);

        var jssor_slider1 = new $JssorSlider$('slider-1-wrap', options);
    }, 
}}

当我点击 slot # 文本时，我不断收到此错误：Uncaught TypeError: elmt.getAttribute is not a function

Answer 1

请尝试以下代码。

<div u="slides" style="cursor: move; position: absolute; left: 0px; to; width: 600px; height: 300px; overfidden;">
    <div>
        <img src="url" style="position: absolute; top: 0px; left: 0px; width: 600px; height: 250px;" />
        <div style="position: absolute; top: 250px; left: 0px; width: 600px; height: 50px;">
            <!-- your caption content here -->
        </div>
    </div>
</div>

Answer 2

用 hack 修复了它:(

function Attribute(elmt, name, value) {

    // @HACK: Be careful when updating api...
    if (undefined === elmt.tagName) {

        elmt = CreateElement('DIV');

        $(elmt).attr('class', 'created');
    }

    if (value == undefined)
        return elmt.getAttribute(name);

    elmt.setAttribute(name, value);
}

jssor - 向标题添加操作按钮

jssor - Adding action buttons to a caption