UI 積累之select section

需求

一個select下拉列表，有border, bg, 還有從設計拿來的向下的箭頭。當點擊的時候能有下拉列表。
大概UI以下

具體思路

須要的dom有三個

• div ----> 做用：定位置，設置背景樣式，包括border

• select ----> 做用：點擊時，彈出的下拉選項

• span -----> 做用：顯示字

dom具體是：

<div>
    <select>
    <span>
    <img>

實際上的思路是這樣的：select原來有個固有的下拉箭頭，想要讓它消失，方法有三種：一種擠出文檔流，一種擋住，另外一種則是讓select變成透明。

擠出文檔流作法有點噁心，不考慮

擋住的話，那就沒法作到點擊的時候出發select的點擊事件（除非用js）

因此，讓select變成透明。

要實現點擊，那麼實際上的dom層次由底到上依次是：div => span => select

因此須要設置z-index，給select設置z-index = 2, span 的z-index = 1

而後div設置relative, span和select設置absolute，讓二者重合

其中只有div有背景，span和 select都沒有背景且select的opacity設爲0（即透明）。

如今你知道了，

用戶看到背景顏色,border是div的， 看到的字是span的,點擊的是select，select透明，置於span之上

Talk is cheap, show me the code

這裏用了react的一個包，簡潔明瞭，有興趣能夠去了解下

const Selectsection = styled.div`
  position:relative;
  background:linear-gradient(#F8F8F8, #FDFDFD 30%, #E8E8E8);
  width:300px;
  height:30px;
  float:left;
  border:1px solid #ececec;
  border-radius:4px;
  margin:15px 0 0 15px;

  > select {
    width:300px;
    height:30px;
    padding-left: 15px;
    position:absolute;
    font: 14px Arial;
    z-index:2;
    opacity:0;
  }

  > span {
    width:300px;
    height:30px;
    position:absolute;
    text-align: left;
    font: 14px Arial;
    cursor: pointer;
    z-index:1;
    text-indent:20px;
    padding-top:6px;
  }

  > div {
    background:url(${arrow}) 0 0 no-repeat;
    width:24px;
    height:24px;
    position:absolute;
    top:7px;
    right:15px;
  }
`

class App extends Component {
  render() {
    return (
        <Selectsection>
            <select>
              <option>Please select one option...</option>
              <option>...</option>
              <option>...</option>
            </select>
            <span>Please select one option...</span>
            <div></div>
        </Selectsection>
    );
  }
}

export default App;

鞏固知識

背景顏色漸變

background:linear-gradient(#F8F8F8, #FDFDFD 30%, #E8E8E8);

設置背景顏色漸變---不再用切背景圖啦！mb當年bg_*.png這種圖真的切多了

雪碧圖

這裏沒有例子，可是作項目的時候遇到，具體是有一張圖，包含了「黑，灰，紅」三色的箭頭
具體長寬是(12+12+12 )*12，靠大家本身腦補了。

雪碧圖的運用在第四象限，即如上例，應用第一個箭頭，則建立一個div，長寬爲12*12，運用的樣式爲：

background:url(${arrow}) 0 0 no-repeat;

如要運用第二個箭頭，那麼運用的樣式爲：

background:url(${arrow}) 0 -24px no-repeat;

自行類推

另外一套方案

holy shit差點忘了俺本身的土村方法，不過挺有意思的。

dom仍舊是：

<div>
    <select>
    <span>
    <img>

不一樣在於，div沒有bg, border的功能，僅有做爲定位的功能，bg, border移到span中去，即

• div ----> 做用：定位置

• select ----> 做用：點擊時，彈出的下拉選項

• span -----> 做用：顯示字，設置bg, border樣式

那麼會問了，span在前，你點擊的時候，點的是span而不是selet，那麼如何在不適用js的狀況下，出發用戶click select的效果呢？

這裏有個樣式：

pointer-events:none;

將這個樣式apply給span，同時span與select徹底貼合覆蓋（width, height, 字體大小, indent），當點擊span的時候，就會穿透點擊select