benw2/wezm.net
1
0
Fork 0
forked from wezm/wezm.net
Code Pull requests Activity

Start implementing JS pagination of articles

Browse source
This commit is contained in:
Wesley Moore 2009-11-23 20:33:21 +11:00
parent 19be2ada2e
commit ed7c6183be
4 changed files with 46 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
layouts/articles.html
View file

@ -7,18 +7,7 @@
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projector" /> <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projector" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projector" /> <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projector" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="/js/script.js" type="text/javascript"></script> <script src="/js/articles.js" type="text/javascript"></script>
<script type="text/javascript">
var articles;
jQuery(function() {
// load JSON
// get( url, [data], [callback], [type] )
jQuery.get('/articles/index.json', {}, function(data) {
articles = data;
console.log(data);
}, 'json');
});
</script>
</head> </head>
<body> <body>
<%= render 'header' %> <%= render 'header' %>
@ -39,9 +28,9 @@
</ul> </ul>
<div class="pagination"> <div class="pagination">
<a href="">&laquo; Newer</a> <a href="/articles/#page-0" class="older">&laquo; Older</a>
| |
<a href="">Older &raquo;</a> <a href="/articles/#page-2" class="newer">Newer &raquo;</a>
</div> </div>
</div> </div>
<%= render 'footer' %> <%= render 'footer' %>

8
layouts/listing.html
View file

@ -6,7 +6,7 @@
<title><%= @item[:title] %></title> <title><%= @item[:title] %></title>
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projector" /> <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projector" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projector" /> <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projector" />
<script src="/js/script.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<%= render 'header' %> <%= render 'header' %>
@ -19,16 +19,16 @@
<span class="day"><%= post_date.day %></span> <span class="day"><%= post_date.day %></span>
<span class="month"><%= post_date.strftime('%b') %></span> <span class="month"><%= post_date.strftime('%b') %></span>
<span class="year"><%= post_date.year %></span> <span class="year"><%= post_date.year %></span>
</span> </abbr>
<a href="<%= article.reps.first.path %>"><%= article[:title] %></a> <a href="<%= article.reps.first.path %>"><%= article[:title] %></a>
</li> </li>
<% end %> <% end %>
</ul> </ul>
<div class="pagination"> <div class="pagination">
<a href="">&laquo; Newer</a> <a href="#newer">&laquo; Newer</a>
| |
<a href="">Older &raquo;</a> <a href="#older">Older &raquo;</a>
</div> </div>
</div> </div>
<%= render 'footer' %> <%= render 'footer' %>

5
output/css/style.css
View file

@ -143,3 +143,8 @@ ul#menu li {
display: block; display: block;
font-weight: 200; font-weight: 200;
} }
.pagination {
display: none;
text-align: center;
}

33
output/js/articles.js Normal file
View file

@ -0,0 +1,33 @@
var articles;
function articles_loaded(data) {
articles = data;
console.log(data);
$('.pagination').slideDown('fast');
};
jQuery(function() {
$('.newer, .older').click(function() {
var elem = $(this);
var page;
var matches;
if(matches = elem.attr('href').match(/(\d+)$/)) {
page = new Number(matches[1]);
}
else {
return false;
}
var per_page = 10;
var i = (page - 1) * per_page;
for(; i < page * per_page; i++) {
console.log(articles[i].title);
}
return false;
});
jQuery.get('/articles/index.json', {}, articles_loaded, 'json');
});