岩家.net

前エントリ で，Twitter ID （@issm みたいなの） のリストを書くのがメンドかったので，ちょっとだけ怠けられるスクリプトを書いてみました．

hoge, fuga, piyo

とか

hoge
fuga
piyo

のような文字列から，

<ul>
<li>@<a href="http://twitter.com/hoge" title="hoge">hoge</a></li>
<li>@<a href="http://twitter.com/fuga" title="fuga">fuga</a></li>
<li>@<a href="http://twitter.com/piyo" title="piyo">piyo</a></li>
</ul>

のようなリンク付き HTML を生成します．

生成フォーム

こんな感じで表示

ここ最近，片道きゃっちぼーる が頭の中で流れ続けている issm です．CD 買ってみようかな．．．

さて，14日夜に行われる WCAN mini Markup vol.3 に参加させていただくわけですが，その中で Javascript なテーマも扱うということで，ホンノ小ネタとしてタイトルに示す一クラスを用意してみました．まだ改良の余地がいくらでもありますが，とりあえず公開してみます．

概要

指定したフォーム下の要素のフォーカスを，Enter で次の要素に，Shift + Enter で前の要素に，それぞれ切り替えます．また，最後の要素で Enter，もしくは任意の要素で Ctrl + Enter で submit します．それくらいです．

なお，ffm-ignore クラスを指定すれば，その要素をフォーカスの対象から外すことができます．

以下でサンプルを用意していますのでよろしければ．

FormFocusManager - 岩家らぼ

使い方

まず， FormFocusManager.js を読み込みます． （それ以前に prototype.js を読み込んでいる必要があります．）

で，

<form id="form-hoge">
…
</form>

なフォームに対してこの記述以降に

<script type="text/javascript">new FormFocusManager( 'form-hoge' );</script>

と 1行追加するだけで適用されます．

気になること

本 FormFocusManager クラスは，フォーム下の各要素 （除く ffm-ignore クラス） に keypress と focus の各イベントリスナーを仕込ませています．

ので，対象のフォーム下の要素のいずれかにあらかじめそれらが仕込まれていた場合，どんな挙動を示すのでしょうかねぇ．．．今後の課題としておきます．

最近生活が gdgd な issm です．

既出そうな小ネタですが．．．Ajax を使ってソースを読み込む処理を，ひとクラスにまとめてみました．要 prototype.js です．

使い方

AjaxSourceLoader.js を読み込んで次のように記述することでソースコードを表示します．

new AjaxSourceLoader( 'ソースコードのURL', '表示対象要素のID' );

後述の 「表示例」 の部分では

<div id="source-342-1"></div>

という div 要素を用意した後に

new AjaxSourceLoader( '/js/lib/AjaxSourceLoader.js', 'source-342-1' );

を実行しています．

ソースコードの格納先

pre 要素を生成し，この中に読み込んだソースコードを放り込んでいます．で，表示対象要素.appendChild( このpre要素 ) しています．

また，この pre 要素には，ajaxsourceloader というクラス名をつけてますので，pre.ajaxsourceloader { ... } などとしてスタイルを指定することもできます．

実行後の構造をタグで書くとこんな感じです．（改行は便宜上．）

<div id="hogehoge">
<pre class=”ajaxsourceloader”>
…
ソースコード
…
</pre>
</div>

表示例

以下，本 js を使って，本 js のソースコードを表示してみます．大したことはしていません．

とりあえず作ってみたので載せてみるテスト．解説はそのうちにすることにします．次の URL にてサンプルを公開しています．

http://www.iwa-ya.net/labs/static/freerater/

なお，透過PNGを使っており，今のところ IE6 等のブラウザへの対応はさせていません．

はじめに

お仕事始めようとしたらふと気になってしょうがなくなってきたので，書いてみました．

http://www.iwa-ya.net/labs/static/inputassister/

夕方にミーティングがあるのに何やってるんだろ．．．

概要

テキストボックスをフォーカスしたときに語のリストが表示され，そのうちのいずれかをクリックすると，クリックした語がテキストボックスに入力される，というだけのものです．

まぁそれだけではありきたりなので，対象のテキストボックスと表示する語のリストとの対応を簡単な記述で指定できるようにしてみました．

その記述について

inputassister.js （キタナイソース） をロード後，次のように記述します．

InputAssister.map = [
  { id: ‘input1′, list: [ 1, 2, 3, 4, 5 ] },
  { id: ‘input2′, list: [ ‘a’, ‘b’, ‘c’, ‘d’, ‘e’ ] },
  { id: ‘input4′, list: [ ‘ほげ’, ‘ふが’, ‘ぴよ’, ‘foo’, ‘bar’, ‘baz’ ] }
];
InputAssister.lister_id = ‘lister’;

InputAssister.map で，対象となるテキストボックスの id と表示させたい語のリストを指定します．複数の指定も可能です．上の例は，id="input1" なテキストボックスをフォーカスしたときに，「1 2 3 4 5」 という語のリストが表示される （そして，いずれかをクリックすると，その値がテキストボックスに入力される），というような設定となっています．

InputAssister.lister_id には，語のリストの表示先のボックスの id を指定します．上の例では，<div id="lister"></div> のようなブロックの中に，語のリストが表示されるような設定となっています．

ちなみに

表示される語は，それぞれ ref クラスな a タグ，<a class="ref">...</a>，で囲ってあります．（文章の意味的に li タグの方がいいのかな．．．？）

あと，要 prototype.js です．

今後

対象のテキストボックスの値を置き換えるかアペンドするかを指定できるようにしてみます．