UI 彙整 - VECTOR COOL 威得數位行銷

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

2018-05-03 作者 ann71727

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

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

在 jQuery 中迴圈是用 $.each()，但使用 continue 及 b[……]

CSS Calc運算

2017-10-052017-10-05 作者 ann71727

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

支援運算：

+
加

–
減

*[……]

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

2017-09-122017-09-12 作者 ann71727

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

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

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

2018-08-052017-09-11 作者 ann71727

Meta Viewport

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

1	<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) {
}

/* 手機直 */

@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

[crayon-5[……]

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

2017-10-062017-07-31 作者 ann71727

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

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

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

/**

* VECTOR COOL

* https://vector.cool

var attr = $(this).attr(‘name’);

if (attr && attr !== false) {

// Element has this attribute

}

SVG 圖片無法顯示

2017-10-062017-03-10 作者 ann71727

試試看下面加這兩行在 .htaccess 文件中

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

1 2	AddType image/svg+xml svg svgz AddEncoding gzip svgz

jQuery Form data to Object

2017-07-302016-11-07 作者 ann71727

jQuery Serialize Object

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

Form data to Object jQuery

Github：https://github.com/macek/jquery-serialize-object

Example：

[[……]

Drop and drag

2016-08-21 作者 ann71727

Drag and drop so simple it hurts
https://github.com/bevacqua/dragula

angular-drag-and-drop-lists
http://marceljuenemann.github.io/angular-drag-and-drop-l[……]

網頁前端 framework 整理

2016-08-21 作者 ann71727

Bootstrap 4 alphahttp://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

bootstrap 3 v3.3.7
http://getbootstrap.com/

bootstrap 3 v3.3.1 (中文)
https://[……]

CSS li float:center 實現li水平居中對齊

2017-10-062015-05-27 作者 ann71727

在切網頁版的時候，常常需要用到選單水平居中，雖然用<a>標籤很方便，在父容器下text-align center，就可達成上圖編排，但有時候HTML並不是由設計師自己開的，很多清單功能的在HTML上都會用<ul><li>方式呈現，例如頁碼，這是一個普遍慣用的作[……]