github-fork-ribbon-normal

A native JavaScript plugin that automatically adds fork github buttons to your web pages.Simple but powerful!

Version

v0.1.0

• After you generate ribbon, you can also recanfigure parameters

v0.2.0（latest）

• Style has big change, more customizable
• If you have '.github.io' in hostname, you can generate ribbon without canfiguration

Features

github-fork-ribbon is a native JavaScript plugin that does not have any dependences, and has the following features:

• Support custom button styles

• Can automatically match Github Pages

• Support multiple operations for ribbon, and also supports chained calls

• Support the CMD and AMD specifications

Usage

Import

Normal

<script src='github-fork-ribbon.min.js'></script>

CommonJS

var githubForkRibbon = require('github-fork-ribbon');

AMD(requireJS)

require(['github-fork-ribbon'], function() {
    ...
});

CMD(seaJS)

seajs.use('github-fork-ribbon', function() {
    ...
});

Then you can generate fork buttons for your web pages in three ways:

• The way an instance of new is followed by a simple example(followed by the meaning of the parameters):

var fg = new githubFork({
    type: 'orange',
    url: 'http://github.com/merrier/',
});

• If your website is constructed through Github Pages, that is to say if your current location.hostname is the XXXX.github.io form, the plugin will automatically and a fork button in the upper right corner of the page, pointing to your Github address;of course, you can also make more coordination through the above way

• If you only need the default style and location, but not built by Github Pages, you can also use the plugin directly by adding query to your URL, as in the form of query:

&githubFork=your-github-name

Documentation

github-fork-ribbon will first determine whether the current URL contains .github.iohostname or querygithubFork=your-github-name. If the two cases are met, a button is generated by default; otherwise, a githubFork instance of new is called, similar to the following example:

var gf = new githubFork({
    text: 'Fork me on Github',
    url: '//github.com/merrier/',
    position: ['left', 'top'],
    type: 'red',
    zIndex: 2,
    fixed: false,
    target: '_top',
    fontSize: '14px',
    isMobileHide: true,
})

Configuration

text: String

default: 'Fork me on Github'

The text of the button is not added long hidden function(v0.2.0), so please do not set too long characters

url: String

default: '//github.com/merrier/',

Button jump link

position: Array

default: ['right', 'top']

Button position. It is divided into four categories: upper right, upper left, lower right, lower left, and make sure that the configuration item is an array of these four positions

type: String

default: 'black'

The color type of the button is provided by default with four colors (v0.2.0), black, red, orange, and green, as shown in the following table:

black	red	orange	green

zIndex: Number

default: 2

The z-index property of the button

fixed: Boolean

default: false

Whether the position property of the button is fixed

target: String

default: '_blank'

Where to open the link document, there are four kinds:'_blank','_top','_parent','_self', consistent with the target attribute of the tag

fontSize: String

default: '13px'

The font size of the button. When the font changes, the size of the button itself will also changes

isMobileHide: Boolean

default: 'true'

Hide the button while accessing the phone

Method

🔗 Means that chained calls are supported

• config
• hide
• show
• remove

config 🔗

You can call this method when you need to configure the button(If you generate the button automatically in the latter two ways in the above three ways, github-fork-ribbon will mount the instance of button to window, and the variable is named githubForkRibbon)

Parameters:

• opt:configuration [Object]
• callback:callback [Function]

window.githubForkRibbon.config({
    position: ['left', 'top'],
})

hide 🔗

This method comes in handy when you hide the button at a particular point in time

Parameter:

• callback:callback [Function]

var githubForkRibbon = new githubFork({
    url: '//github.com/your-github-name',
    type: 'red',
})

githubForkRibbon.hide()

show 🔗

Show the button

Parameter:

• callback:callback [Function]

window.githubForkRibbon.show( function() {
    console.log("I'm back!");
})

remove 🔗

Remove the button

Parameter:

• callback:callback [Function]

window.githubForkRibbon.remove( function() {
    console.log("I'm removed!");
})

github-fork-ribbon-normal

一个自动为你的网页添加fork按钮的原生javascript插件，简单实用！

版本说明

