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 需要将渲染的选择字段转换为其实现。

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

于 2012-10-25T14:37:09.863 回答