Skip to content

Commit 35dd703

Browse files
author
Karl Seguin
committed
updated to v2 api
1 parent 343ace0 commit 35dd703

File tree

4 files changed

+38
-107
lines changed

4 files changed

+38
-107
lines changed

‎jquery.mogade.js

-84
This file was deleted.

‎readme.markdown

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
# About #
2-
The Mogade Javascript API allows anyone to load leaderboards on webpages using JSONP. The `jquery.mogade.js` file is a jquery plugin aimed at helping developers easily do this.
2+
The Mogade Javascript API allows anyone to load leaderboards on webpages using JSONP.
3+
4+
Since mogade.com uses this libraries itself, and to avoid unnecessarily duplicating the code, you should grab these files from the core mogade-server project at: <https://github.com/mogade/mogade-server/tree/master/public/js/v1>
5+
6+
The `jquery.leaderboard.js` file is a jquery plugin aimed at helping developers easily do this.
37

48
## Using It ##
5-
`sample.html` is a good place to start, but...
9+
`sample.html` is a good place to start. `styles.css` is the style used by mogade.com for the facebook leaderboards.
610

7-
Include `jquery`, then `jquery.markdown.js` on your page:
8-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
9-
<script type="text/javascript" src="jquery.mogade.js"></script>
11+
Include `jquery`, then `jquery.leaderboard.js` on your page:
12+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
13+
<script type="text/javascript" src="jquery.leaderboard.js"></script>
1014

1115
create some type of container, like a `div`:
1216

@@ -17,21 +21,19 @@ On document ready, load the leaderboard:
1721
<script type="text/javascript">
1822
$(document).ready(function()
1923
{
20-
$('#leaderboard').mogade({lid: '4d58982c1d9517207b000006'})
24+
$('#leaderboard').mogade({lids: [['4d58982c1d9517207b000006', 'Top Scores']]})
2125
});
2226
</script>
2327

2428

2529
## Options ##
2630

27-
`lid` is required and is the leaderboard id
31+
`lids` An array of leaderboard ids + name, [['Id1', 'Name1'], ['Optional Id2', 'Optional Name 2'] ... ]
2832

2933
`scope` is optional. 1 for daily, 2 for weekly and 3 for overall. default to `3`
3034

3135
`records` is optional and is the number of records to show. default to `10`
3236

33-
`headers` is optional and is the text for the header columns. default `['#', 'name', 'score']`
34-
3537
`data` is optional and is used to manipulate the data field. It has two fields:
3638

3739
`data.name` is the name of the column for the data field
@@ -41,10 +43,8 @@ On document ready, load the leaderboard:
4143
### Using data ###
4244
Here's an example of how you might use data:
4345

44-
$('#leaderboard').mogade({lid: '4d58982c1d9517207b000006', data: {name: 'time', callback: function(data)
46+
$('#leaderboard').mogade({lids: [['4d58982c1d9517207b000006', 'LB1], ['4d58982c1d9517207b000007', 'LB2']], data: {name: 'time', callback: function(data)
4547
{
4648
return data + 'ms';
4749
}}})
4850

49-
## Todo ##
50-
There currently isn't any paging.

‎sample.html

+5-11
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
11
<html>
22
<head>
3-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
4-
<script type="text/javascript" src="jquery.mogade.js"></script>
5-
<style>
6-
table.leaderboard{font-family:verdana;font-size:80%;border-collapse:collapse;}
7-
table.leaderboard td{padding:3px 10px;}
8-
table.leaderboard tbody td{border-bottom:1px solid #ccc;}
9-
table.leaderboard tr.odd{background:#f0f0f0;}
10-
</style>
3+
<link href="styles.css" media="screen" rel="stylesheet" type="text/css" />
4+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
5+
<script type="text/javascript" src="jquery.leaderboard.js"></script>
116
</head>
127
<body>
13-
<div id="leaderboard">
14-
</div>
8+
<div id="leaderboard"></div>
159

1610
<script type="text/javascript">
1711
$(document).ready(function()
1812
{
19-
$('#leaderboard').mogade({lid: '4d58982c1d9517207b000006', data: {name: 'data', handler: function(data){return data;} }} )
13+
$('#leaderboard').leaderboard({lids: [['4d58982c1d9517207b000006', 'top scores'], ['4d6113c89ae3e77ee40001b0', 'fast game']], data: {name: 'data', handler: function(data){return data;} }} )
2014
});
2115
</script>
2216
</body>

‎styles.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
#leaderboard {display:none;width:550px;}
2+
#leaderboard .leaderboard_name{margin:20px 0;text-align:center;font-weight:bold;}
3+
4+
#leaderboard div.tabs{border-bottom:1px solid #ccc;overflow:auto;margin-bottom:5px;}
5+
#leaderboard div.tabs > div {float:left;padding:5px 20px;margin-right:5px;background:#fff;cursor:pointer;-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px;border-top-left-radius:4px;}
6+
#leaderboard div.tabs > div.active{background:#eee;border:1px solid #ccc;border-bottom:none;}
7+
8+
#leaderboard table{width:100%;display:none;border-collapse:collapse;}
9+
#leaderboard th{font-weight:bold;text-align:left;border-bottom:2px solid #666;}
10+
#leaderboard th.rank{width:50px;}
11+
#leaderboard th.name{width:200px;}
12+
#leaderboard th.score{width:100px;}
13+
#leaderboard td, #leaderboard th{padding:5px;}
14+
#leaderboard tbody tr{border-bottom:1px dashed #eee;}
15+
#leaderboard tbody tr:nth-last-child(-n+1){border-bottom:none}
16+
17+
#leaderboard div.pager{margin-top:10px;}
18+
#leaderboard div.pager > div{cursor:pointer;color:#3B5998;padding:6px;border:1px solid #eee;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius:4px;}
19+
#leaderboard div.pager div.prev{float:left;}
20+
#leaderboard div.pager div.next{float:right;}
21+
#leaderboard div.pager div:hover{background:#eee;border:1px solid #aaa;}

0 commit comments

Comments
 (0)