Geek asks and answers

Add image and count bubble to jQuery Mobile accordion section

I have a collapsible section that I want to add an image, as well as an account bubble too, like the markup below.

<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>

The problem I have is that if I add anything other than a tag <h3>, the section title will not display correctly. This does not work for me.

 <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>

How can I get the image and bubble count in the section header?

Image of collapsible section with count bubble image on right side

+5
source share
1 answer

Perhaps the following implementation is close to what you want:

<!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>

enter image description here

+4
source

More articles:


All Articles