實用的兩個移動端demo

今天看了兩個挺好的移動端demo，記錄一下

一.文本截取

實現的樣式是這樣的，以下圖：

看上去是有些醜陋，簡要說明一下，實現功能是文字顯示兩行，超出部分截掉，用三個點代替，後面還有一個更多的圖標（只是用了>代替啦～～），你能夠把他想象一張很完美的效果圖～～

首先說一下思路，實現方法比較巧妙，主要使用僞元素after和before的content: attr(attribute-name)

1.前面用:bofore控制前面的文字，最後一行文字使用:after控制

2.使用felx-box的-webkit-line-clamp控制顯示文字行數

3.使用text-indent以及padding-right 留出`更多`的圖標

4.使用字體顏色以及背景顏色進行一系列字體掩蓋

具體的請看代碼註釋～

代碼實現：

html代碼以下：

<!--div裏要有全部內容，以撐開容器大小，title屬性值能夠根據顯示行數適當減小-->
<!--i裏面是更多的圖標，這裏只是簡單的代替-->
<div class="js-toggle-box lastline-space-ellipsis" title="思路很簡單：因爲控件所對應的label元素是能夠點擊並切換控件狀態的">
    <div class="expend-box">
        思路很簡單：因爲控件所對應的label元素是能夠點擊並切換控件狀態的，而label元素的樣式又能夠自由設定，所以咱們可將input元素隱藏，經過label元素實現交互。
        <i class="right-row"> > </i>
    <div>
</div>

css代碼以下：

.lastline-space-ellipsis {
    width: 200px;
    position: relative;
    max-height: 40px;       /* 最大高度 = line-height * 顯示的行數  */
    line-height: 20px;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;  /*避免出現過長的英文單詞*/
    color: #fff;            /* 同背景顏色相同，將容器內的字體掩藏 */
    border: 1px solid red;
}


.lastline-space-ellipsis:after,
.lastline-space-ellipsis:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    content: attr(title);    /* 使用content獲取title屬性值 */
    color: #333;             /* 字體顏色 */
}
.lastline-space-ellipsis:before {
    display: block;
    overflow: hidden;
    z-index: 1;
    max-height: 20px;        /* (顯示的行數 － 1) * line-height */
    background-color: #fff;  /* 與背景顏色相同 */
}
.lastline-space-ellipsis:after {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-sizing: border-box;
    -webkit-line-clamp: 2;   /* 顯示行數 */
    text-indent: -1em;       /* 如下是讓文字縮進1個字符留出空白部分 */
    padding-right: 1em;
}
.expend-box {
    max-height: 40px;       /* 顯示的行數 * line-height */
    position: relative;
}
.right-row {                /* 調整圖標的位置、大小 */
    background-size: cover;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 7px;
    right: 2px;
    color: #333;
}

若是想還要實現點擊顯示更多出現全部文字，只要控制lastline-space-ellipsis類名就行了，可是用js判斷當前狀態時，要根據高度進行判斷。

缺點：如今我能感覺到的缺點就是title值過長，但感受這徹底能夠忽略。

此方法參考自AlloyTeam：http://www.alloyteam.com/2015/10/usage-of-content-attibute-of-pseudo-elements/

二 . 用純css實現開關按鈕

 實現效果以下圖：

html代碼以下：

<input type="checkbox" id="checkbox" class="checkbox"/>
<div class="checkbox-wrapper">
    <label for="checkbox" class="checkbox-label"></label>
</div>

css代碼以下：

.checkbox-wrapper {
    position: relative;
    width: 80px;
    height: 32px;
    overflow: hidden;
}
.checkbox {
    display: none;
}
.checkbox-label::before,
.checkbox-label::after {
    position: absolute;
    line-height: 32px;
    height: 32px;
    width: 40px;
    font-family: sans-serif;
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.checkbox-label::before {
    content: 'ON';
    left: -40px;
    background: #45b6af;
}
.checkbox-label::after {
    content: 'OFF';
    right: -40px;
    background: #f3565d;
}
.checkbox-label {
    display: block;
    position: absolute;
    left: 0;
    width: 40px;
    height: 32px;
    transition: all .4s ease;
    cursor: pointer;
    background: #dddddd;
}
.checkbox:checked + .checkbox-wrapper .checkbox-label {
    left: 40px;
}

說實話之前一直認爲實現這種樣式的好高大上，結果後來發現。。。。嘿嘿～

強大的還有許多，須要我慢慢積累～今天就這樣了！