3

モバイル デバイス (主にタブレット) をターゲットとする ASP.NET Web アプリケーションを開発しているときに、ユーザーが太い指を持っていたり、単にドロップ ダウン リストが適切でなかったりすると、正しい項目を選択するのが難しい場合があることに気付きました。タッチスクリーン付き。

これに気づいたのは私だけではないと思います。IOS アプリは、この理由で特にドロップダウンの使用をやめ、代わりに通常、トイレット ペーパーのロールのように見える UIPickerView コントロールを使用しますが、ユーザーがより簡単に選択できるようにします。スクロールによるリストからのアイテム。

そのため、ASP.NET で独自のカスタム コントロールをローリングせずに、ドロップダウン リストをモバイル デバイスで使いやすくする方法、またはドロップダウン リストの代わりに使用できる無料のコントロールを探している方法を探しています。 .

最初に頭に浮かぶのは次のとおりです。人々が意図した項目をより簡単に選択できるように、どうにかしてリスト項目をさらに離すことはできますか? フォントを大きくしようとしましたが、あまり役に立ちません。特に、問題はアイテム間の垂直方向のスペースの量だけである場合、コントロールをより広くする必要があるためです。

そうでない場合、この懸念にどのように対処したかについての提案や実際の例はありますか?

どんな提案でも大歓迎です！

4

2 に答える 2

3

いつでもCSSを使用できます。JSに夢中になりたい場合は、ブラウザーのユーザーエージェント（デスクトップとモバイル）に応じて、さまざまなスタイルシートを提供することもできます。

/* Drop down control itself */
select.ddlList {
    padding: 5px; /* padding between the border of the drop down and the items */
}
/* Drop down list items */
select.ddlList > option {
    padding: 15px 5px; /* 15px = top/bottom padding, 5px = left/right padding */
}

ASP.NETコントロールを使用して...

<asp:DropDownList ID="ddl" CssClass="ddlList" runat="server">
    <asp:ListItem ... />
    <asp:ListItem ... />
</asp:DropDownList>

編集：まあ、Xanderは正しいです-CSSを介してオプションのスタイルを設定することはできませんが、DropDownListスタイルの私の例はまだ残っています。これにより、DropDownListがタッチクライアントからはるかに見やすくなります。http://jsfiddle.net/DwY87/6/

于 2012-10-25T15:45:52.107 に答える
2

合格したプロジェクトでDropKick.jsを使用して成功しました。選択オプションのスタイリングの欠点を克服し、CSS によるスタイリングのより詳細な制御を提供します。

更新 （コメント後）：

DropKick.jsは、ページにレンダリングされる HTML (選択フィールド) を徐々に拡張します。あなたがする必要があるのは、ドロップキックがレンダリングされた選択フィールドをその実装に変換するために必要な適切なフックを提供することだけです。

ドロップキックのホームページより：

使い方

DropKick は、既存の退屈なものを美しくカスタマイズ可能な HTML ドロップダウンに変換することで機能します。name 属性だけが必須です。また、タブによるナビゲーションを有効にするには、tabindex 属性を設定する必要があります。

<select name="pretty" tabindex="1" class="pretty dk">
  <option value="">Choose a reaction</option>
  <option value="amazed">Amazed</option>
  <option value="bored">Bored</option>
  <option value="surprised">Surprised</option>
</select>

asp.netでどのように使用しますか

非常に簡単に、js ファイルをダウンロードしてサイトに含めることができます。

<script type="text/javascript" src="js/dropkick.js"></script>

スタイリング用の css ファイルを含めます。

<link rel="stylesheet" type="text/css" href="default.css">

もう少しです...ここで、jquery を使用してページのドロップダウン リストに追加する必要があります。

$('#myDropDown').dropkick();

または

$('.myDropDown').dropkick();

于 2012-10-25T14:37:09.863 に答える