README

EDFシリーズ武器取得チェックリストをjQueryで簡易再現するスクリプト。
質問、要望等は作者Twitterまで。 https://twitter.com/edf_weapons

動作サンプル

http://weapon.edf.jpn.com/jq/

注意点

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で全て使用しているため参照のこと。

redpizza / edfweaponlist