Usage

The 9kb Pizza Toast の使い方です。

  1. Githubのリポジトリからzipをダウンロード
  2. zipを解凍し、dist/the9kbpizzatoast.min.jsをプロジェクトのディレクトリにコピー
  3. the9kbpizzatoast.min.jsを読み込むようにHTMLに記述(例: <script src="./js/the9kbpizzatoast.min.js"></script>)
  4. the9kbpizzatoast.min.jsを読み込んだ後のJavaScript内に下記コードを記述します
    $('body').the9kbpizzatoast();

※the9kbpizzatoast.min.jsを読み込む前にjQueryを読み込んでください

Options

The 9kb Pizza Toast で使用できるオプションの一覧です。

オプション名 説明 デフォルト 記述例
text トースト内に表示するテキストです。
※入力したテキストの後ろに「ページの閲覧中、このウインドウを表示しない」のリンクが必ず付与されます		 (なし) The 9kb Pizza ToastはCookieによる2度目以降の表示抑止ができるシンプルなトーストのjQueryプラグインです。詳しくは右記リンク先をご参照ください。
buttonText リンクボタンのテキストです。 リンクボタン デモページへ
buttonColor リンクボタンの背景色を指定します。 #fff #F7D784
buttonTextColor リンクボタンのテキスト色を指定します。 #333 #B1380C
buttonBorderColor リンクボタンの枠線の色を指定します。 #999 #99A750
buttonLink リンクボタンで遷移するリンクを指定します。 # https://arm-band.github.io/the_9kb_pizza_toast/
buttonShadow リンクボタンにボックスシャドウを付与するかどうかのフラグです。trueの場合、ボックスシャドウを付与します。 false true
borderRadius リンクボタンとトーストの境界線を丸くするかどうかの指定です。px単位で指定してください。 0 4px
boxShadow トーストそのものにボックスシャドウを付与するかどうかのフラグです。trueの場合、ボックスシャドウを付与します。 false true

Example

全体のオプション指定例です。


$('body').the9kbpizzatoast({
    text              : "The 9kb Pizza ToastはCookieによる2度目以降の表示抑止ができるシンプルなトーストのjQueryプラグインです。詳しくは右記リンク先をご参照ください。",
    buttonText        : 'デモページへ',
    buttonColor       : '#F7D784',
    buttonTextColor   : '#B1380C',
    buttonBorderColor : '#99A750',
    buttonLink        : 'https://arm-band.github.io/the_9kb_pizza_toast/',
    buttonShadow      : true,
    borderRadius      : '4px',
    boxShadow         : true
});