Question

我正在使用网络音频在浏览器中处理类似合成器的程序。这可能听起来很愚蠢，但是当点击它时我似乎无法通过按钮创建旋钮。我尝试用几种不同的方式设置旋钮，包括在旋钮属性中添加data-前缀，但我似乎无法得到它。我目前设置它的方式是：

    $(document).ready(function() 
    {
        var add_osc = $('li#add_osc');
        var osc;
        var add_dest = $('li#add_dest');
        var dest;
        var add_fx = $('li#add_fx');
        var fx = $('.fx');
        //left side menu
        $('#simple-menu').sidr();
        //hide sound fx in menu
        $(".fx").hide();
        //general purpose knob <----- **PROBLEM CODE** -----!
        add_osc.click(function()
            {
                var input = $('document').createElement("input");
                input.type = "text";
                input.addClass('dial');
                $(".dial").knob();
                input.min = 0;
                input.max = 100;
                input.displayPrevious = true;
                input.lineCap = "round";
                input.width = 100;
                input.value = 0;
                $("body").append(input);
            });
        //toggle fx list
        add_fx.click(function() 
            {
                fx.toggle();
            });
    });

任何帮助表示赞赏！

Answer 1

您必须设置所需的插件data-attribute，然后在新创建和附加的元素上执行插件。

代码：

$(document).ready(function () {
    var add_osc = $('li#add_osc');
    var osc;
    var add_dest = $('li#add_dest');
    var dest;
    var add_fx = $('li#add_fx');
    var fx = $('.fx');

    //hide sound fx in menu
    $(".fx").hide();
    //general purpose knob <----- **PROBLEM CODE** -----!
    add_osc.click(function () {
        var $input=$("<input type='text'>")
        $input.addClass('dial');
        $input.attr('data-min', 0);
        $input.attr('data-max', 100);       
        $input.attr('data-displayPrevious', true);
        $input.attr('data-lineCap', 'round');
        $input.attr('data-width', 100);
        $input.val(0);
        $("body").append($input);
        $input.knob();
    });
    //toggle fx list
    add_fx.click(function () {
        fx.toggle();
    });
});

演示：http://jsfiddle.net/hD8LK/

从Slidr菜单动态创建Jquery旋钮

1 个答案: