« »

autoCheck=”false” と autocheck=”false”

Permanent Link 2006-07-02 23:28 | category XUL Widgets | comment Comment (0)

XULの button および toolbarbutton 要素に対して type=”checkbox” 属性を指定すると、オンオフ可能なチェックボックス型ボタンとなる。通常、ユーザがマウスまたはキー操作でボタンをクリックすると、自動的にチェック状態が変化してチェックマークが反転される。チェック状態の変化に伴って何か処理を行うのであればこれで問題ないが、何らかの条件付でチェック状態を変化させたいような状況もありうる。そのような場合は button および toolbarbutton 要素に対して autoCheck=”false” 属性を指定して、自動的にチェック状態変化させないようにすればよい。その代わり、スクリプトで checked プロパティを反転させ、チェック状態を変化させるのである。

<script type="application/x-javascript"><![CDATA[
function checkStateHandler(aEvent)
{
    var target = aEvent.originalTarget;
    // 条件付きで checked プロパティを反転させる
    if ( (new Date()).getSeconds() % 2 == 0 )
    {
        target.checked = !target.checked;
        alert("checked property = " + target.checked);
    }
}
]]></script>

<!--チェックボックス型ボタン-->
<button type="checkbox"
    autoCheck="false"
    label="button"
    oncommand="checkStateHandler(event);" />

<!--チェックボックス型ツールバーボタン-->
<toolbarbutton type="checkbox"
    autoCheck="false"
    label="toolbarbutton"
    oncommand="checkStateHandler(event);" />

一方、XULの menuitem 要素に対して type=”checkbox” 属性を指定すると、オンオフ可能なチェックボックス型メニューアイテムとなる。また、 type=”radio” を指定すると、兄弟関係にあるすべての menuitem からひとつだけ選択可能なラジオボタン型メニューアイテムとなる。これらについても同様に、条件付きでチェック状態を変化させたい場合はどうすればよいか。これらの要素で自動的にチェック状態を変化させるには、 autocheck=”false” 属性を指定してやればよい（先述した autoCheck と異なり、c が小文字であることに注意）。また、スクリプトから手動でチェック状態を切り替える際には、先述のように checked プロパティを反転させる代わりに、 checked 属性を反転させる。

<script type="application/x-javascript"><![CDATA[
function checkStateHandler2(aEvent)
{
    var target = aEvent.originalTarget;
    // 条件付きで checked 属性を反転させる
    if ( (new Date()).getSeconds() % 2 == 0 )
    {
        target.setAttribute("checked", !(target.getAttribute("checked") == "true"));
        alert("checked attribute = " + target.getAttribute("checked"));
    }
}
]]></script>

<toolbarbutton type="menu" label="menu">
    <menupopup>
        <!--チェックボックス型メニューアイテム-->
        <menuitem type="checkbox"
            autocheck="false"
            label="menuitem (checkbox)"
            oncommand="checkStateHandler2(event);" />
        <!--ラジオボタン型メニューアイテム-->
        <menuitem type="radio"
            autocheck="false"
            label="menuitem (radio)"
            oncommand="checkStateHandler2(event);" />
    </menupopup>
</toolbarbutton>

なお、XULの checkbox 要素および type=”checkbox” とした listitem 要素については、 autoCheck / autocheck 属性は存在しない。

リファレンス:
XUL:toolbarbutton – MDC
XUL:menuitem – MDC

TOP

  

TOP