jQuery 並沒有 .hasAttr() 用於判斷某一屬性是否存在，所以透過下面代碼來檢查
此代碼優點在於可檢查屬性是否存在，並檢查是否為空值
/**
* VECTOR COOL
* https://vector.cool
*/
var attr = $(this).attr(‘name’);
if (attr && attr !== false) {
// Element has this attribute
}
[……]
標籤: 網站前端
SVG 圖片無法顯示
Chrome console log show time
Settings > Consle > Show timestamps
http://stackoverflow.com/questions/12008120/console-log-timestamps-in-chrome[……]
Drop and drag
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-lists/
GRIDSTACK.JS
http://troolee.github.io/gridstack.js/[……]
網頁前端 framework 整理
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://kkbruce.tw/bs3/
Foundation for Sites 6
http://foundation.zurb.com/
Google Material design
Polymer Paper Elements Paper elements
https://elements.polymer-project.org/
https://elements.polymer-project.org/
Material Design Lite
https://getmdl.io/
Materialize
http://materializecss.com/
Angular Material
https://material.angularjs.org
Material-UI
http://www.material-ui.com/
[……]
解決 WordPress 無法使用 jQuery 問題
設計WordPress主題或插件開發時，常會需要使用jQuery，WordPress其實很貼心的已經載入jQuery，但實際使用時發現，原本可以跑的jQuery程式，放進WordPress卻不能跑了，才知道原來WordPress的jQuery要這樣寫。
WordPress 頁面中，確實看到 jQuery 已載入
<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script> <script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
頁面中加入一段測試碼
<script>
$( document ).ready(function() {
alert("hello");
});
</script>理論上應該是會順利看到 hello 對話框，但是沒有
解決方法：
主要是jQuery寫法的問題，選擇器不能使用習慣的簡碼 $ 符號，而要用下面這兩種寫法，
順利看到hello 對話框
jQuery( document ).ready( function( $ ) {
alert("hello");
} );或
( function( $ ){
alert("hello");
} )( jQuery );本文出自：https://v123.tw
[……]
CSS li float:center 實現li水平居中對齊
2020/03/12 更新發現更簡單的方法，請參考這篇文章https://vector.cool/css-ul-li-horizontal-align-center-only-css/
在切網頁版的時候，常常需要用到選單水平居中，雖然用<a>標籤很方便，在父容器下text-align center，就可達成上圖編排，但有時候HTML並不是由設計師自己開的，很多清單功能的在HTML上都會用<ul><li>方式呈現，例如頁碼，這是一個普遍慣用的作法，工程師一目了然。
但前端設計師套CSS時卻會遇到無法居中對齊問題，可以向左對齊，可以向右對齊，就是不能水平居中對齊，所以本篇提供一個解決方法，可以順利向上圖一樣，項目居中對齊。
HTML：
<div class="main-container"> <div class="fixer-container"> <ul class="list-of-floating-elements"> <li class="floated">Floated element</li> <li class="floated">Floated element</li> <li class="floated">Floated element</li> </ul> </div> </div>
CSS：
<style>
ul li{
float:left;
margin:0 20px
}
.main-container {
float:left;
position:relative;
left:50%;
}
.fixer-container {
float:left;
position:relative;
left:-50%;
}
</style>參考：
[……]