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
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
Post a Comment