动态插入的 JQuery Mobile 滑块 [英] JQuery Mobile sliders inserted dynamically

问题描述

我正在动态插入滑块.问题是当我动态插入它们时，它们没有 jquerymobile 的主题.这是我使用的代码:

I'm inserting sliders dynamically. The problem it's that when I insert them dynamically they don't have the theme of jquerymobile. Here's the code i use:

for (var i = array_colors_available.length - 1; i >= 0; i--) {
        $('#insert_colors_slider').append('<div data-role="fieldcontain" ><fieldset data-role="controlgroup"> <label for="slider-8">'+array_colors_available[i]+' : '+'</label><input id=slider-'+i+' type="range" name='+array_colors_available[i]+' value="0" min="0" max="25" data-highlight="true" data-theme=c data-track-theme="f"></fieldset></div>');
        if(array_slider_info_value != null) $('#slider-'+i).val(array_slider_info_value[i+1].value);
    };

如果我使用 JQueryMobile 的方法，那么屏幕上会出现两个滑块:

And if I use the methods of JQueryMobile then on the screen appear two sliders:

for (var i = array_colors_available.length - 1; i >= 0; i--) {
        $('#insert_colors_slider').append('<div data-role="fieldcontain" ><fieldset data-role="controlgroup"> <label for="slider-8">'+array_colors_available[i]+' : '+'</label><input id=slider-'+i+' type="range" name='+array_colors_available[i]+' value="0" min="0" max="25" data-highlight="true" data-theme=c data-track-theme="f"></fieldset></div>');
        $('#slider-'+i).slider();
        if(array_slider_info_value != null) $('#slider-'+i).val(array_slider_info_value[i+1].value);
    };

我做错了什么?当我不使用这些方法时，没有主题，当我使用它时，我有两个滑块而不是一个......谢谢！

What am I doing wrong? When I don't use the methods there's no theme and when I use it I have two sliders instead of one... Thanks!

推荐答案

这只是 jQuery Mobile 错误之一.您的代码中也存在错误，标签必须指向正确的滑块，在您的示例中并非如此.

This is just one of jQuery Mobile bugs. Also there's an error in your code, label must point to the correct slider, and in your example it is not a case.

动态滑块可以通过两种方式创建，都不包括slider()方法:

Dynamic slider can be created in two ways, none of them includes slider() method:

在 pagebeforecreate 或 pagecreate 事件期间执行此操作.

Do it during the pagebeforecreate or pagecreate event.

工作示例:http://jsfiddle.net/Gajotres/caCsf/

$(document).on('pagebeforeshow', '#index', function(){    
    // Add a new input element
    $('[data-role="content"]').append('<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100"  />');
});

示例 2

在 pagebeforeshow 或 pageshow 事件期间执行此操作并使用 trigger('create') 来设置滑块的样式.

Example 2

Do it during the pagebeforeshow or pageshow event and use trigger('create') to style sliders.

工作示例:http://jsfiddle.net/Gajotres/NwMLP/

$(document).on('pagebeforeshow', '#index', function(){    
    // Add a new input element
    $('[data-role="content"]').append('<div data-role="fieldcontain"></div>');
    $('[data-role="fieldcontain"]').append('<fieldset data-role="controlgroup"></fieldset>');
    $('[data-role="controlgroup"]').append('<label for="slider-2">Slider 2</label>');
    $('[data-role="controlgroup"]').append('<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100"  />');
    // Enhance new input element, unfortunately slider() function is not goinf to work correctly
    //$('[type="range"]').slider();
    $('#index').trigger('create');
});

在这个例子中，如果我们尝试使用 slider() 只有除了输入框之外的所有东西都是样式.

In this example, if we try to use slider() only everything will be style except the input box.

更多关于这个和其他一些相关的东西可以在我的另一个ARTICLE，或找到它此处.

More about this and some other related stuff can be found in my other ARTICLE, or find it HERE.

这篇关于动态插入的 JQuery Mobile 滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！