在列表项之间添加空格，或使项目更易于在 ASP.NET 下拉列表中的触摸屏上选择

Question

在开发针对移动设备（主要是平板电脑）的 ASP.NET Web 应用程序时，我注意到如果用户的手指很粗，下拉列表有时很难选择正确的项目，或者只是没有。触摸屏非常好。

我知道我不是唯一一个注意到这一点的人，因为 IOS 应用程序出于这个原因专门不再使用下拉菜单，而是通常使用 UIPickerView 控件，它看起来像一卷卫生纸，但可以让人们更多通过滚动轻松地从列表中选择一个项目。

因此，我正在 ASP.NET 中寻找一种无需滚动我自己的自定义控件的好方法，以使下拉列表更易于在移动设备上使用，或者正在寻找一些我可以就地使用的免费控件的下拉列表。

首先想到的是；我可以以某种方式将列表项隔得更远，以便人们可以更轻松地选择他们想要的项目吗？我尝试将字体更改为更大，但这并没有真正帮助；特别是因为控制必须更宽，而问题实际上是项目之间有多少垂直空间。

如果没有，是否有人对他们如何解决这个问题有任何建议或现实生活中的例子？

非常感谢任何建议！

Answer 1

您始终可以使用 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/

Answer 2

我在通过的项目中成功使用了DropKick.js。它克服了样式选择选项的不足，并通过 CSS 提供了对样式的更多控制。

更新 （评论后）：

DropKick.js progressively enhances 在页面上呈现的 HTML（选择字段）。您需要做的就是提供适当的钩子，dropkick 需要将渲染的选择字段转换为其实现。

来自 dropkicks 的主页：

如何使用

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();