js手機滑塊模仿

時間 2019-12-10

原文原文鏈接

點擊文本框滑動選值ide

手機屏幕上的上下翻滾菜單使用JS實現.通過十幾個小時的折磨,終於有了最第一版本.實現辦法以下描述:ui

一.要求和方法spa

1.一個input輸入框,點擊後彈出一個翻滾菜單蓋在其上,翻滾選好後,點擊肯定.所選值就到了文本框裏.
2.實現這個翻滾菜單使用以下辦法:一個菜單DIV,裏面是若干菜單項SPAN.菜單DIV設置有豎直滾動條,這樣就能滾動菜單項.
菜單DIV的上層,有個包裹層,主要做用是遮住菜單DIV的滾動條.包裹層上還有一層菜單框,用於包裹全部菜單DIV,操做它的顯示和隱藏能夠方便地打開關閉菜單.最後,INPUT 菜單框按鈕放到一個DIV裏.結構和主要設定以下:
div // 最外層包含全部 (相對定位)
input // 輸入框
button // 按鈕
div // 全部菜單外層 (相對定位,初始隱藏,長度設爲input長度稍大於它)
div // 菜單外層,爲遮菜單DIV滾動條(相對定位,超出隱藏,寬度百分比值等於100/菜單DIV個數)
div // 菜單面板層(滾動條,高度爲菜單項3倍)
span // 菜單,若干個(塊級)
........可有多個菜單面板
3.遮擋滾動條:實現過程當中,遮擋菜單DIV滾動條時費了很大勁.最終實現的辦法是:將菜單DIV的寬度設爲再加上它的滾動條的寬度. 這樣一來,上層就顯示不出多餘的滾動條了,"超出部分隱藏了".那又如何獲得菜單DIV寬度,和其滾動條寬度呢.這樣.
var scrollbarWidth = menuDiv.offsetWidth - menuDiv.scrollWidth;
意思是offsetWidth這個包含滾動條在內的寬度,減去scrollWidth這個包含滾動區域不包含滾動條的寬度.
而後將菜單DIV的width設爲offsetWidth加上上面得出的滾動條寬度值.就實現了
4.菜單出現位置:點擊以後,要讓它出如今INPUT的上層,左對齊,而且遮住INPUT.這主要是一個算TOP和LEFT的過程.它與INPUT同級,父級爲最外層DIV.這個要有相對定位屬性.後面是用JQUERY的position()獲取INPUT的位置的,若是不設的話就錯大了.TOP值好算,就是INPUT的outerHeight(),爲了蓋住INPUT,因此是負值,在前面加-號.
LEFT值和INPUT的左位移設置同樣.其實可設爲0,由於它們同級,且INPUT沒有定位(默認0).可是爲了讓菜單跟着 INPUT框移動,則有必要這種靈活的計算.
5.遮住文本框:在手機上點擊INPUT文本框時,出彈出手機上的輸入法.但目前並不須要這個輸入,因此不能讓它彈出來.解決辦法是不讓它點擊文本框,在文本框上加一個透明的層,大小和文本框同樣,恰好遮住.點擊時實際上點這一層.
orm