- EDFシリーズ武器取得チェックリストをjQueryで簡易再現するスクリプト。
- 質問、要望等は作者Twitterまで。 https://twitter.com/edf_weapons
- jQueryプラグインとして制作していますが、性質上このスクリプトのための専用のページで使用することを想定しています。
- 特に理由がない場合、サンプルファイル一式をそのまま書き換えて使うことをオススメします。
- こちらから「リポジトリをダウンロードする」で、サンプルと同内容のファイル一式をダウンロードできます。
- https://bitbucket.org/edf_weapons/jquery.checklist.js/downloads/
- 2017/12/02 - ver1.1 Twitterボタンの不具合を修正。
- 2017/11/30 - ver1.0
jQueryライブラリと、このプラグインおよびCSSファイルを読み込む。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.checklist.js"></script>
<link rel="stylesheet" href="cl-style.css">
bodyの終了タグ直前でプラグインを呼び出す。
セレクタは任意の要素を指定。その要素にチェックリストを追加する。
<script>
$('div#element').checkList();
</script>
必要に応じてオプションを指定。しなくても動作する。
$('div#element').checkList({
'id': 'cl1', // 任意のID。初期値 cl1
'file': 'data.txt', // データファイルのパス。初期値 data.txt
'twi': true, // ツイッター投稿ボタンの表示。初期値 true
'addtext': '', // ツイッター投稿時の付属テキスト。初期値 空欄
'load': true // リスト読み込み時のローディング表示。初期値 true
})
- 本スクリプトで生成されるチェックリストは、決められた記法で書かれたテキストデータファイルが必要。
- @ wiki(というかpukiwiki)の記法を部分的にパクっている。
- また、HTMLタグもそのまま使用可能なので、セル内で画像を表示するなども可能。
例:
*リストタイトル
**カテゴリ1
|アイテム1|
以上が最低限。
データファイルの一行目でリストのタイトルを指定する。「*」からはじめる。
*タイトル
カテゴリごとに別のテーブルとなる。「**」からはじめる。
**カテゴリ
ここからがリスト本体。行を「||」でくくる。「|」でカラムを分ける。
|カラム1|カラム2|カラム3|
リストアイテム行のはじめに「!」を付けると、その行はヘッダ行となり強調される。この行はリストアイテムとしてカウントされない。
!|ヘッダ|ヘッダ|ヘッダ|
リストアイテム行のはじめに「?」を付けると、アイテム行としつつもチェックを付けられなくすることができる。この行はリストアイテムとしてカウントされない。
?|カラム1|カラム2|カラム|
カラムのはじめに「結合数>>」を付けると、その数だけ右側のカラムと結合する。
|カラム1|カラム2|カラム3|
|3>>カラム123|
|カラム1|カラム2|カラム3|
縦方向の結合は不可能だが、「[hr]」と区切り線で擬似的にセルを縦分割できる。
|1行目[hr]2行目|
これらの記法はサンプルのdata.txt
で全て使用しているため参照のこと。