Question

我正在寻找创建类似这样的组合框或下拉列表，其中当下一页的右侧点击“黄金海岸”或“最新”按钮时，弹出包含选择项的框：

Deal Zoo

它似乎有一个非常光滑的外观和感觉，我想知道在哪里获得Javascript或ASP .Net组件？

Answer 1

我是Deal Zoo的创造者。很高兴为您提供下拉式造型。它是javascript / jquery，css和plain ol'HTML的组合，以实现结果。

您需要确保拥有Jquery库。我使用谷歌托管版本。

HTML是：

<dl class="dropdown">
  <dt><a href=""><span>Newest<span class="icon"></span></span></a></dt>
  <dd>
    <ul style="display: none; ">
      <li><a href="/sydney" class="selected">Newest</a></li>
      <li><a href="/sydney/cheapest" class="">Cheapest</a></li>
      <li><a href="/sydney/popular" class="">Most Popular</a></li>
      <li><a href="/sydney/ending" class="">Ending Soon</a></li>
    </ul>
  </dd>
</dl>

CSS是（根据需要进行调整，显然需要创建图像）

.dropdown {
  position: relative;
  width: 200px;
}
.dropdown dt a {
  display: block; 
  border: 1px solid #A3CFE4; 
  color: #585858;
  background-color: #ececec;
  background-image: -moz-linear-gradient(center top, #fefefe, #e9e9e9);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e9e9e9));
  border-style: solid;
  border-color: #ccc;
  border-width: 1px;
  font-size: 11px;
  font-weight: bold;
  line-height: 11px;
  padding: 5px 0 6px 5px;
  text-shadow: 0 0 1px #fff; 
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
}
.dropdown dt a:hover {
  border-color: #b3b3b3;
  background-color: #d7d7d7;
  background-image: -moz-linear-gradient(center top, #f0f0f0, #dadada);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#dadada));
}
.dropdown dt a:active {
  color:#454545;
  background: #ccc;
  border-color: #bbb;
}
.dropdown dt a span {
  cursor: pointer; 
  padding: 4px 5px 5px;
}
.dropdown dt a span .icon {
  background: url(/images/dropdown-arrow.png) no-repeat scroll right center;
  width: 14px;
  height: 10px;
  padding-left: 15px;
}
.dropdown dd ul { 
  display: none;
  list-style: none; 
  position: absolute; 
  right: 0px; 
  top: 0px; 
  width: auto; 
  min-width: 170px;
  background: white;
  -webkit-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
  -moz-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
  box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 4px 0px;
  z-index: 100;
  font-size: 12px;
}
.dropdown dd ul li a { 
  padding: 2px 10px 2px 20px; 
  display: block;
  color: #333;
}
.dropdown dd ul li a:hover { 
  color: #fefefe;
  background: #3296df;
}
.dropdown dd ul li a.selected {
  background: url(/images/tick.png) left 7px no-repeat;
  font-weight: bold
}
.dropdown dd ul li a.selected:hover {
  background-color: #3296df;
  background-position: left -53px;
  color: #fefefe;
}

Javascript是：

$(document).ready(function (){
    $(".dropdown dt a").click(function(e) {
        e.preventDefault();
        $(this).parents(".dropdown").children("dd").children("ul").toggle();
    });

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });
});

这个是什么comboBox或dropDownList？

1 个答案: