javascript - JQuery Mobile list view collapsible widget -


i looking around find how include "show more" option in listview jquery mobile, couldn't find any? know can examples?

i trying implement feature comments feature on facebook.

however tried though. if there more 4 comments include list view in collapsible widget, if not display list view, since looping through elements, having problems in achieving this. here code:

for (var = 0; < post_comments.length; i++) {             var comment = post_comments[i];             var comment_actor_id = comment.from.id;             var comment_message = comment.message;               var comment_actor_name = comment.from.name;              if (post_comments.length > 4){               morecomments_markup = '<div data-role="collapsible" id="morecomments" data-theme="b" data-content-theme="b" data-mini ="true"><h3>show comments</h3><p></div>';             } else {              comment_markup += '<li style="padding-left:60px; min-height=30px;"><img src="https://graph.facebook.com/' + comment_actor_id + '/picture" class="ui-li-icon">'+'<p style="white-space:normal"><strong>' + comment_actor_name + '</strong>:  ' + comment_message +'</p></li>';            }            }            $('#morecomments').replacewith(morecomments_markup);           $('#morecomments').collapsible();           $('#morecomments .ui-collapsible-content').append(comment_markup).trigger('create');           $('#fbcomments').empty().append(comment_markup);            $('#fbcomments').listview("refresh"); 

this code does: removes jquery listview styling inside collapsible widget enter image description here

here html:

 <!--start of fullpostviewpage -->   <div data-role="page" id="fbfullpostviewpage">     <script>            $( '#fbfullpostviewpage' ).on( 'pageinit', function( event ) {             if (modernizr.localstorage) {                }             else {                 $('#message').text("sorry browser doesn't support local storage");                 $('#message').show();             }     });   </script>      <div data-role="header" id="fbheader" data-theme="b" data-inset="true"><div class="logo"><img src="images/facebook_64x64.png"></div>         <h1 id="headername"style="position:relative; top:-10px;">          </h1>     </div><!-- /header -->     <div data-role="content" data-theme="d">       <p id="message"/>       <div id ="actordisplay"></div>       <div id ="detailedpost"></div>      <div id="fblikeblock"></div>      <div id="morecomments"></div>      <div><ul data-role="listview" data-icon="false" data-theme="c" id="fbcomments" data-inline="true"data-inset="true"></ul></div>       <div id="fbcommentblock"></div>       </div><!-- /content -->     <div data-role="footer" data-theme="b">         <h5>          </h5>     </div><!-- /footer --> </div><!--end of fullpostviewpage --> 


Comments

Popular posts from this blog

How to mention the localhost in android -

php - Calling a template part from a post -

c# - String.format() DateTime With Arabic culture -