jQuery clone element and events

jQuery 一般情況下,利用 clone() 來複製元素,但是複製元素後,並沒有複製原本元素綁定的事件及數據,這點有點困擾,之前是在Clone之後,重新綁定事件,但這樣會變得很麻煩,也會讓程式碼變得很亂,在 jQuery 1.4 以後 clone() 加了一個貼心的功能,可以在複製的時候選擇要不要連事件及數據一起複製。

Demo 程式如下:

這是一個簡單的範例,在按鈕上綁定一個click事件,點擊按鈕開啟警告窗

這示例程式,當我們點擊 “Clone” 這按鈕,會複製一個上方的 “Click Me”按鈕,當我們點下新產生的 “Click Me”按鈕並沒有任何反應,代表並沒有複製到原本元素綁定的事件及數據。

See the Pen jQuery clone element by VECTOR.cool
(@ann71727) on CodePen.

接著我們看下方程式碼,用相同動作,原本的 “Click Me” 按鈕及新複製出的 “Click Me” 按鈕,都可以正常運行綁定事件,換而言之,事件成功被複製,如此就不用重新綁定,非常省事呢!

See the Pen jQuery clone element and events by VECTOR.cool
(@ann71727) on CodePen.

這兩段程式碼其中只差異在這一行

在 clone 中帶入 true,即代表複製綁定事件及數據,預設情況下是 false,詳細可參考 jQuery 的技術文件

https://api.jquery.com/clone/

[……]

閱讀更多

上午 12:00 、 下午12:00 到底是幾點?? 12時24時制對照表

12 時制,是沒有00:00分的,真是容易搞混

對照表如下:

24小時制
12小時制

00:00
上午 12:00

01:00
上午 01:00

02:00
上午 02:00

03:00
上午 03:00

04:00
上午 04:00

05:00
上午 05:00

06:00
上午 06:00

07:00
上午 07:00

08:00
上午 08:00

09:00
上午 09:00

10:00
上午 10:00

11:00
上午 11:00

12:00
中午 12:00

13:00
下午 01:00

14:00
下午 02:00

15:00
下午 03:00

16:00
下午 04:00

17:00
下午 05:00

18:00
下午 06:00

19:00
下午 07:00

20:00
下午 08:00

21:00
下午 09:00

22:00
下午 10:00

23:00
下午 11:00

24:00
上午 12:00[……]

閱讀更多

綠界ECPay測試信用卡號、WebATM,模擬付款

綠界科技ECPay 網路金流

綠界科技ECPay提供多元付費方式,包含信用卡、超商付費、WebATM等,也提供物流服務,解決自助電商自動收款的難題。

綠界科技很貼心的在系統整合階段時,提供模擬環境,可以模擬付費,以便測試系統是否可以正常運行,以下提供,模擬信用卡,及WebATM資訊。

信用卡

卡號 : 4311-9522-2222-2222

有效年月 : 大於當前日期

安全碼 : 222

WebATM

選擇台新銀行進行模擬付款即可

參考:
https://www.ecpay.com.tw/CascadeFAQ/CascadeFAQ_Qa?nID=1193[……]

閱讀更多

HTML5的lang速查 ( 注意:繁體中文不是zh-TW喔 )

在HTML5的<html>中可增加lang=來標註網頁的語系,讓瀏覽器能更正確的解析與編碼,但從XHTML 1.0以來lang=???就不斷演進中,而在HTML5的時代究竟要怎麼定義?

目前最主要的規範是依照IETF(Internet Engineering Task Force 國際網路工程研究團隊)的RFC 4646 的Tags for Identifying Languages所定義。它的要求為 language-script-region-variant-extension-privateuse 就是 語言 – 字體 – 地區 – 方言 – 特殊附加資訊。

以台灣繁體中文標示即為zh-Hant-TW 不是以往認知的zh-tw囉

使用範例:

<!DOCTYPE html> 
<html  lang="zh-Hant-TW">
  <head>
    <title>page title</title>
  </head> 
  <body>
  </body>
</html>

速查表:

zh-Hans
簡體中文

zh-Hans-CN
大陸地區使用的簡體中文

zh-Hans-HK
香港地區使用的簡體中文

zh-Hans-MO
澳門使用的簡體中文

zh-Hans-SG
新加坡使用的簡體中文

zh-Hans-TW
臺灣使用的簡體中文

zh-Hant
繁體中文

zh-Hant-CN
大陸地區使用的繁體中文

zh-Hant-HK
香港地區使用的繁體中文

zh-Hant-MO
澳門使用的繁體中文

zh-Hant-SG
新加坡使用的繁體中文

zh-Hant-TW
臺灣使用的繁體中文

參考:

[……]

閱讀更多

jQuery & CSS easings 過渡動畫緩動函式-速查表

介紹 jQuery & CSS 動畫緩動函式,有列表出所有函式及其呈現出的波形,還有展示他的作動方式,另外還有使用說明,一目了然。[……]

閱讀更多

MIS 各家網域域註冊商轉出

網域轉入或註冊後60日內不能轉出

免人工驗證:

台灣網路資訊中心

https://rs.twnic.net.tw/transfer.html

Gandi 管地

https://wiki.gandi.net/zh-tw/domains/transfer/out

智邦

https://help.url.com.tw/form/OnLine_Application_9.html

需人工驗證:
亞太:

http://rs.aptg.com.tw/dns-12.php

捕夢網

http://www.pumo.com.tw/www/service/set_domain_01.jsp

中華電信

PChome

http://myname.pchome.com.tw/form/

 [……]

閱讀更多

CSS RWD 響應式 @media 及常用尺寸速查

Meta Viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

CSS @media 參考裝置尺寸:

/* 手機直 */
@media (max-width: 480px) {
}

/* 手機橫 */
@media (max-width: 767px) {
}

/* 平板 */
@media (min-width: 768px) and (max-width: 979px) {
}

/* 平板橫 */
@media (min-width: 980px) {
}

/* 桌機 小於1200 */
@media (max-width: 1139px) {
}

/* 桌機 大於 1200 */
@media (min-width: 1200px) {
}

/* 桌機 大於 1240 */
@media (min-width: 1240px) {
}

bootstrap 4 – RWD Layout

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

 [……]

閱讀更多