摘要:就是說,當(dāng)用戶選擇該標(biāo)簽時,瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。所以在和移動我分別用了兩種方案,傳統(tǒng)布局實現(xiàn),彈性盒實現(xiàn)。前者是控制彈性盒的內(nèi)容垂直方向居中,后者控制內(nèi)容水平方向居中。
之前寫過兩篇開發(fā)中遇到的問題和解決方案。當(dāng)時是CSS 和 JavaScript 分開寫的。現(xiàn)在寫這篇文章的時候感覺很多內(nèi)容都是有內(nèi)在聯(lián)系的,所以不好分開。
給大家分享一下這半年來的感受吧:
知道和理解之間是有很大距離的。別人談到一個知識點,能接上嘴并且能發(fā)表一下自己的意見,這叫知道。遇到問題能夠想到用什么知識點解決問題,這叫理解。
所以有很多知識點自己確實在書上都看到過但是在平時遇到問題的時候卻不知道怎么去用或者說想到去用,有時候會有同事給一下指導(dǎo)說用什么解決問題。關(guān)鍵時候還是多看(看書,看別人的代碼)和多用。
1.display:none; 和 visibility:hidden;的區(qū)別display:none 關(guān)閉一個元素的顯示(對布局沒有影響);其所有后代元素都也被會被關(guān)閉顯示。文檔渲染時,該元素如同不存在。(不會顯示在文檔流中的位置,但是 DOM 節(jié)點仍會出現(xiàn)在文檔流中)
visibility:hidden visibility屬性讓你能夠控制一個圖形元素的可見性,但是仍會占用顯示時候在文檔流中的位置。
使用 display:none 的時候雖然元素不會顯示,但是DOM 節(jié)點仍會出現(xiàn),所以我們就可以使用選擇器對該元素進行操作。如下圖中的示例:
2.事件冒泡引發(fā)的問題這個問題是發(fā)生在自己上篇文章《h5端呼起攝像頭掃描二維碼并解析》中的。詳細的代碼可以看那篇文章。
問題發(fā)生的場景先看一段html 代碼:
掃描二維碼1
之前我的想法是這個樣子的:
1.我先觸發(fā)qr-btn的 click 事件,在回調(diào)中觸發(fā) input 的 click 事件click 事件
2.然后觸發(fā) input 的 change 事件,獲取上傳圖片的信息。
按照我的思路代碼應(yīng)該是下面的這個樣子的
//點擊父級元素的事件 $(".qr-btn").bind("click",function(){ //觸發(fā)子元素的事件 $("[node-type=jsbridge]").trigger("click"); }); $("[node-type=jsbridge]").bind("change",function(){ //做一些事情 });
上面的代碼,按照正常的思路應(yīng)該是沒有問題的,但是,在實際的運行過程中卻發(fā)生了問題。瀏覽器的報錯信息如下:
這是因為堆棧溢出的問題。那么為什么會出現(xiàn)這樣的問題呢?我把斷點打在了以下的位置,然后點擊子元素
發(fā)生的情況是:代碼無限次的觸發(fā)$(".qr-btn").bind(...) ,就出現(xiàn)了上面的報錯信息。那么是什么原因?qū)е碌哪兀?br>思考一下發(fā)現(xiàn):是因為事件冒泡的問題。我單擊父元素觸發(fā)子元素的 click 事件,子元素的 click 事件又冒泡到父元素上,觸發(fā)父元素的 click 事件,然后父元素再次觸發(fā)了子元素的 click 事件,這就造成了事件的循環(huán)。
問題解決辦法:嘗試阻止事件的冒泡,看能夠解決問題?
那我們嘗試在觸發(fā)子元素的click的時候,嘗試組織子元素的冒泡,看能否解決我的問題?添加如下的代碼:
$("[node-type=jsbridge]").bind("click",function(e){ // console.log(e.type); e.stopPropagation(); });
經(jīng)過我的測試,代碼是能夠正常的運行的。
那么我們有沒有更好的方法來解決上面的問題呢?請看接下來的內(nèi)容
3.lable標(biāo)簽的 for 屬性先來看 lable 標(biāo)簽的定義:
標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)記)。
label 元素不會向用戶呈現(xiàn)任何特殊效果。不過,它為鼠標(biāo)用戶改進了可用性。如果您在 label 元素內(nèi)點擊文本,就會觸發(fā)此控件。就是說,當(dāng)用戶選擇該標(biāo)簽時,瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
看想一下 w3school 的示例代碼和效果:
效果如下圖:
到這里應(yīng)該之道我們該怎么改進我們的代碼了,
掃描二維碼1
除了 lable 標(biāo)簽的樣式我們自己需要自己定義外,還有兩個優(yōu)點:
減少了 JavaScript 的書寫;
lable 標(biāo)簽和 input 標(biāo)簽沒有必要是包含關(guān)系
4.“彈層盒”布局和普通盒模型布局的優(yōu)缺點對比最近做了一個抽獎的活動,其中就有一個輪盤的旋轉(zhuǎn)的動畫效果(注意啦,中間的那個卡頓是 gif 圖片又重新開始播放了)。,效果如下圖:
關(guān)于動畫實現(xiàn)在下一篇文章中會繼續(xù)介紹,這里主要來關(guān)注下布局的問題。因為我們頁面會在 pc 和移動移動各出一套。所以在 pc 和移動我分別用了兩種方案,pc 傳統(tǒng)布局實現(xiàn),h5 "彈性盒"實現(xiàn)。
1.彈性盒實現(xiàn)九宮格外圍的那些燈是使用絕對定位來做的,就不過過多的介紹,主要的是看中間的獎品九宮格的部分。html 代碼如下:
mac pro掃地機器人iphone6s20積分優(yōu)惠券ps4猴年限定
公仔祝福紅包
css代碼如下:
.re-middle { position: absolute; width: 28.3rem; height: 16rem; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #f69f75; color: #ffdece; font-size: 1.8rem; } .row-a, .row-b, .row-c { height: 5.3rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .row-a div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; line-height: 5.3rem; background-color: #f69f75; }
由上面的 css 代碼可以看出來我僅僅是在水平方向上使用了“彈性盒”,而在豎直的方向上,還是使用了固定高度(因為我是用的 rem 單位,這里的固定也是不準(zhǔn)確的,高度會根據(jù) fontsize 值進行計算。)
那么可不可以在豎直和水平都是用“彈性盒”呢?
來看一下下面的css代碼:
.re-middle { position: absolute; width: 28.3rem; height: 16rem; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #f69f75; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; color: #ffdece; font-size: 1.8rem; } .row-a, .row-b, .row-c { /*height: 5.3rem;*/ -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .row-a div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; line-height: 5.3rem; background-color: #f69f75; /*position: relative;*/ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; }
周末的時候關(guān)于這個布局自己又翻書看了下“彈性盒”的文檔,終于實現(xiàn)了在豎直和垂直方向上都實現(xiàn)內(nèi)容的水平垂直居中內(nèi)部元素。其實上面的代碼只需要把內(nèi)容的父級元素再次定義為display:flex 再添加兩個屬性 justify-content和align-items就可以了。前者是控制彈性盒的內(nèi)容垂直方向居中,后者控制內(nèi)容水平方向居中。
詳細代碼如下:
.row-a div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border: 1px solid #000; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }2.傳統(tǒng)方式實現(xiàn)
與 h5 端相比,我在 pc 端的實現(xiàn)是傳統(tǒng)的浮動方式.我的 HTML 代碼如下:
mac pro祝福紅包iphone 6s優(yōu)惠券20積分掃地機器人猴年限定公仔
ps4
css 代碼如下:
.re-middle { background-color: #f89f71; width: 530px; height: 320px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .row-a, .row-b, .row-c { /*height: 106px;*/ font-size: 0; overflow: hidden; } .row-a > div, .row-c > div { float: left; width: 176px; height: 106px; text-align: center; } .row-b div { float: left; width: 176px; height: 106px; text-align: center; line-height: 106px; background-color: #f69f75; }
由上面的 css 代碼對比看我們可以顯然看出傳統(tǒng)的浮動方式的布局和“彈性盒”布局的一些優(yōu)缺點:
float布局代碼簡潔,但是必須確定的指定盒子的寬度和高度,多屏幕的適配上會差一些(rem動態(tài)計算除外)。
“彈性盒”布局代碼使用新的 css3屬性,需要添加額外的廠商前綴,增加了代碼的復(fù)雜度(添加廠商前綴可以使用 sublime 插件,一鍵完成,推薦我的文章 前端開發(fā)工程師的 sublime 配置)
“彈性盒”為多屏幕的適配提供了便利性。我不用去關(guān)心子元素的寬度和高度是多少,或者是屏幕的寬度是多少,都會根據(jù)實際請款flex自身會去適配。
遇到的一個小問題,多行文本的處置居中:
這個九宮格內(nèi)的文本元素,如果只是單行的話,只要使用 line-height 就可以解決問題,但是如果多行呢?會出什么情況呢,看下圖:
所以這里只能考慮不使用 line-height,使用 padding 來解決問題 ,嘗試padding后的效果。如下圖:
可以看到容器的下面多出了一部分。那也是我們使用的padding的問題,那么怎么解決這個問題呢?這就要用到之前提到過的box-sizing來解決問題。
.row-c-sec { color: #ffdece; font-size: 30px; padding-top: 17px; background-color: #f69f75; /*使容器的高=內(nèi)容高度+padding +border*/ box-sizing: border-box; }5.按鈕多次提交的解決方案
在做“跑馬燈”插件的時候遇到了一個問題,就是用戶點擊開始抽獎按鈕以后在還沒有返回結(jié)果的時候用戶又第二次點擊抽獎按鈕,那個時候機會出現(xiàn)“奇葩”的問題。比如說:第一次請求和第二次請求重合返回的結(jié)果顯示哪一個,就算允許用戶進行二次抽獎,交互也不友好。而且如果前端頁面不做限制的話,顯示也會出現(xiàn)奇葩的問題。比如下面這樣:
這樣是不是很糟糕啊。。。
那么我是怎么解決這個問題呢?
答案很簡單,我就是在點擊按鈕之后,使用絕對定位彈起了一個透明的彈層,將按鈕給覆蓋,等結(jié)果返回并顯示以后,我在同時去掉彈層。這樣就避免了用戶的重復(fù)提交。詳細看一下代碼:
.cover-layer{ width:100%; height:100%; top:0; position:absolute; z-index:9999; }
這里保證我的這個透明的彈層能夠覆蓋在抽獎按鈕的上面。當(dāng)然這個class 是我通過JavaScript 動態(tài)的添加和刪除的。
$(node).on("clcik",".reward-btn",function(){ //呼起彈層 $("[node-type=cover_layer]",node).addClass("cover-layer"); ..... //返回結(jié)果以后去掉彈層 $("[node-type=cover_layer]",node).removeClass("cover-layer"); ..... });
這次的分享就到這里,下一次會分享“輪盤”抽獎效果的 JavaScript 開發(fā)過程。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/49723.html
摘要:實戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配,不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格,實際上是你將一個元素聲明為一個網(wǎng)格容器,并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...
摘要:就是說,當(dāng)用戶選擇該標(biāo)簽時,瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。所以在和移動我分別用了兩種方案,傳統(tǒng)布局實現(xiàn),彈性盒實現(xiàn)。前者是控制彈性盒的內(nèi)容垂直方向居中,后者控制內(nèi)容水平方向居中。 之前寫過兩篇開發(fā)中遇到的問題和解決方案。當(dāng)時是CSS 和 JavaScript 分開寫的。現(xiàn)在寫這篇文章的時候感覺很多內(nèi)容都是有內(nèi)在聯(lián)系的,所以不好分開。...
摘要:就是說,當(dāng)用戶選擇該標(biāo)簽時,瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。所以在和移動我分別用了兩種方案,傳統(tǒng)布局實現(xiàn),彈性盒實現(xiàn)。前者是控制彈性盒的內(nèi)容垂直方向居中,后者控制內(nèi)容水平方向居中。 之前寫過兩篇開發(fā)中遇到的問題和解決方案。當(dāng)時是CSS 和 JavaScript 分開寫的。現(xiàn)在寫這篇文章的時候感覺很多內(nèi)容都是有內(nèi)在聯(lián)系的,所以不好分開。...
摘要:主要原因是除了安卓和系統(tǒng)的寫法不同外,不同系統(tǒng)版本寫法也不同。在安卓上是默認不開啟想磁盤寫文件的權(quán)限的。最好維護一個系統(tǒng)無法正常推起輸入框的軟件列表可以通過的來獲取軟件的唯一標(biāo)識。 前言: 看了下博客的更新時間,發(fā)現(xiàn)9月份一篇也沒有更新。一直想著都要抽時間寫一篇的,不然今年的更新記錄就會斷在了9月份。但是還是應(yīng)為各種各樣的事情給耽擱了。當(dāng)內(nèi)心突然涌起一股必須寫點什么的時候,突然發(fā)現(xiàn)自己...
閱讀 2537·2021-11-24 10:20
閱讀 2385·2021-09-10 10:51
閱讀 3370·2021-09-06 15:02
閱讀 3105·2019-08-30 15:55
閱讀 2835·2019-08-29 18:34
閱讀 3070·2019-08-29 12:14
閱讀 1206·2019-08-26 13:53
閱讀 2916·2019-08-26 13:43