2009年 10月 17日

Android のビューで活用すると便利な select 要素

Android では select をクリックすると選択肢がいい感じにポップアップしてくれ見た目を大幅に変えることができそれによりアクションを選択するような場面で場所をとらずに有効に使うことができる以下例

フォーカス (オレンジの outline) がついているのが select である。クリックすると

というふうにポップアップされる。ここで、したい操作を選ぶ、という感じになる。もちろん選択肢が増えても適切にスクロールバーがでるため問題ない。

上の例に関係する部分の CSS と JS をぬきだす。ようは onchange イベントを監視しているだけでポイントというほどのところではないけど selectedIndex は代入できセレクトされているものを変更できるので戻しているところか

form select.post {
        position: absolute;
        top: 0;
        right: 5px;
        width: 25px;
        height: 24px;
        margin: 7px 0;;
        padding: 0 5px;
        outline: none;
        border: 1px solid #000;
        background: #999;
        color: #fff;
        text-align: center;
        -webkit-appearance: none;
}
new function PostOperations () {
    var define = {
        Post : function (form) {
            form.submit();
        },
        Location : function (form, input) {
            // do
        }
    };

    var form = document.getElementById("input");
    if (form) {
        var input = form.querySelector("input[name=msg]");
        var select = document.querySelector("select.post");
        select.addEventListener("change", function (e) {
            var fun = define[select.value];
            try {
                if (fun) fun(form, input);
            } catch (e) { alert(e) }
            select.selectedIndex = 0;
        }, false);
    }
};