2014年10月31日

jQuery SimpleTimetable Pluginについて

jQuery SimpleTimetable Plugin

このプラグインはタイムテーブルの生成を支援します。
(Tableタグを利用しません。)

このプラグインは教育目的で作成しました。
また、すべての要素にidが付与されているため、容易に拡張することができます。

2014.12.11 追記
スクリーンショット :
simple_timetable.jpg

2014.10.31 追記
現在、「The jQuery Plugin Registry」が読み取り専用モードになっているため、本プラグインはまだレジストリに登録されていません。
("The jQuery Plugin Registry is in read-only mode.
New plugin releases will not be processed.")
経過を観察します。

リポジトリ(GitHub) :
https://github.com/criticalbreak5/simple_timetable
https://github.com/criticalbreak5/simple_timetable/archive/master.zip

2015.04.01 追記
API仕様 :
[ $({対象ブロック}).simple_timetable() ]※対象ブロックの配置方法を相対位置に指定する必要あり(例: $("#timetable_id_1").css({ "position":"relative" }); )
タイムテーブルを生成する(Tableタグを利用しない)。
引数必須説明
第1Objectオプション情報。
オプション必須デフォルト値説明
"cols"String(Number)-"10"列数(ヘッダ列を除く)。
"col-headers"String[]-[](=各ヘッダ列が表示されない)各ヘッダ列の ラベル 。
"col-headers-id-prefix"String-"col_headers_id_"各ヘッダ列の (element)IDの接頭辞 。
各ヘッダ列の生成規則
 <div id='{col-headers-id-prefix}{列番号(1〜)}' />
"col-headers-text-align"String-"left"各ヘッダ列の 文字位置 。
"col-headers-color"String-"#000000"各ヘッダ列の 文字色 。
"col-headers-background-color"String-"#FFFFFF"各ヘッダ列の 背景色 。
"rows"String(Number)-"10"行数(ヘッダ行を除く)。
"row-headers"String[]-[](=各ヘッダ行が表示されない)各ヘッダ行の ラベル 。
"row-headers-id-prefix"String-"row_headers_id_"各ヘッダ行の (element)IDの接頭辞 。
各ヘッダ行の生成規則
 <div id='{row-headers-id-prefix}{行番号(1〜)}' />
"row-headers-text-align"String-"left"各ヘッダ行の 文字位置 。
"row-headers-color"String-"#000000"各ヘッダ行の 文字色 。
"row-headers-background-color"String-"#FFFFFF"各ヘッダ行の 背景色 。
"top-left-header"String-""ヘッダ(左上)の ラベル 。
"top-left-header-id"String-"top_left_header_id"ヘッダ(左上)の (element)ID 。
ヘッダ(左上)の生成規則
 <div id='{top-left-header-id}' />
"top-left-header-text-align"String-"left"ヘッダ(左上)の 文字位置 。
"top-left-header-color"String-"#000000"ヘッダ(左上)の 文字色 。
"top-left-header-background-color"String-"#FFFFFF"ヘッダ(左上)の 背景色 。
"cell-data"String[][]-[]各セルの 表示文字列 。
"cells-id-prefix"String-"cells_id_"各セルの (element)IDの接頭辞 。
各セルの生成規則
 <div id='{cells-id-prefix}{列番号(1〜)}-{行番号(1〜)}' />
"cells-text-align"String-"left"各セルの 文字位置 。
"cells-color"String-"#000000"各セルの 文字色 。
"cells-background-color"String-"#FFFFFF"各セルの 背景色 。
"ruled-line-border-color"String-"#000000"罫線の 色 。
"ruled-line-border-style"String-"solid"罫線の 種類 。
"ruled-line-border-width"String-"1px"罫線の 太さ 。
"ruled-line-width"String-"100px"罫線(各セル)の 幅 。
"ruled-line-height"String-"20px"罫線(各セル)の 高さ 。
"row-headers-override-width"String-"100px"各ヘッダ行の 幅 。※単位は "px" のみ、指定可能
"col-headers-override-height"String-"40px"各ヘッダ列の 高さ 。※単位は "px" のみ、指定可能
"start-date"Date-new Date()表示開始日時。
"end-date"Date-・"interval"が "s" の場合は "start-date"+30seconds
・"interval"が "m" の場合は "start-date"+30minutes
・"interval"が "H" の場合は "start-date"+30hours
・"interval"が "d" の場合は "start-date"+30days
・"interval"が "w" の場合は "start-date"+210days
表示終了日時。
"interval"String-"d"表示間隔。
・"s" の場合は 秒
・"m" の場合は 分
・"H" の場合は 時
・"d" の場合は 日
・"w" の場合は 週
"col-headers-format"String-・"interval"が "s" の場合は "yyyy/MM/dd
HH:mm:ss"
・"interval"が "m" の場合は "yyyy/MM/dd
HH:mm:00"
・"interval"が "H" の場合は "yyyy/MM/dd
HH:00:00"
・"interval"が "d" の場合は "
yyyy/MM/dd"
・"interval"が "w" の場合は "
yyyy/MM/dd"
各ヘッダ列の 日付/時刻フォーマット 。
"data"Array<
 Array<
  Array<
Object<String, String>>>>
-[]表示データ。

1階層目のArray : レイヤー(要素番号が大きいほど表示優先度が高くなる)

2階層目のArray : (レイヤー毎の)行

3階層目のArray : (行毎の)列

Object : (列毎の)データ※

戻り値必須説明
----


(列毎の)データ : ※
オプション必須デフォルト値説明
"id"String-"data_id_{通番(1〜)}"各データの (element)ID 。
"title"String-""各データの 表示文字列(兼ツールチップ) 。
"color"String-"#000000"各データの 文字色 。
"background-color"String-"#FFFFFF"各データの 背景色 。
"border-color"String-"#000000"各データの 罫線の 色 。
"box-shadow"String-"0px 0px 0px 0px rgba(0, 0, 0, 0)"各データの 影 。
"start-date"Date-各データの 開始日時 。
"end-date"Date-各データの 終了日時 。


使用法 :

2014.11.01 追記
※ $.get() を利用しているため、実行確認にはWebサーバが必要です。

posted by red at 00:14| Comment(0) | TrackBack(0) | JavaScript(jQuery Plugin) | このブログの読者になる | 更新情報をチェックする