nakatojiUiLib-0.15-min.zip(ライブラリのみ)

Nakatoji.ui.zip(ライブラリを含んだBracketsのサンプルプロジェクト)

 

<ライブラリの設置>

ライブラリはnakatojiUiLib-min.js(末尾にバージョン)ファイルのみです。CSSは動的に生成されるので存在しません。Bracketsプロジェクトであれば以下のように設置します。

※現在のバージョンは「0.15」です

 

<.htmlファイルのイメージ>

Extension内でnakatojiライブラリを利用するためには、他のライブラリと同様にHTMLファイルの冒頭で宣言します。nakatojiライブラリはjQueryを利用していますが、その性質上jQueryより後に読み込まれるようにしてください。

以下の例ではUIに関するJavascriptはhtmlファイルに直接書き込む形になっています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="ntWindow">
<script src="/js/libs/jquery-2.0.2.min.js"></script>
<script src="/js/libs/nakatojiUiLib-0.15-min.js"></script>
<script src="/js/main.js"></script>

<script type="text/javascript"> // ------------------------ // nakatojiLib初期化(必須) // ------------------------ nakatojiLib.init({ fontSize: 11, defaultFont: "'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif", }); // ------------------------ // コントロールUI作成 // ------------------------ nakatojiLib.addCntl("button", [10, 10], [21, 120], { name: "btn1", text: "button 1" }); nakatojiLib.addCntl("button", [10, 150], [21, 120], { name: "btn2", text: "button 2" }); // ------------------------ // イベントハンドラ // ------------------------ function ntEventHandler(objName, event, detail) { switch (objName) { case "btn1": aleart("pushed 1"); break; case "btn2": aleart("pushed 2"); break; } }
</script>
</body>
</html>

コードの詳細については以降の解説を参照してください。

 

Joomla templates by a4joomla