65.9K
CodeProject 正在变化。 阅读更多。
Home

MVC4 Razor 中的图片组合框/下拉列表

Akki Kumar
starIconstarIconstarIconstarIconstarIcon

5.00/5 (10投票s)

2015年6月24日

CPOL

4分钟阅读

viewsIcon

47138

downloadIcon

1513

多亏了 JQuery 和 CSS，HTML 中的图片组合框不再令人头疼。

引言

在我一个 ASP.NET MVC4 项目中，有一个需求是在组合框/下拉列表中显示图片。
我在网上搜索了很多关于在组合框中显示图片的信息，但遗憾的是，我没有找到任何简单的解决方案。大家都在谈论 ddslick、jquery + msdropdown、jquery 插件，但这些都非常复杂。
作为一名程序员，我不喜欢为这样简单的事情购买组件，所以我决定自己构建一个图片组合框/下拉列表。

我认为这会对其他程序员有所帮助，节省他们的研究时间，因此在此分享，请享用。 :)

背景

HTML 下拉列表不支持图片，如果我们尝试在普通的 HTML 下拉列表中添加样式，如下所示：

<select>
     <option style="background-image:url(images/volvo.png);" value="volvo">Volvo</option>
     <option style="background-image:url(images/saab.png);" value="saab">Saab</option>
     <option style="background-image:url(images/honda.png);" value="honda">Honda</option>
     <option style="background-image:url(images/audi.png);" value="audi">Audi</option>
</select>

上面的代码只在 Firefox 浏览器中有效，但在 Internet Explorer 和 Chrome 中无效，因此有必要开发一种支持所有浏览器的、具有图片支持的自定义 HTML 组合框。

Using the Code

设计

第一步：创建 Div 标签

<div class="customCombobox" id="customCombobox1"></div>

上面的代码将创建一个普通的 HTML div 标签。现在，让我们为我们的 div 标签添加样式。

.customCombobox {
        width: 120px;
        height: 22px;
        border: 1px solid black;
        background-image: url('../../Images/down.png');
        background-repeat: no-repeat;
        background-position: right;
        margin: 0;
        padding: 0;
        cursor: pointer;
        align-content: center;
    }

添加样式后，如果我们运行我们的 HTML 或 cshtml 页面，上面的 div 标签将显示如下面的图片：

我们已经完成了创建自定义图片组合框/下拉列表的第一步。

第二步：创建下拉列表的 'ul' 和 'li'

在这里，我们将使用无序 HTML 列表来创建我们的下拉列表。新手程序员可以参考此链接了解更多关于无序 HTML 列表的信息。

让我们来创建我们的下拉列表无序列表：

<ul class="ulcustomCombobox" id="ulcustomCombobox1">
    <li id="1"><a><img src="~/Images/fb.png" class="imgDisplay" />
       <p class="imageText">Facebook</p></a>
    </li>
    <li id="2"><a><img src="~/Images/twitter.png" class="imgDisplay" />
       <p class="imageText">Twitter</p></a>
    </li>
    <li id="3"><a><img src="~/Images/orkut.png" class="imgDisplay" />
       <p class="imageText">Orkut</p></a>
    </li>
</ul>

上面的 HTML 代码片段将显示下拉列表中所需的项目。您可以自定义并添加 table 或 div 标签以更正确地显示下拉列表项。我只使用了 <img> 和 <p> 标签来显示图片和图片文本，即每个下拉列表项显示一个 <img> 和一个 <p>。

现在，让我们用 CSS 来装饰我们的下拉列表，并设置边框、宽度、背景和边距，如下面的 CSS 代码所示：

    .ulcustomCombobox {
        display: none; /*hide dropdown by default*/
        width: 120px;
        background-color: white;
        border: 1px solid black;
        border-top: none;
        margin: 0;
        padding: 0;
        position:absolute;
    }
  • display: none 将默认隐藏我们的下拉列表（稍后我们将使用 jquery 使其可见）。
  • position: absolute：元素相对于其第一个已定位（非静态）的祖先元素进行定位。

现在，让我们为下拉列表项添加边框：

.ulcustomCombobox li {
            border-top: 1px solid gray;
            height: 22px;
        }

