JQuery Mobile动态填充可折叠集丢失圆角

时间：2013-05-24 18:03:54

标签： jquery html jquery-mobile

我认为这可能与我的代码或css有关，但我可以在JSFiddle中重现它：

http://jsfiddle.net/kegmT/ 

<body>
    <div data-role="page" id="index">
        <div style="padding:20px">
            <div>Here's the problem - this dynamicaly populated collapsable set should have rounded corners:</div>
            <div id="output" data-role="collapsible-set" data-inset="true" data-theme="c"></div>
            <div>If I use the same content but do not render it dynamically, it is fine:</div>
            <div id="static" data-role="collapsible-set" data-inset="true" data-theme="c">
                <div data-role="collapsible">
                    <h2>Container 1</h2>
                    <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul>
                </div>
                <div data-role="collapsible">
                    <h2>Container 2</h2>
                    <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end="">
                        <li><a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 1</h3></a>
                        </li>
                        <li><a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 2</h3></a>
                        </li>
                </div>
                <div>Why the difference?</div>
            </div>
</body>

<script>

$('#output').append('<div data-role="collapsible"><h2>Container 1</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul></div><div data-role="collapsible"><h2>Container 2</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end=""><li><a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 1</h3></a></li><li><a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 2</h3></a></li>');

$('#output').trigger('create');

</script>

每当我在可折叠集合上运行触发器（'create'）时，它似乎无法标记第一个孩子和最后一个需要圆角的孩子。

有什么想法吗？我已经没有想法，减去渲染后自己手动应用这些类..

2 个答案:

答案 0 :(得分：2)

实施例

工作示例：http://jsfiddle.net/Gajotres/2QMk6/

只有当折叠集合属于可折叠集合时，它才会具有圆形边框。因此，当动态创建2个collapsibless时，您还需要动态创建可折叠集。如果没有它，jQuery Mobile将创建2个基本的可折叠文件，将它们放在可折叠集中并不重要。

代码：

使用Javascript：

$('#output').after('<div id="new-collapsible-set" data-role="collapsible-set" data-inset="true" data-theme="c"><div data-role="collapsible"><h2>Container 1</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul></div><div data-role="collapsible"><h2>Container 2</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end=""><li><a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 1</h3></a></li><li><a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 2</h3></a></li></div></div>');

$('#index').trigger('create');

HTML：

<body>
    <div data-role="page" id="index">
        <div data-role="content">
            <div style="padding:20px">
                <div>Here's the problem - this dynamicaly populated collapsable set should have rounded corners:</div>
            </div>
            <div id="output">If I use the same content but do not render it dynamically, it is fine:</div>
            <div id="static" data-role="collapsible-set" data-inset="true" data-theme="c">
                <div data-role="collapsible">
                    <h2>Container 1</h2>
                    <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul>
                </div>
                <div data-role="collapsible">
                    <h2>Container 2</h2>
                    <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end="">
                        <li>
                            <a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px">
                                <img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "/>
                                <h3 style="font-size:12px;">Template 1</h3>
                            </a>
                        </li>
                        <li>
                            <a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px">
                                <img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "/>
                                <h3 style="font-size:12px;">Template 2</h3>
                            </a>
                        </li>
                    </ul>
                </div>
                <div>Why the difference?</div>
            </div>
        </div>            
    </div>        
</body>

答案 1 :(得分：2)

data-role=collapsible-set以这种方式接受动态添加元素的refresh方法。

$('.selector').collapsibleset('refresh');

注意 refresh不适用于data-role=collapsible。

  

<强>演示

参考：Collapsible-set API

相关问题
最新问题