使用 Flex
HTML
CSS
Example
See the Pen
CSS ul li Horizontal center – flex by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
https://wcc723.github.io/css/2017/07/21/css-flex/
[……]
HTML
CSS
Example
See the Pen
CSS ul li Horizontal center – flex by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
https://wcc723.github.io/css/2017/07/21/css-flex/
[……]
這是目前我認為最簡單的方法,最下方可以看到Example,特別加上一點特效
See the Pen
CSS ul li horizontal align center by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
[……]
今天在開發一個表單程式,表單一直無法發送,開始來找問題,開啟 Chrome 開發者工具,在 Console 面板中,每送出一次表單,就會出現一個這個訊息:
An invalid form control with name=’…’ is not focusable
也對拉!! 必填欄位又隱藏起來,怎麼填? 表單送出前會做一個簡單的表單驗證
這樣也不行:
<input type="text" style="display:none" required>
這樣當然也不行:
<input type="text" id="example" required> <script> $('#example').hide(); </script>
這樣可以:
大概是原本就是隱藏欄位了,所以沒有特別去驗證
<input type="hidden" required>
開發者會去隱藏欄位當然是有原因的,有時候會因為條件判斷而顯示不同輸入欄位,例如:居住地下拉選單,但使用者可能住於國外,所以表單設計在下拉選單尾端加一個”海外”的選項,選擇了海外,就出現一個自行輸入的文字欄位,像這樣的需求其實蠻常見的,這些輸入欄位通常都只是隱藏起來,依照判斷來顯示,這種欄位當然有可能顯示出來就是必填,下方介紹幾個解決方法來解決這個問題。
在 form 屬性加上 novalidate,關閉預設的表單驗證,表單內的所有欄位都不會進行驗證,除非有其他方式進行表單驗證,不然不建議這麼做。
<form novalidate> <input type="text" id="example" style="display:none" required> <input type="submit" value="submit"> </form>
在顯示的時候,再加上 required,如此,不管隱藏的文字欄位顯示與否,表單都可以正確送出,文字欄位顯示時,就必須填寫。
<form> <input type="text" id="example" style="display:none"> <input type="submit" value="submit"> </form> <hr> <input type="button" id="show" value="show"> <script> $('#show').click(function(e){ $('#example').css('display','block').prop('required',true);; }); </script>
這是一個簡單的提示,實務上的做法就看大家如何發揮創意了
[……]
在PHP中或某些語言中,可以在迴圈中使用 continue 及 break 來進行更靈活的迴圈
在 jQuery 中迴圈是用 $.each(),但使用 continue 及 break 是不起作用的,可改用下列替代方式,可以達成相同目的。
$.each(data, function(index, obj){ if ($(img).empty()) { return; // 等於 continue } else { return false; // 等於 break } });
[……]
終於是等到這個功能了,CSS3增加了Calc()這個function進行數值運算,大部分用於容器寬度或高度的計算,這讓CSS的開發更快、靈活度更高並增加重複使用的可能性,Calc()還有一個很棒的優點,可以針對不同單位進行運算。
+
加
–
減
*
乘
/
除
下方範例可以得到欄位寬度,可用來製作自己的網格系統
.column-1 { width: calc( 100% / 1); } .column-2 { width: calc( 100% / 2); } .column-3 { width: calc( 100% / 3); }
#element1 { width: calc(50% - 2em); }
[……]
在 jQuery 是使用 :eq(2) ,雖然jQuery跟CSS選取器(selector)有很多相似之處,但還是有些差異,在CSS中要在重複元素中獲取一個元素是用偽類 :nth-child(2)
<div> <div id="bar1" class="foo">banana</div> <div id="bar2" class="foo">Apple</div> <div id="bar3" class="foo">Orange</div> </div>
#bar2{ color:red; } div.foo:nth-child(2){ color:red; } .foo:nth-child(2){ color:red; }
除了:nth-child()還有其他用在取得元素的偽類,都很常用到優
[……]
這作法雖有違背行動優先的概念,但我實務上遇到比較多還是先做電腦版,再依照電腦版樣式改成手機版本,概念歸概念,能能解決問題的就是好方法,提供大家參考
介紹完我常用的斷點,也介紹一下比較正規的做法,下列這就是行動優先下的響應式斷點,先決定手機版樣式,再針對平板或電腦的樣式進行調整
https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
這是Bootstrap定義的斷點
https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
Refrence: https://v123.tw/wordpress-elementor-css-breakpoint/
[……]
jQuery 並沒有 .hasAttr() 用於判斷某一屬性是否存在,所以透過下面代碼來檢查
此代碼優點在於可檢查屬性是否存在,並檢查是否為空值
/** * VECTOR COOL * https://vector.cool */ var attr = $(this).attr(‘name’); if (attr && attr !== false) { // Element has this attribute }
[……]
<form id="contact">
<input name="user[email]" value="jsmith@example.com">
<input name="user[pets][]" type="checkbox" value="cat" checked>
<input name="user[pets][]" type="checkbox" value="dog" checked>
<input name="user[pets][]" type="checkbox" value="bird">
<input type="submit">
</form>
$('form#contact').serializeObject();
//=> {user: {email: "jsmith@example.com", pets: ["cat", "dog"]}}
$('form#contact').serializeJSON();
//=> '{"user":{"email":"jsmith@example.com","pets":["cat","dog"]}}
'
[……]