5

下のマークアップのように、画像とカウントバブルを追加したい折りたたみ可能なセクションがあります。

<a href="pa.aspx">
  <img src="images/gf.png" alt="" class="ui-li-icon">
  IT Change Controls<span class="ui-li-count">4</span> 
</a>

問題は、タグ以外のものを追加する<h3>と、セクションヘッダーが正しくレンダリングされないことです。これは私にはうまくいきません。

 <div data-role="collapsible" data-inset="false" data-collapsed="false">
     <%--<h3>Section 1</h3>--%>
     <a href="pa.aspx">
         <img src="images/gf.png" alt="" class="ui-li-icon">
         IT Change Controls<span class="ui-li-count">4</span> 
     </a>

セクションヘッダーで画像とカウントバブルを取得するにはどうすればよいですか？

右側にカウントバブル画像がある折りたたみ可能なセクションの画像

4

1 に答える 1

4

たぶん、次の実装はあなたが望むものに近いでしょう：

<!doctype html>
<html lang="en">
   <head>
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>   
        <style>
            div.col-set .ui-icon {
                visibility:hidden;
            }

            div.col-set .comment-count {
              float: right;
              font-size: 11px;
            }

            div.col-set .img-set {
              float: left;
            }

            div.col-set a {
                text-decoration: none;
                font-size: 11px;
            }

            div.col-set .col-text {
                margin-left: 20px;
                text-align: center;
                float: left;
                font-size: 11px;
            }
    </style>
    </head>
    <body>
        <div data-role="page">
            <div data-role="content">   
                <div class="col-set" data-role="collapsible" data-collapsed="true">
                    <h3>
                        <a href="test.html">
                            <img src="http://jquerymobile.com/demos/1.0a4.1/docs/lists/images/sj.png" class="img-set" alt="SJ Flag" />
                            <div class="col-text">Test 1</div>
                            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all comment-count">1</span>
                        </a>
                    </h3>
                    <p>Collapsible content 1.</p>
                </div>
                <div class="col-set" data-role="collapsible" data-collapsed="true">
                    <h3>
                        <a href="test.html">
                            <img src="http://jquerymobile.com/demos/1.0a4.1/docs/lists/images/sj.png" class="img-set" alt="SJ Flag" />
                            <div class="col-text">Test 2</div>
                            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all comment-count">2</span>
                        </a>
                    </h3>
                    <p>Collapsible content 2.</p>
                </div>
            </div>
        </div>      
    </body>
</html>

ここに画像の説明を入力してください

于 2012-08-28T18:53:42.303 に答える