javascript - 这是什么 comboBox 或 dropDownList？

Question

我想创建一个类似的组合框或下拉列表，当单击下一页右侧的“黄金海岸”或“最新”按钮时，包含选择项的框会弹出:

• > Deal Zoo

它看起来非常漂亮，我想知道从哪里获得 Javascript 或 ASP .Net 组件？

Answer 1

我是 Deal Zoo 的创建者。很高兴帮助您解决下拉样式问题。它结合了 javascript/jquery、css 和普通的 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();
    });
});