トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

記法/HTML(XML)/Jade の変更点

Top / 記法 / HTML(XML) / Jade

Jadeを使用するとHTMLやXMLを簡潔に記述できます。個人的には[[Titanium Mobile]]でviewsフォルダ内のxmlファイルを記述するときによく利用しています(WindowにButtonやLabelなどを配置するときに使用するファイルです)。



*HTML(XML)とJadeを双方向に変換できるWebサービス
-[[html2jade.org - HTML to Jade Online Realtime Converter>http://html2jade.org/]]

備考
-入力するときのインデントはタブでもスペースでもOKです。
-結果はどちらもスペース2つ区切りとなります
-HTML -> Jadeではタグ名がすべて小文字に変換されます



*Jade記述方法

**XML例
#pre{{
<!-- comment1 -->
<Alloy>
	<Window>
		<Label id="lbl" attr1="a1" attr2="a2" class="c1 c2">This is label.</Label>
		<!-- comment2 -->
	</Window>
</Alloy>
}}

**Jade記述例
#pre{{
// comment1 
Alloy
	Window
		Label#lbl.c1.c2(attr1='a1', attr2='a2') This is label.
		// comment2 
}}

**ポイント
-インデントを使用し、閉じタグは使用しません ... インデントは統一されていればタブでもスペースでもOK
-id, classはCSSと同様の記述方法です
-属性はカッコ内にカンマ区切りで記述します
-タグで囲われたテキストはタグなどにスペースを挟んで右側に記述します(引用符で囲みません)
-属性の値だけ引用符で囲みます ... id名、class名、タグで囲われたテキストに対して引用符は不要
-コメントは左側にタブを残したまま//を付けます ... インデントが重要なので行頭に//を付けるとHTML(XML)の構造が変になります。なお、親をコメントアウトすると、子や孫などもコメントアウトされます



*リンク
-[[Jade について。Jade FTW>https://gist.github.com/japboy/5402844]]
-[[Jade Language Reference | jade-lang.com>http://jade-lang.com/reference/]]