上面的 CSS 代码将为我们的下拉列表项添加边框，并将高度设置为 22px。

让我们使用 CSS 为下拉列表项添加一些鼠标悬停效果：

.ulcustomCombobox li:hover{
            background-color:lightblue;
            cursor:pointer;
        }

上面的 CSS 代码将在鼠标悬停时改变 dropdownlist 项的背景颜色。

现在，我们将使用 CSS 来对齐图片和对应的文本。

 .imgDisplay{
            display:inline;
            vertical-align:middle;
        }

            .imageText{
                display:inline;
                vertical-align:middle;
                padding-left:5px;
            }

上面的 CSS 代码将使图片和对应的文本垂直居中。

现在，如果我们运行我们的 HTML 页面，我们的下拉列表将显示如下面的图片：

嗯，我们的下拉列表去哪儿了？

您还记得我们使用 display: none 默认隐藏了我们的下拉列表。哦，天哪！:)

现在，如何在单击向下箭头时显示下拉列表？好吧，我们将使用 jquery 来实现这一点。

第三步：添加 JQuery 以完成下拉列表的功能

首先，添加对 jquery 文件的引用：

<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>

现在，使用下面的 JQuery 代码处理下拉箭头的点击事件：

<script>
    $(document).ready(function () {
        $("#customCombobox1").click(function () {
            //Get ul tag
            var dropDwn = $(this).next();
            //Show Dropdown
            if (dropDwn.is(":visible"))
                dropDwn.hide();
            else
                dropDwn.show();
        })
    });
</script>

上面的 JQuery 代码将在下拉列表隐藏时显示它，反之亦然。

我们特意使用了 $(this).parent().prev(); ，也可以使用 $('#ulcustomCombobox1') ，但这会降低性能，尤其是在 HTML 页面代码量很大的情况下。因此，我们使用 $(this).parent().prev(); 来获取相对于 div 标签的无序列表 (ul 标签) 的引用。

现在，如果我们运行并点击下拉箭头，我们的下拉列表将打开，显示如下面的图片：

看起来不错，不是吗？耶！:)

等等，我们还没有完成一个功能齐全的图片下拉列表，我们需要处理下拉列表项的点击事件，并将选定的项目内容设置在 div 标签中。

我们将使用 jquery 处理下拉列表项的点击事件：

//Dropdown element click
        $("#ulcustomCombobox1 li").click(function () {
            //Get div tag
            var cmbBox = $(this).parent().prev();
            //Set div tag text/image
            cmbBox.html($(this).html());
            //alert selected element id
            alert("Selected Id:" +  $(this).attr("id"));
            //Hide Dropdown
            $(this).parent().hide();
        });

让我们来看看我们在这里做了什么。

我们通过 -> var cmbBox = $(this).parent().prev(); 获取 div 标签的引用。
我们通过 -> cmbBox.html($(this).html()); 将选定项目的 HTML 文本设置到 div 标签中。
通过 alert 显示选定项目的 id ，即 -> alert("Selected Id:" + $(this).attr("id"));，并且
最后，通过 -> $(this).parent().hide(); 隐藏下拉列表。

如果我们从下拉列表中选择任何一项，它将在 div 标签中设置其内容，如下图所示：

现在只剩下一件事了。当用户点击下拉箭头以外的区域时，如果下拉列表可见，我们应该隐藏它，这是普通的组合框行为，所以让我们使用 jquery 来处理这种情况。

 //Hide Dropdown If User click outside 
        $(document).on('click', function (e) {
            var element, evt = e ? e : event;
            if (evt.srcElement)
                element = evt.srcElement;
            else if (evt.target)
                element = evt.target;
            //Hide if clicked outside
            if (element.className != "customCombobox") {
                $("ul.ulcustomCombobox").hide();
            }
        });

在这里，我们正在比较被点击元素的 className 。如果它不是 "customCombobox" 类，那么我们将隐藏我们的下拉列表项。

我们使用 $("ul.ulcustomCombobox").hide(); 来隐藏所有可见的下拉列表（如果一个 HTML 页面中有多个组合框）。

就是这样。我们完成了。 :)

历史

  • 2015年6月24日：版本 1.0
© . All rights reserved.