0

我在使用 JQueryMobile 时遇到了一些麻烦,因为我想实现一些小部件,但小部件的主题和颜色没有很好地实现。

这是一张显示正在发生的事情的照片: 在此处输入图像描述

例如,正确的小部件是:

在此处输入图像描述

如果我动态添加 jquerymobile 小部件,则主题添加不充分,但如果 html 已经在文件中(未使用 javascript 动态添加),则主题看起来不错。这是我用来添加小部件的代码:

function cesta_insert_html(){
    var cesta_bought = $('body').data('cesta_list');
    cesta_bought.forEach(function(element, index){
        image = get_product_info(element[0].id, 'data' + $('body').data('clicked_listview_item'));
        $('#cesta_view').append('<div data-role="collapsible-set" id="collapsible" data-theme="a" data-content-theme="c"><div data-role="collapsible" data-collapsed="false"><h3 id="title_collapsible">'+image.pname+'</h3><center><div id=image_cesta><img src=data:imajpeg;base64,'+image.pimage+' alt="image"></div><div data-role="fieldcontain"><fieldset data-role="controlgroup"><input type="range" class="slider" name="slider" value="0" min="0" max="100" data-highlight="false"></fieldset></div></center><div class="ui-grid-a"><div class="ui-block-a"><a id=SaveChangesCesta data-role="button" type="submit" >Guardar cambios</a></div><div class="ui-block-b"><a id="DeleteCesta" type="submit" >Eliminar de cesta</a></div></div></div></div><br><br>');
    });
}

谢谢!

4

2 回答 2

2

工作示例:http: //jsfiddle.net/Gajotres/6nG2n/

您正在组合几个不同的小部件,以增强它们的标记,您应该运行 trigger('create')。

在我的另一个答案中阅读更多相关信息:jQuery Mobile:动态添加内容的标记增强

$('[data-role="content"]').append('<div data-role="collapsible-set" id="collapsible" data-theme="a" data-content-theme="c"><div data-role="collapsible" data-collapsed="false"><h3 id="title_collapsible">Image</h3><center><div id=image_cesta><img src=data:imajpeg;base64,Image alt="image"></div><div data-role="fieldcontain"><fieldset data-role="controlgroup"><input type="range" class="slider" name="slider" value="0" min="0" max="100" data-highlight="false"></fieldset></div></center><div class="ui-grid-a"><div class="ui-block-a"><a id=SaveChangesCesta data-role="button" type="submit" >Guardar cambios</a></div><div class="ui-block-b"><a id="DeleteCesta" type="submit" >Eliminar de cesta</a></div></div></div></div><br><br>');   
$('#index').trigger('create');
于 2013-05-15T15:41:01.577 回答
0

检查这些类似的问题:jQuery Mobile 通过 ajax 动态创建可折叠集不应用样式 动态添加可折叠元素 动态添加可折叠元素

在 JQuery mobile 中动态添加内容后,您可以通过调用创建或刷新方法来应用标记。

试着打电话

$("collapsible").collapsible()

附加可折叠后对其进行初始化。

于 2013-05-15T15:33:23.173 回答