@xuweiさんの https://github.com/xuwei-k/xuwei-k.github.com/blob/master/g8.html http://d.hatena.ne.jp/xuwei/20120619 をベースに無限スクロールするようにしてみました。 200件以上ないので実際は無限スクロールではありませんが。。。
何度も実行すると Github API の回数制限（1時間あたり5000回）を超えます。
Created
June 28, 2012 02:24
-
-
Save takungsk/3008366 to your computer and use it in GitHub Desktop.
g8 テンプレートのリスト
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
| <head> | |
| <!-- | |
| @xuweiさんの | |
| https://github.com/xuwei-k/xuwei-k.github.com/blob/master/g8.html | |
| をベースに無限スクロールするようにしてみました。 | |
| 200件以上ないので実際は無限スクロールではありませんが。。。 | |
| 何度も実行すると Github API の回数制限（1時間あたり5000回）を超えます。 | |
| --> | |
| <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> | |
| <title>github search</title> | |
| <style type="text/css"> | |
| body { no-repeat top right; font-family: Lucida Grande; } | |
| h1 { color:#f5f5f5; font-size: 60px; font-weight: normal;letter-spacing:-5px; text-align:center; } | |
| h2 { font-size : 30px; } | |
| h1 a { color:#333; font-weight:bold; } | |
| a.file { padding-left: 20px; color:aquamarine; background: white; } | |
| h1 span:hover { background:#02EAFF; color:#fff; } | |
| ul { list-style-type: none; margin-top:1em; } | |
| li { margin:.6em 0; } | |
| a.repo-name:link, a.repo-name:visited , a#scalaaaa { background:#8ADCFF; color: #fff; text-decoration:none; } | |
| a:hover { background:#222; } | |
| .site:link, .site:visited, .site:hover { background:#fff; color:#D7EEF8; text-decoration:none; } | |
| </style> | |
| <style type="text/css"> | |
| #next { display:block!important; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border: 1px solid #ddd; background: #efefef; text-align: center; font-weight: bold; box-shadow: 2px 2px 2px rgba(50,50,50,0.4); color: #444; text-decoration: none; padding: 5px;} | |
| #next:hover { background: #dfdfdf; color: #222;} | |
| </style> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| function getg8(pnum) { | |
| $.getJSON('https://api.github.com/legacy/repos/search/' + keyword + '?start_page='+ pnum + '&callback=?', function(result) { | |
| if(result.data.repositories.length == 0) { $('a#next').remove(); } | |
| console.log(result) | |
| $.each(result.data.repositories, function() { | |
| $('#repo').append( | |
| [ | |
| '<li>', | |
| '<a id=avater-link-' + this.owner + '>', | |
| '<img style="float:left" height="40px" width="40px" id="avater-' + this.owner + '"/>', | |
| '</a><h2><a target="_blank" class="repo-name" href="' + this.url + '">', | |
| this.owner + "/" + this.name , | |
| "</a></h2><p>", | |
| this.description, | |
| ' <a href="' + this.homepage + '">' + this.homepage + "</a>", | |
| "</p>", | |
| "</li>" | |
| ].join('') | |
| ) | |
| var user_id = this.owner; | |
| $.getJSON('https://api.github.com/users/' + user_id + '?callback=?', function(user) { | |
| $('#avater-' + user_id ).attr("src",user.data.avatar_url) | |
| $('#avater-link-' + user_id ).attr("href",user.data.html_url) | |
| }) | |
| }) | |
| }) | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1 id="scalaaa"> | |
| <span>ヽ(*ﾟдﾟ)ノ<</span> | |
| <a href="#" id="scalaaaa">github search</a> | |
| </h1> | |
| <p style="float:right;"><a target="_blank" href="#"><del>this page source code</del></a><p> | |
| <ul id="repo"> | |
| </ul> | |
| <script type="text/javascript"> | |
| $(function() { | |
| var param = location.search.replace("?",""); | |
| if(param == ""){ | |
| keyword = 'g8'; | |
| $("#scalaaaa").text("giter8 template lists") | |
| $("#scalaaa").attr("style","") | |
| }else{ | |
| keyword = param; | |
| $("#scalaaaa").text(keyword + " search results") | |
| $("#scalaaa").attr("style","display:none") | |
| } | |
| document.title = keyword + " list"; | |
| getg8(1); | |
| $('#repo').after('<div id="footer"><a id="next" href="#">more</a></div>') | |
| }) | |
| </script> | |
| <!-- | |
| ** Using "Infinite Scroll" | |
| ** http://infinite-scroll.com/ | |
| --> | |
| <script type="text/javascript" src="./js/jquery.infinitescroll.min.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| /* */ | |
| var pnumnum = 2; | |
| $('#body').infinitescroll({ | |
| navSelector : "a#next:last", | |
| // selector for the paged navigation (it will be hidden) | |
| nextSelector : "a#next:last", | |
| // selector for the NEXT link (to page 2) | |
| itemSelector : "#body p" | |
| // selector for all items you'll retrieve | |
| }); | |
| // kill scroll binding | |
| //$(window).unbind('.infscr'); | |
| // hook up the manual click guy. | |
| $('a#next').click(function(){ | |
| getg8(pnumnum) | |
| pnumnum = pnumnum + 1; | |
| return false; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment