Select Option の代替品（１）
スマホ版を作成中ですが、スマホは指で操作するため、ボタンなどを大きくしなくては思ったように操作できません。<Select><Option> では、オプションリストの行の高さを大きくしたいのですが、<Option> に style をセットしても手応えなし。
考えているうちに、<Select><Option> と同じような動きをする物が作れそうに思えてきたので、やってみました。本物の <Select><Option> とは多少違うのですが、主要な機能は同じものを作る事ができました。
【まだＰＣ Windows 10 でしか動かしていません]
ブラウザのウインドウを小さくして動かした限り、よさそうです。実際のスマホの場合、アンドロイドだったりするわけで、問題が出る可能性はありますが、とりあえず動いたので公開します。
使っているのは JavaScript だけです。
多分、「<Select><Option> の代替品（５）」で実行可能な html ファイルを書き込む予定です。このブログサイトにはダウンロード可能なファイルをＵｐし、読者がダウンロードできる機能はないようなので、html をテキストとして投稿する予定です。
・<Select><Option> は使わない。
<Select> は <Option selected> あるいは最初の <Option> にある caption を現在選択されている物として表示すると思われます。つまり、<Option> が必用。<Option> が意図したように動いてくれないならば <Option> は使えない。<Select> は使用して <Option> の代わりに <MyOption> などを使うには <Select> を処理する部分（つまり、ブラウザ）を修正しなくてはならないでしょう。そういう訳なので、<Select><Option> は使いません。
・<Select> の代替品 【以下、MySelect と書く場合があります。】
必用条件は、現在の選択値のキャプションを表示できる事、それを JavaScript で書き換える事ができる事、ユーザーは書き換えられない事、クリックした時イベントが発生する事、<Select> の value 相当の値を適切なパラメータ名で送信できる事などです。結局、以下のようにしました。
<span style="outline:solid thin;width:150px;" id="MySel0" onClick="dispMyOption('MySel0','MySelT0','MyOpt0','MyLi0','17')">
<input type="text" readonly style="cursor:default;outline:none;border:none;width:135px;height:40px;" id="MySelT0" value="">
<input type="text" readonly style="cursor:default;outline:none;border:none;text-align:right;width:15px;height:40px;" value="v " class="aH">
</span>
<input type="hidden" name="TestParam" value="">
・現在選択値の表示、▽のボタンには readonly の text を使っているのは、最初に思いついたのが readonly text だったからで、動作したのでそのままになっています。
・Html パラメータの送出には <hidden> を使っています。hidden の name に記述する名前は <Select> に記述する名前です。
・text に表示される枠があると、現在値表示、▽ボタンに個別の枠が表示されてしまい、見た目が大きく異なります。「枠なし」とします。
・２つの text 全体を囲む枠は欲しいので、<span> で囲み、それに枠を付けました。
【重要】２つの ,input typw=text ...> の間に改行を入れてはいけません。ここでは読みやすさのために改行していますが、実際の html に改行を入れると
Firefox:まともに表示される。
Chrome, Edge : こけしを横倒ししたよう不思議な形の外形が表示される。
となります。どうやた、改行はデフォルト高さの空白文字に変換されているようです。
・<Select> の代替品、行ごとの説明
<span style="outline:solid thin;width:150px;" id="MySel0" onClick="dispMyOption('MySel0','MySelT0','MyOpt0','MyLi0','17')">
style="outline:solid thin; 枠あり、細い実線 width:150px;
id="MySel0 JavaScript で処理する時に参照するための id onClick="dispMyOption('MySel0','MySelT0','MyOpt0','MyLi0','17') クリックされた時の処理
'MySel0' <Select 代替品を囲む <span> の id
'MySelT0' 現在値を表示する readonly text の id
'MyOpt0' オプションリスト（後述）全体の id
'MyUl0' オプションリストの <ul> の id
'17' オプションリストの行数
<input type="text" readonly style="cursor:default;outline:none;border:none;width:135px;height:40px;" id="MySelT0" value=""> 現在値を表示する領域。
<input type="text" readonly style="cursor:default;outline:none;border:none;
text-align:right;width:15px;height:40px;" value="v " class="aH">
▽を表示する領域。▽は小文字の v で代用しています。
</span>
<input type="hidden" name="TestParam" value="">
選択値を Html パラメータとして送出するためのもの。name は送出されるパラメータの名前で、<Select name=...> に記述する名前。
・<Option> の代替品
<div id="MyOpt0" style="display:none;position:fixed;border:1px solid #000;background-color:#fff;">
<ul style="list-style:none;padding-left:0;padding-top:0;margin-top:0;padding-bottom:0;margin-bottom:0;overflow-y:auto;" id="MyUl0">
<li onMouseOut="onMouseOutFunction('MySel0',this,'0');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','222','アイルランド','0','TestParam')">アイルランド</li>
<li onMouseOut=・・中略・・</li> 必用なだけ繰返し記述
</ul></div>
オプションリストには <div><ul> <li></li> </ul><div> を使いました。<div> はオプションリスト全体で、その時の画面の大きさ、スクロール量に応じて表示位置を調整する時、オプションリスト全体を「１つの物」として扱うためのものです。
<ul> <li> の説明は不要は省略
・<Option> の代替品 行ごとの説明
<div id="MyOpt0" style="display:none;position:fixed;border:1px solid #000;background-color:#fff;">
id="MyOpt0" JavaScript から参照するための id
styledisplay:none; 初期状態は非表示
position:fixed;border:1px solid #000; 境界線あり、1px 幅の実線、黒色background-color:#fff; 背景色は白
<ul style="list-style:none;padding-left:0;padding-top:0;margin-top:0;padding-bottom:0;margin-bottom:0;overflow-y:auto;" id="MyUl0">
id="MyOpt0" JavaScript から参照するための id
styledisplay:none; 非表示
position:fixed; 位置は固定。実際に表示する時 JavaScript で調整します。
border:1px solid #000 境界線。1px 幅の実線、黒色
background-color:#fff 背景色は白
<li onMouseOut="onMouseOutFunction('MySel0',this,'0');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','222','アイルランド','0','TestParam')">アイルランド</li>
onMouseOut="onMouseOutFunction('MySel0',this,'0');マウスが離れた時の処理
onMouseOver="this.style.background='lightskyblue'; マウスが乗った時の処理。「選択色」とする。
styletext-align:left; テキストは左詰め
padding-left:20 左の padding
padding-top:10; 上の padding
padding-bottom:10; 下のpaddingon
Click="setValue('MySel0','MySelT0','MyOpt0','222','アイルランド', '0','TestParam')">
クリックされた時の処理。
'MySel0','MySelT0','MyOpt0', JavaScript から参照するための id。
何の id かは「<Select> の代替品、行ごとの説明」にあります。
'222' 「アイルランド」の パラメータ値。<Option value=...> に記述する値に相当。
'アイルランド' クリックされた時、mySelect に表示する文字列。<Option> </Option> 間に記述する文字列に相当。
'0' 「アイルランド」の、<ul> 内の位置。行番号。
'TestParam' Html パラメータの名前。JavaScript が <hidden> を参照するための名前。</ul></div>
今回はここまで。次回は JavaScript その１。かなり長いスクリプトなので、２回に分けて書きます。
コメント