 |
| Display Github Repositories On The Page (Images: Plugin JS) |
JQuery Repos is a jQuery plugin that allows you to view the latest published data in Github repositories using the system API (application program interface) available on Github. The official API GitHub documentation is available at the following link:
https://developer.github.com/v3/
Before you start using the plugins, download the GitHub auctions or alternatively use CND (onticons.css) here are the links to the official documentation and the CND code:
How to use it:
1. Insert the stylesheet repos.css and JavaScript jquery.repos.js into the page.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/jquery.repos.js"></script> <link rel="stylesheet" href="/path/to/css/repos.css" />
2. Create a container to hold the Github repo list.
<div class="repos"></div>
3. Initialize the plugin and replace the Github username as follows:
$(function(){
$('div.repos').repos({
username:'jqueryscript'
});
});
4. Determine the maximum number of repos to display. Default: 3.
$(function(){
$('div.repos').repos({
username:'jqueryscript',
count:10
});
});
5. Override the default styles of the Github repo list.
span.name a {
text-decoration: none;
font-weight: bold;
color: #4183c4;
font-size: 14px;
}
span.name a:hover {
text-decoration: underline;
}
span.description {
color: #8c77a1;
font-size: 14px;
}
span#icon_repos {
margin-top: 5px;
float: left;
}
div.content {
padding: 8px;
border: 1px solid #e5e5e5;
background: #fff;
}
div.content ul {
list-style: none;
margin: 0px;
padding: 0px;
margin-left: 20px;
}
Live Demo
See the Pen Untitled by Plugin JS (@pluginjs) on CodePen.
File Info
- File Name :
- display-github-repositories-on-the-pagerepos-plugin.zip
- Size :
- 4.89KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT