3

私のコードや 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>

折りたたみ可能なセットで trigger('create') を実行すると、角を丸くする必要がある最初の子と最後の子にフラグを立てることができないようです。

何か案は？レンダリング後に自分でクラスを手動で適用することを除いて、アイデアが不足しています..

4

2 に答える 2

2

例：

作業例: http://jsfiddle.net/Gajotres/2QMk6/

折りたたみ式セットの一部である場合にのみ、折りたたみ式の境界線が丸くなります。したがって、2 つの折りたたみ可能なものを動的に作成する場合は、折りたたみ可能なセットも動的に作成する必要があります。それがなければ、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>
于 2013-05-24T18:24:45.057 に答える
2

data-role=collapsible-setrefreshこのように、動的に追加された要素のメソッドを受け入れます。

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

refreshでは機能しないことに注意してくださいdata-role=collapsible。

デモ

参照:折りたたみ可能なセット API

于 2013-05-24T18:30:47.053 に答える