v0.1.0

• 生成ribbon之后可重新配置参数

v0.2.0（最新）

• 样式大变样，可定制化选项更多
• 如果hostname中有'.github.io'，将不需配置即可生成ribbon

特色

github-fork-ribbon是原生javascript插件，不依赖任何库，同时具有以下特色：

• 支持自定义fork按钮样式

• 可以自动匹配Github Pages

• 支持多种对于ribbon的操作，同时支持链式调用

• 支持CMD、AMD规范

用法

引入

普通方式引入

<script src='github-fork-ribbon.min.js'></script>

CommonJS规范引入

var githubForkRibbon = require('github-fork-ribbon');

AMD规范引入（requireJS）

require(['github-fork-ribbon'], function() {
    ...
});

CMD规范引入（seaJS）

seajs.use('github-fork-ribbon', function() {
    ...
});

### 然后，你可以通过以下三种方式为你的网页生成fork按钮：

* new一个实例的方式，以下为一个简单示例（参数含义后面会介绍到）：

```javascript
var fg = new githubFork({
    type: 'orange',
    url: 'http://github.com/merrier/',
});

• 如果你的网页是通过Github Pages构建，那么如果你当前网页的location.hostname是XXXX.github.io的形式的话，插件将自动添加一个fork按钮到网页的右上角，同时指向为你的github地址；当然，你也可以通过上面的方式进行更多配置

• 如果你只需要默认的样式和位置，同时并不是通过Github Pages构建，那么你也可以通过添加query的形式直接使用插件，query的形式如下：

&githubFork=your-github-name

文档

github-fork-ribbon将首先判断当前URL中是否含有.github.iohostname或querygithubFork=your-github-name，如果符合这两种情况，将默认生成一个按钮；否则需要new一个githubFork实例进行调用，类似于下面这种：

var gf = new githubFork({
    text: 'Fork me on Github',
    url: '//github.com/merrier/',
    position: ['left', 'top'],
    type: 'red',
    zIndex: 2,
    fixed: false,
    target: '_top',
    fontSize: '14px',
    isMobileHide: true,
})

配置项

text: String

default: 'Fork me on Github'

按钮的文本，因为没有加入过长隐藏的功能（0.2.0），所以请不要设置过长字符

url: String

default: '//github.com/merrier/',

按钮跳转的链接

position: Array

default: ['right', 'top']

按钮的位置，分为四种：右上、左上、右下、左下，请确保该配置项为这四种位置之一的数组

type: String

default: 'black'

按钮的颜色类型，默认提供四种颜色（0.2.0），分别为黑色、红色、橘色和绿色，如下表所示：

black	red	orange	green

zIndex: Number

default: 2

按钮的z-index属性

fixed: Boolean

default: false

按钮的position属性是否为fixed

target: String

default: '_blank'

在何处打开链接文档，共有四种：'_blank'、'_top'、'_parent'、'_self'，与标签的target属性一致

fontSize: String

default: '13px'

按钮的字体大小，当字体改变时，按钮本身大小也会发生改变

isMobileHide: Boolean

default: 'true'

在移动端访问时是否隐藏按钮

方法

🔗 表示支持链式调用

• config
• hide
• show
• remove

config 🔗

当你需要对生成的按钮进行配置时，可调用此方法（如果你是通过上面三种方式中的后两种方式自动生成按钮的话，github-fork-ribbon会将按钮的实例挂载到window，变量名为githubForkRibbon）

参数：

• opt：配置项
• callback：回调

window.githubForkRibbon.config({
    position: ['left', 'top'],
})

hide 🔗

当你在某个特定时间点隐藏按钮时，该方法将派上用场

参数：

• callback：回调

var githubForkRibbon = new githubFork({
    url: '//github.com/your-github-name',
    type: 'red',
})

githubForkRibbon.hide()

show 🔗

显示按钮

参数：

• callback：回调

window.githubForkRibbon.show( function() {
    console.log("我胡汉三回来了！");
})

remove 🔗

移除按钮

参数：

• callback：回调

window.githubForkRibbon.remove( function() {
    console.log("你移除我了！");
})