初めての ROCOCOライブラリ
ROCOCOエレメントの生成
まずは、全くなにも起こりませんが、コンテンツを作成してみます。
htmlファイルは次のようにします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.finds.jp/rococo/b2/rococo.js"></script> <link rel="stylesheet" type="text/css" href="http://www.finds.jp/rococo/b2/rococo.css" /> <script type="text/javascript" src="sample.js"></script> </head> <body> <div id="test"></div> </body> </html>
続いて、sample.jsを生成し、次のように書き込みます。
// 初期化メソッドをRococo.initに追加
Rococo.init.push(userInit);
// 初期化メソッド
function userInit() {
// <div id="test"> を ROCOCOエレメントにする
var element = Rococo.em.recreateElement(document.getElementById('test'));
};
なお、これらは、UTF-8で保存しておいて下さい。
実際に動作させるためには、HTMLファイルをブラウザで開いて下さい。
ただし、このファイルを開くと、何もおこりませんし、なにも表示されません。
ROCOCOエレメントかどうかを試す
ROCOCOエレメントにはいくつかのメソッドが挿入されています。それのひとつを実行して、本当にROCOCOエレメントであるかどうかを試してみます。
ここでは、writeXhtmlメソッドを使ってみます。先ほどのスクリプトファイルを次のようにします。
// 初期化メソッドをRococo.initに追加
Rococo.init.push(userInit);
// 初期化メソッド
function userInit() {
// <div id="test"> を ROCOCOエレメントにする
var element = Rococo.em.recreateElement(document.getElementById('test'));
element.writeXhtml("<p>これは<strong class=\"test\">テスト</strong>です。</p>");
};
これで改めてHTMLファイルを開くと、次のように、「これはテストです」と表示されます。