2008年06月26日

チェックボックス、ラジオボタンを大きく表示して使う

テキストボックスやコマンドボタンはフォントのサイズや縦(Height)横(Width)を直接指定することで大きく表示することができる。しかし、チェックボックスやラジオボタンは文字の方は大きくできてもコントロールはサイズが変わらない。

年配の方やタッチスクリーンを使っている場合、見やすく操作し易いようにするためにこの部分を大きくできないかという依頼があったとき、正直こんなに苦労するとは思わなかった。

いろいろ試行錯誤した挙句、完成したのがこのサンプルのような使い方である。
サンプルソース:bigctrsamp.lzh (2008.07.03修正)

※このサンプルが有効なのはIE7までです。IE8だと互換表示を使ってもボタンを大きくすることはできません。(2009.09.02)

※こちらで新しいサンプルを紹介しています。WebコントロールでもIE8でも使えるサンプルです。チェックボックス、ラジオボタンを大きく表示して使う:その2」(2009.09.03)

サンプル実行図
サンプル実行図

サーバーコントロールはWebコントロールではなくHTMLコントロールを使う。Webコントロールではどうしても大きくできない。また、サーバーサイドで利用するため「サーバーコントロールとして実行」を有効にするが、クライアントサイドのJavascriptでGridView内のラジオボタンを操作する方法も組み込んである。

デザイン全体図
デザイン全体

サーバーコントロールとして実行
サーバーコントロールとして実行

サイズを指定
サイズを指定

ラジオボタンのクライアントスクリプトでは一度ブラウザで表示された状態のソースコードで名前を調べる。

GridViewのソースコード
GridViewのソースコード

このソースコードから、ラジオボタンのName属性がGridView2$ctlXX$であることが判る。XXはどういうわけか02から始まる。そこでこれを操作するJavascriptも先頭が02となるように細工をする。

Javascritpコード
Javascriptコード

なお、GridViewの行数をHiddenFieldの値から取得しているが、これは以前のTipsでも紹介した方法「データソースで取得したレコードの件数を知るには」を使っている。


posted by なっちゃん at 18:44| 静岡 ☔| Comment(6) | TrackBack(0) | ASP.NET Tips | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
はじめまして
いまさらのコメントですが、気になったので・・・

一応Webコントロールでも、実際のコントロールを探してVB側で
.Attributes("style")="width:20px;"
.Attributes("class")="(cssName)"
ここら辺で追加可能です。

※GridViewなどの場合は、_ItemDataBoundイベント内で記述します。

特にonclickでは有用です。
.Attributes("onclick")="javascript:xxx"
onclientclickが実装されるまでや存在しないコントロールにはバリバリ使っていました。

.ClientIDや.UniqueIDでHTML側に記述されるIDは取得できますよ。
Posted by 蒼い音速鼠 at 2009年09月01日 19:36
Attributesは私も試しました。
でも大きくはならなかったですね。どうして貴方が大きくできたのか不思議です。
で、今回あらためてテストしたところ、面白いことが判りました。
私がテストした当時はIE6とIE7でしたが、IE8になった現在だとサンプルのHTMLコントロールでも大きくはならないんです。互換表示を使ってもです。
つまり、ブラウザの仕様でチェックボックスやラジオボタンは拡大縮小できるか決まるようなのです。他のブラウザはもともとシステム上対象外なので試してみていませんが、案外そんなことが原因かもしれません。
Posted by なっちゃん at 2009年09月02日 10:18
サンプルを見たところAttributesは使ってましたね。;
失礼しました。
こちらで導入したアプリでは元気よく拡大されていたので、調べたところIEの罠でした。
不思議ですが、サンプルに以下のコードを追記すると多分IE全般でうまくいきます。
(IE以外は未確認)

HTML側ヘッダ部分
 <style type="text/css">
   input { border-width : 1px; } ←なぜかここが肝心です。
   input.big { width: 25px; height: 25px;}
 </style>

VB側 GridView2_RowDataBound 部分
  If e.Row.RowType = DataControlRowType.DataRow Then
   Dim rdB As HtmlInputRadioButton = CType(e.Row.FindControl("Radio1"), HtmlInputRadioButton)
   rdB.Attributes("onclick") = "setRadio(" & e.Row.RowIndex.ToString & ");"
   rdB.Attributes("css") = "big" ←追加
  End If

スタイルシートなら一括で適用できるので楽でいいですよ。
Posted by 蒼い音速鼠 at 2009年09月02日 18:51
間違えました。
cssなんてプロパティないですよね。。。orz
 rdB.Attributes("class") = "big" ←追加
になります。

また、単なるHTMLのラジオボタンなのでHTML側で記述してもOKでした。
 <input id="Radio1" type="radio" class="big" style="width: 30px; height: 30px" runat="server" />

inputを別にせずに
 input.big { border-width : 1px;width: 25px; height: 25px;}
これでも「border:none;」でもいけますので、単純にチェックボックス、ラジオボタンのborderが邪魔しているようです。

サンプルのソースならHTML側でstyleを使っているので、そこに「border:none;」を追加するだけで良さそうですね。
Posted by 蒼い音速鼠 at 2009年09月02日 20:13
さらに弄んでみました。

asp:RadioButtonでもサーバー側であればclassやstyleの追加が可能です。

asp:RadioButtonの場合はSpanタグでラッピングされてしまうので、通常のAttributeやCssStyleの指定では被さっているSpanにかかってしまいますが、
下記のようにInputAttributesを使えばできます。

asp:RadioButtonをID="Radio2"で追加して、

Dim rdB2 As RadioButton = CType(e.Row.FindControl("Radio2"), RadioButton)
 rdB2.CssClass = "big" ←span側なのでダメ
 rdB2.InputAttributes("class") = "big" ←htmlRadio側なのでOK
 rdB2.LabelAttributes("class") = "big" ←span側なのでダメ

LabelAttributesとInputAttributesで分れているので気をつければ使えますね。

ちなみにGridViewでのラジオボタンのグループ化はNameプロパティ(GroupName含む)をこっちが書き換えても強制的にGridViewが書換えてしまう(バグ?)ので、やっぱりJavaScriptが正解のようです。(カスタムコントロールを作るなら別ですが。)
Posted by 蒼い音速鼠 at 2009年09月02日 20:59
ありがとうございます。
おかげさまで上手く行きました。
改めてサンプルを作り直し、新着記事として紹介させていただきました。
Posted by なっちゃん at 2009年09月03日 11:49
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。