2014年08月15日

jQuery SimpleTable Plugin について

jQuery SimpleTable Plugin

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

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

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

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

2015.04.01 追記
API仕様 :
[ $({対象ブロック}).simple_table() ]
表を生成する(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"罫線(各セル)の 高さ 。

戻り値必須説明
----


使用法 :

posted by red at 01:00| Comment(0) | TrackBack(0) | JavaScript(jQuery Plugin) | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック