人気ブログランキング | 話題のタグを見る

jQuery HTML Editor

jQuery のコマンドで HTML 文書を作る『jQuery HTML Editor』というページを作った。 jQuery の参考書を読んでセレクターの実験をやってみたが、いちいちファイルを作成するのが面倒になったからだ。body 内にスクリプトを入れても無視されてしまうが、大抵のセレクターや jQuery コマンドの実験はできる。Google Chrome の JavaScript コンソールや、FireBug から使うと便利だ。

ページ先頭の jQuery: テキストフィールドに jQuery のDOM要素を操作するコマンドを次のように入力し、

$s('body').append('<h1>hello</h1>')

[exec cmd] ボタンをクリックすると、スクリーンに hello というヘッダーが追加される。$s() 関数は、このエディター特有の関数で、jQuery の $() 関数に相当する。HTML文書がこのエディターでは、<iframe id="screen"></iframe> に収められるため、$()関数ではなく $s() 関数を使うことになる。$s() 関数の定義は次のようになる。

$s = function(selector) { return $('#screen').contents().find(selector) };

$s() を使えは、$() 関数とほぼ同じ操作でスクリーンのDOMオブジェクトを操作することができる。例えば、

$s('h1').text('How ara you?')

は、H1ヘッダーの文字列を hello から How are you? に変えることができる。[sc / txt] ボタンをクリックすると、HTML文書の表示がレンダリングされているものとソース表示とを切り替える事ができる。ソース表示の時も編集可能で、編集後に [sc / txt] ボタンをクリックすると編集が反映される。

Google Chrome でこのサイトをアクセスしている場合は、Shift + Ctrl + J で JavaScript コンソールを起動すれば、コマンドラインからスクリーンの操作をすることができる。この場合もスクリーンの操作をする場合は $() 関数ではなく、$s() 関数を使わなくてはならない。

HTML文書の表示には jquery.indent.js という jQuery のプラグインを利用させていただいた。

トイ・プログラムだが、jQuery のコマンドとHTMLの関係を学習するのには便利だ。

jQuery のコマンドでHTML文書を作るのは面倒なようだが、<li> 要素や、<option> 要素のように同じパターンを繰り返す場合は、jQuery の機能を使ったほうが楽だ。例えば次のようにして、<ul> 要素の中の <li> 要素も一気に作ることができる。

$s('body').append('<ul></ul>')
["item 1", "item 2", "item 3", "item 4"].map(function(elem){ $s('ul').append('<li>' +elem+ '</li>') })

また、つぎのように、<li> 要素だけを一気に削除することもできる。

$s('li').remove()

また、id に "2_3" のようなセルの位置のインデックスをつけた表のようなものも次のようなコマンドで作成できる。

$s('body').append('<table border></table>');
for (i=1; i<6; i++) { $s('table').append('<tr></tr>'); for (j=1; j < 6; j++) { $('tr:last-child').append('<td id="'+i+'_'+j+'">cell('+i+','+j+')</td>') }; };
$s('body').append($s('#3_4').text());

jQuery の勉強のつもりで、このエディターを使っているうちに、HTML文書自体の作成の効率化にも jQuery を利用したいと感じるようになるだろう。

jQuery HTML Editor はフリーウエアです。
by tnomura9 | 2010-12-25 21:56 | JavaScript | Comments(0)
<< CLEditor デモ jQueryの文法 >>