jQuery Mobile - toolbars
jQuery Mobile
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css">
<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
<div data-role="page" id="containerPage">
<div data-role="header">
<h1>Acme Corporation</h1>
</div>
<div data-role="content">
<ul id="tweets" data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a id="ListLoader" data-role="button" href="javascript:{}">Load List</a></li>
<li><a href="#" class="ui-btn-active">Opt 2</a></li>
<li><a href="#">Opt 3</a></li>
</ul>
</div>
</div>
</div>
JavaScript
function displayTweets(tweets) {
for (var i = 0; i < tweets.length; i++) {
var tweet = tweets[i];
$('#tweets').append('<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-hover-c ui-btn-up-c">' + tweet.text + '</li>');
//if (tweet.in_reply_to_user_id == null) {
//}
}
}
$('#containerPage').live('pagecreate', function(event) {
$.fixedToolbars.setTouchToggleEnabled(false);
});
$("#ListLoader").click(function() {
$.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?id=Encosia&callback=?', function(tweets) {
displayTweets(tweets);
});
return(false);
});