动态插入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的一个bug。你的代码中也有一个错误，标签必须指向正确的滑块，在你的例子中它不是一个例子。

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 事件并使用 触发器（'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.

关于这个和其他一些相关内容的更多内容可以在我的其他内容中找到 文章 ，或者发现 此处 。

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

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