jQuery和css3超讚select下拉選單框美化外掛

skonw發表於2024-12-06
jQueryCSSS3

這是一款效果超讚的jQuery和css3 select下拉選單框美化外掛。這個select下拉選單框外掛沒有使用任何的圖片，純css製作，還使用了一點jQuery來完成動作互動。

線上演示 下載

有兩個地方需要做下說明：

  • 下面的程式碼中沒有使用任何廠商的字首。
  • 在外掛中使用了CSS盒子模式（box-model）： [width] = [element-width] + [padding] + [borders]。看下面程式碼：
*,
*:after,
*:before {
box-sizing: border-box;
}

HTML結構

首先要了解我們的select下拉選單框的html結構是怎麼樣的。我們使用的結構是一個div做wrapper，裡面有一個span和一個無序列表。

<div class="wrapper-dropdown">
<span>I'm kinda the label!</span>
<ul class="dropdown">
<li>I'm hidden!</li>
<li>Me too!</li>
<li>So do I.</li>
</ul>
</div>

JAVASCRIPT

我們需要一些js程式碼來使select下拉選單框能正常工作，下面的js程式碼是所有的demo都使用的程式碼：

//...
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
//...
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-1').removeClass('active');
});
});

在上面的程式碼中，當你點選了wrapper時，它會切換class為.active。如果wrapper已經處於啟用狀態，它會移除class .active。

另外，如果你在下拉選單框外任何地方點選，都會關閉下拉選單框。

EXAMPLE 1

下面來看一些第一個demo的程式碼：

HTML

在第一個demo中，我們需要一個wrapper div，一個隱藏的下拉選單，還有一個在span中的“label”。

<div id="dd" class="wrapper-dropdown-1" tabindex="1">
<span>Gender</span>
<ul class="dropdown">
<li><a href="#">Male</a></li>
<li><a href="#">Female</a></li>
</ul>
</div>
CSS

首先從wrapper開始：

.wrapper-dropdown {
/* Size and position */
position: relative; /* Enable absolute positioning for children and pseudo elements */
width: 200px;
padding: 10px;
margin: 0 auto;
/* Styles */
background: #9bc7de;
color: #fff;
outline: none;
cursor: pointer;
/* Font settings */
font-weight: bold;
}

在"label"上透過偽元素來新增小箭頭：

.wrapper-dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-style: solid;
border-color: transparent #fff;
}

下面是下拉選單的樣式

.wrapper-dropdown-1 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0; /* Size */
right: 0; /* Size */
/* Styles */
background: #fff;
font-weight: normal; /* Overwrites previous font-weight: bold; */
/* Hiding */
opacity: 0;
pointer-events: none;
}

再來給下拉選單中的元素一些樣式

.wrapper-dropdown-1 .dropdown li a {
display: block;
text-decoration: none;
color: #9e9e9e;
padding: 10px 20px;
}
/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
background: #f3f8f8;
}

透過上面的CSS，我們有了一個很好看的按鈕和一個隱藏的下拉選單。下面要處理的是當點選了下拉選單主按鈕時，下拉選單框展開出現的效果。

我們使用javascript來在點選按鈕時切換class.active。

/* Active state */
.wrapper-dropdown-1.active .dropdown {
opacity: 1;
pointer-events: auto;
}
.wrapper-dropdown-1.active:after {
border-color: #9bc7de transparent;
border-width: 6px 6px 0 6px ;
margin-top: -3px;
}
.wrapper-dropdown-1.active {
background: #9bc7de;
background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
}

這裡要注意三個地方：

  • 1、我們使用將透明度設定為1是下拉選單框出現。這裡不要忘記設定pointer-event 為auto。
  • 2、我們改變了小箭頭的方向和顏色。
  • 3、我們使用一個漸變來修改了箭頭羨慕的背景色。
JAVASCRIPT

我們還需要javascript來顯示下拉選單項的值

function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text('Gender: ' + obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}

第一個demo的程式碼就這麼多，其餘幾個demo的程式碼請參考下載檔案。

FALLBACKS

為了相容所有的瀏覽器，這個外掛中做了一些回退處理。我們使用的是 Modernizr。Modernizr是一個用於檢測使用者瀏覽器是否支援html5和css3的javascript庫，他的基本思想是“如果瀏覽器不支援XXX，那麼我們就這樣這樣做。。。”。透過Modernizr，我們能為html新增class，例如：如果瀏覽器不支援 pointer-events ，就新增一個“no-pointerevents”的class。下面的例子說明了我們在瀏覽器不支援某些屬性時，如何管理我們的回退程式碼：

/* No CSS3 support */
.no-opacity .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown {
display: block;
}

如果瀏覽器不支援透明度或pointer-events，那麼簡單的將下拉選單框隱藏：display: none;。

如果瀏覽器支援透明度但是不支援pointer-events，在使用者點選選單時，我們將他們設定為auto，以使選單展開。

另外，如果瀏覽器支援pointer-events但不支援透明度，我們設定透明度為1來使下拉選單在切換為.active是立刻出現。

當.active被切換時，我們使用display: block;來顯示下拉選單框。

相關文章