第一个ZK组件:窗口(window)组件

                                                           窗体组件的属性

    

属性 功能
Title 设置窗口的标题 任意文本
Border 设置窗口的边框风格 Normal或None(默认是None)
Height 设置窗口的高度 单位px例如100px
Width 设置窗口的高度 单位px例如100px
Closable 设置窗口是否能够被关闭 true或者false
Sizeable 设置窗口是否能被调整 ttrue或者false

 

 

 

tex.zul页面

<window id="win" title="My First window " border="normal" width="200px" height="200px" closable="true" sizable="true">
    hello word ! 
</window>

运行结果如下

我们可以扩大这个窗口 如下

这时你可能认为这不是一个ajax应用,因为他没有进行任何交互,是的,接下来我们将ajax注入到你的ZK应用上

我们改变text.zul改变如下

<window id="win" title="My First window " border="normal" width="200px" height="200px" closable="true" sizable="true">
    hello word ! <button label="按钮" onClick="win.title=&quot;zk application with Ajax&quot;"></button>
</window>

以下是这段代码新做的事情.

①为窗口定义了一个id 

②text.zul通过声明button创建了一个按钮

③为button组件定义了一个label组件作为属性,并把label组件类型定义为"按钮".

④为button组件定义了一个一个onClick的点击事件.

⑤onClick监听器中以双引号的形式定义了一个语句,用来定义onClick事件所触发的命令:

win.title=&quot;zk application with Ajax&quot;

这个语句告诉ZK,用户通过点击button通过id得到这个window改变这个window的title

需要注意的是&quot;由于.zul文件是XML文件,因此必须使用&quot;对双引号("")进行转义,这样XML解析器才能正确的解析.

运行的效果图

通过点击button

猜你喜欢

转载自blog.csdn.net/qq_40646143/article/details/81609229
今日推荐