標籤: UI

CSS ul li 水平居中 only CSS

2020 WordPress 精選主題

這是目前我認為最簡單的方法，最下方可以看到Example，特別加上一點特效

HTML

CSS

See the Pen
CSS ul li horizontal align center by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

[……]

閱讀更多

Fix An invalid form control with name=’…’ is not focusable

2020 WordPress 精選主題

今天在開發一個表單程式，表單一直無法發送，開始來找問題，開啟 Chrome 開發者工具，在 Console 面板中，每送出一次表單，就會出現一個這個訊息：

An invalid form control with name=’…’ is not focusable

原因是 Chrome 阻止設定為 required 的欄位隱藏

也對拉!! 必填欄位又隱藏起來，怎麼填？ 表單送出前會做一個簡單的表單驗證

這樣也不行：

<input type="text" style="display:none" required>

這樣當然也不行：

<input type="text" id="example" required>
<script>
	$('#example').hide();
</script>

這樣可以：

大概是原本就是隱藏欄位了，所以沒有特別去驗證

<input type="hidden" required>

解決方法：

開發者會去隱藏欄位當然是有原因的，有時候會因為條件判斷而顯示不同輸入欄位，例如：居住地下拉選單，但使用者可能住於國外，所以表單設計在下拉選單尾端加一個”海外”的選項，選擇了海外，就出現一個自行輸入的文字欄位，像這樣的需求其實蠻常見的，這些輸入欄位通常都只是隱藏起來，依照判斷來顯示，這種欄位當然有可能顯示出來就是必填，下方介紹幾個解決方法來解決這個問題。

novalidate

在 form 屬性加上 novalidate，關閉預設的表單驗證，表單內的所有欄位都不會進行驗證，除非有其他方式進行表單驗證，不然不建議這麼做。

<form novalidate>
    <input type="text" id="example" style="display:none" required>
    <input type="submit" value="submit">
</form>

jQuery prop(‘required’,true)

在顯示的時候，再加上 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>

這是一個簡單的提示，實務上的做法就看大家如何發揮創意了

 [……]

閱讀更多

jQuery $.each 迴圈 continue 與 break 替代方式

2020 WordPress 精選主題

在PHP中或某些語言中，可以在迴圈中使用 continue 及 break 來進行更靈活的迴圈

  • continue ：跳過目前動作，繼續執行迴圈的下一個動作
  • break：跳出迴圈，停止迴圈之後的動作

在 jQuery 中迴圈是用 $.each()，但使用 continue 及 break 是不起作用的，可改用下列替代方式，可以達成相同目的。

 
$.each(data, function(index, obj){

    if ($(img).empty()) {

        return; // 等於 continue

    } else {

        return false; // 等於 break

    }

});

[……]

閱讀更多

CSS Calc運算

2020 WordPress 精選主題

終於是等到這個功能了，CSS3增加了Calc()這個function進行數值運算，大部分用於容器寬度或高度的計算，這讓CSS的開發更快、靈活度更高並增加重複使用的可能性，Calc()還有一個很棒的優點，可以針對不同單位進行運算。

支援運算：

+
加

–
減

*
乘

/
除

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);
}

參考資料：

[……]

閱讀更多

CSS get an element use :nth-child() not :eq()

2020 WordPress 精選主題

用 index 在重複元素中獲取一個元素

在 jQuery 是使用 :eq(2) ，雖然jQuery跟CSS選取器(selector)有很多相似之處，但還是有些差異，在CSS中要在重複元素中獲取一個元素是用偽類 :nth-child(2)

比如說我要指定定Apple 的樣式為紅色：

<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()還有其他用在取得元素的偽類，都很常用到優

  • :first-child
  • :second-child
  • :third-child
  • :last-child
  • :nth-child

參考資料：

[……]

閱讀更多

jQuery 確認是否擁有某一標籤屬性

2020 WordPress 精選主題

jQuery 並沒有 .hasAttr() 用於判斷某一屬性是否存在，所以透過下面代碼來檢查

此代碼優點在於可檢查屬性是否存在，並檢查是否為空值

/**
* VECTOR COOL
* https://vector.cool
*/
var attr = $(this).attr(‘name’);
if (attr && attr !== false) {
// Element has this attribute
}

 

 [……]

閱讀更多

jQuery Form data to Object

2020 WordPress 精選主題

jQuery Serialize Object

取得所有表單資料，目前試過唯一能轉多維表單物件的，使用簡單，找到感覺得救了
Form data to Object jQuery

Example：

<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"]}}
'

[……]

閱讀更多