【 編集説明 】
● sample.html
1. [ カラーパレット ] ボタンを表示したい場所に
<script type="text/javascript" src="./colorPalette.js"></script>
<noscript>JavaScriptが無効のようです。</noscript>
を記述する。
※ デフォルトでは、<form>〜</form> の間に記述
2. フォーム内設定
・カラーコードを入力する対象フォーム情報を送る為の記述
<input type=text name="color1" size="15" onClick="ChangeNo(0,1)">
ChangeNo(0,1) : form番号[0] で element番号[1]
<input type=text name="color2" size="15" onClick="ChangeNo(0,2)">
ChangeNo(0,2) : form番号[0] で element番号[1]
※ 対応したい各input text、textareaに記述して下さい。
※ form番号 : ページ上にある <form>〜</form> のある順番となる番号 ([0]から数えます。)
※ form番号 : その <form>〜</form> 内にある <input> 等の順番となる番号 ([0]から数えます。)
注意 : sample.htmlでは、[1]から数えているように見えますが、
これは <form>〜</form> の一番最初に[ カラーパレット ] ボタン(input button)が
ある為これが[0]番目になります。
3. スタイルシート ( <head>〜</head>内にあります。)
任意に設定して下さい。
.Button [ カラーパレット ] ボタンの諸設定です。
.CPalette [ AaAaあぁアァ漢字 ] のフォント設定です。
.cPaletteColor カラー表 表示のフォント等の設定です。
※ .cPaletteView { position:absolute; } は、
簡単に言うとカラーパレット表示位置はそちらに任せます?と言う事です。
● colorPalette.js
1. [ textarea ] フォームのタグ設定
/******** 個人設定ここから ***********/
var cTag = 'font'; /* Textarea内でのカラー利用タグの設定 [ font span div ] */
/******** 個人設定ここまで ***********/
デフォルトは [ font ] になっていますが、任意に設定して下さい。
2.カラーパレット母体のサイズ変更
カラー表表示自体のサイズ変更は、.cPaletteColor で出来ますが大きくしすぎるとはみ出してしまいます。
そこで例えば、widthを410にしたい場合 sample.html 内 .CPalettekの指定で
.CPalette {
width:410px; font-size:12px; ... 省略 ...
と width 指定を追加し、colorPalette.js 内 80行目あたりにある
function ColorPaletteView(view)
・・・
省略
・・・
Html.style.width = 410;
の Html.style.width をコメントアウト(又は削除)するか デフォルト値(310)を変更して下さい。