jade 基本语法 (jade basic)

访问量: 696

refer to:  http://jade-lang.com/reference/

急速入门:

<Alloy>
<Window>
<ScrollableView id="scrollableView" showPagingControl="true" width="100%">
<View id="view1" backgroundColor="#123">
<ImageView image="/images/index/guide01.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
</View>
<View id="view2" backgroundColor="#246">
<ImageView image="/images/index/guide02.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
</View>
<View id="view3" backgroundColor="#48b">
<ImageView image="/images/index/guide03.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
</View>
<View id="view4">
<ImageView image="/images/index/guide04.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
<Button id="go" onClick="go_login">立即体验</Button>
</View>
</ScrollableView>
</Window>
</Alloy>

转换成 jade: 

Alloy
    Window
        ScrollableView#scrollableView( showPagingControl="true" width="100%")
            View#view1(backgroundColor="#123")
                ImageView(image="/images/index/guide01.png" width="100%" height="100%" left="%0" top="%0")
            View#view2(backgroundColor="#246")
                ImageView(image="/images/index/guide02.png" width="100%" height="100%" left="%0" top="%0")
            View#view3(backgroundColor="#48b")
                ImageView(image="/images/index/guide03.png" width="100%" height="100%" left="%0" top="%0")
            View#view4
                ImageView(image="/images/index/guide04.png" width="100%" height="100%" left="%0" top="%0")
                Button#go(onClick="go_login") 立即体验

注释:

// 注释 ,  或者 //- 注释

使用mixin:

mixin say_hi(name, content)
    div#my_id.class_id "#{content}, #{name} , ohyeah~"
    div#my_id.class_id= name

+say_hi("dashi", '你好')

生成:
<div id="my_id" class="class_id">"你好, dashi , ohyeah~"</div>
<div id="my_id" class="class_id">dashi</div>

订阅/RSS Feed

Subscribe

分类/category