ボタン

ZK - Simply Ajax

ボタンにはbuttonとtoolbarbuttonの2種類があります。
これらのボタンの違いは内部的にbuttonコンポーネントが
HTMLのbuttonタグを使うのに対して、
toolbarbuttonコンポーネントはHTMLのAタグを使う点です。
ブラウザで表示したHTMLソースを確認してみると変換されていることが分かります。


labelとimageプロパティを使ってボタンにラベルとイメージを配置できます。
両方同時に定義した場合は、dirプロパティでどちらを先に表示するか制御し、
orientプロパティでレイアウトを横に表示するか縦に表示するかを調整できます。



<?xml version="1.0" encoding="Windows-31J"?>

<window title="ボタン" border="normal" width="200px">

    <style>.title td {font-size:12px;}</style>

    <button label="左側" style="font-size:12px;" image="/img/ya1bl.gif"

        width="125px" height="50px" />

    <button label="右側" style="font-size:12px;" image="/img/ya1bl.gif"

        dir="reverse" width="125px" />

    <button label="上側" style="font-size:12px;" image="/img/ya1bl.gif"

        orient="vertical" width="125px" />

    <button label="下側" style="font-size:12px;" image="/img/ya1bl.gif"

        orient="vertical" dir="reverse" width="125px" />

</window>


ボタンに振る舞いを追加する方法は2種類あります。
onClickイベントを使用するかhrefプロパティを使用する方法です。
両方指定した場合は、hrefが優先されonClickイベントは実行されません。
以下はサンプルです。