分類: 技術分享

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

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

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

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

 

 [……]

閱讀更多

解決 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

[……]

閱讀更多

jQuery 選擇器，替代萬用字元 模糊查找匹配元素

jQuery 選擇器中沒有所謂的「萬用字元(*)」，可以透過依些方式接近模糊查找元素或值的目的

歸納出幾種用法

下表屬性名稱不一定為Class，可以替換成需要的屬性
單引號可有可無

[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值[class!=’test’]元素屬性不包含指定的值

使用範例：

Demo Download 範例下載：

[……]

閱讀更多

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>

參考：

[……]

閱讀更多

PHP 解決 Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in

解決方法一：

停用PHP顯示錯誤訊息

這絕對不是個好方法，我個人是不推薦使用，雖然這方法一勞永逸，但在開發PHP時，你將會知道錯誤訊息有多麼美好，Debug時才不會像無頭蒼蠅般，除非程式已經在一個很穩定的階段，不然非必要，不要關閉全部錯誤訊息，還是留給程式可以去設定是否顯示錯誤訊息的彈性。
以下介紹幾種PHP停用錯誤訊息的方法：

在PHP文件中加入，停用PHP錯誤訊息

如果還是出現錯誤訊息，請試下列方法

在.htaccess檔案中加入下面這一行 ( Apache專用 )

如果還是出現錯誤訊息，請試下列方法

在 PHP.ini 中找到 display_errors 這一行，沒這一行則添加，將值改為off。

解決方法二：

PHP排除特定錯誤層級

如果短期間沒打算繼續升級的話，還是可以在PHP5.5 使用 mysqli_connect() ，但停用所有錯誤訊息好像又太極端，下面這方法可以設定錯誤訊息級別，隱藏某些特定的錯誤級別，選擇排除顯示某指定錯誤級別，排除的錯誤級別將不會顯示在錯誤訊息上，排除E_DEPRECATED，mysql_connect()就可以繼續撐拉。

以下例子顯示所有錯誤，除了下列這幾個錯誤級別：

E_DEPRECATED棄用E_NOTICE注意E_WARNING警告E_STRICT嚴格

解決方法三：

mysql_connect 改用 mysqli_connect()

這是最正規的方式拉，也是最推薦的，就是乖乖升級吧，雖然升級的過程中會有一段陣痛，有點痛，以下提供很簡單的範例。

mysqli_connect() 範例如下

mysqli_connect() 建表SQL如下

[……]

閱讀更多

PHP Deprecated: Function set_magic_quotes_runtime() is deprecated 解決方法

set_magic_quotes_runtime()於 PHP5.3後棄用

在 PHP.net 官方文件中有提到，set_magic_quotes_runtime()於PHP5.3已經棄用，雖然不會造成Fatal error而中斷程式，但會發送E_DEPRECATED的過時警告

Deprecated: Function set_magic_quotes_runtime() is deprecated

替代方案：

set_magic_quotes_runtime(0);

意思同上，以下列方法替代棄用的set_magic_quotes_runtime()

ini_set("magic_quotes_runtime", 0);
這一段主要是修改 php.ini 中 magic_quotes_runtime 參數
用以將SQL語句自動加上跳脫字元反斜線，以防止SQL注入隱碼攻擊(SQL injection)

PHP 5.4起，使用此函數會拋出Fatal error，終止程式運行

Fatal error: Uncaught Error: Call to undefined function set_magic_quotes_runtime()

相容性：

有時在寫PHP並不一定確定針對某一版本去寫，另外目標主機環境百百款，PHP版本也很不固定，每次要針對版本再改就會很麻煩，我覺得相容性就變得很重要，解決方法如下：

把舊版本程式有使用到

set_magic_quotes_runtime(0);

都改為就可以了

ini_set("magic_quotes_runtime", 0);
另外在前面加上@，加上@的意思就是強制不拋錯誤訊息，如下
@set_magic_quotes_runtime(0);
不過我覺得還是不要使用@強制不拋錯誤訊息的作法，
因為有很多時候Debug還是需要錯誤訊息，
當然還有其他方法，其他方法可參考官網文件，

參考資料：

[……]

閱讀更多

語系代碼速查 例：zh-tw , en , zh-cn , zh-hk ….等

各國語言代碼表：

南非語 af
阿爾巴尼亞語 sq
阿拉伯語 - 阿拉伯聯合大公國   ar-ae
阿拉伯語 - 巴林 ar-bh
阿拉伯語 - 阿爾及利亞 ar-dz
阿拉伯語 - 埃及 ar-eg
阿拉伯語 - 伊拉克 ar-iq
阿拉伯語 - 約旦 ar-jo
阿拉伯語 - 科威特 ar-kw
阿拉伯語 - 黎巴嫩 ar-lb
阿拉伯語 - 利比亞 ar-ly
阿拉伯語 - 摩洛哥 ar-ma
阿拉伯語 - 阿曼 ar-om
阿拉伯語 - 卡達 ar-qa
阿拉伯語 - 沙烏地阿拉伯 ar-sa
阿拉伯語 - 敘利亞 ar-sy
阿拉伯語 - 突尼西亞 ar-tn
阿拉伯語 - 葉門 ar-ye
巴斯克語 eu
白俄羅斯語 be
保加利亞語 bg
加泰隆尼亞語 ca
中文 zh
中文 - 中國大陸 zh-cn
中文 - 香港 zh-hk
中文 - 新加坡 zh-sg
中文 - 臺灣 zh-tw
克羅埃西亞語 hr
捷克語 cs
丹麥語 da
荷蘭語 nl
荷蘭語 - 比利時 nl-be
英語 en
英語 - 澳大利亞 en-au
英語 - 貝里茲 en-bz
英語 - 加拿大 en-ca
英語 - 愛爾蘭 en-ie
英語 - 牙買加 en-jm
英語 - 紐西蘭 en-nz
英語 - 南非 en-za
英語 - 千里達 en-tt
英語 - 大英國協 en-gb
英語 - 美國 en-us
愛沙尼亞語 et
波斯語 (Farsi) fa
芬蘭語 fi
法羅群島語 fo
法語 - 標準 fr
法語 - 比利時 fr-be
法語 - 加拿大 fr-ca
法語 - 盧森堡 fr-lu
法語 - 瑞士 fr-ch
蓋爾語 - 蘇格蘭 gd
德語 - 標準 de
德語 - 奧地利 de-at
德語 - 列支敦斯登 de-li
德語 - 盧森堡 de-lu
德語 - 瑞士 de-ch
希臘語 el
語系說明 簡短字串
希伯來語 he
印地語 hi
匈牙利語 hu
冰島語 is
印尼語 in
義大利語 - 標準 it
義大利語 - 瑞士 it-ch
日語 ja
韓語 ko
拉脫維亞語 lv
立陶宛語 lt
馬其頓語 mk
馬來語 - 馬來西亞 ms
馬爾他語 mt
挪威語 - 布克莫爾語 no
波蘭語 pl
葡萄牙語 - 標準 pt
葡萄牙語 - 巴西 pt-br
利托 - 羅曼緒方言 rm
羅馬尼亞語 ro
羅馬尼亞語 - 摩爾達維亞 ro-mo
俄語 ru
俄語 - 摩爾達維亞 ru-mo
塞爾維亞語 - 斯拉夫 sr
波紮納語 tn
斯洛維尼亞語 sl
斯洛伐克語 sk
索布語 (Sorbian) sb
西班牙語 - 標準 es
西班牙語 - 阿根廷 es-ar
西班牙語 - 玻利維亞 es-bo
西班牙語 - 智利 es-cl
西班牙語 - 哥倫比亞 es-co
西班牙語 - 哥斯大黎加 es-cr
西班牙語 - 多明尼克共和國 es-do
西班牙語 - 厄瓜多 es-ec
西班牙語 - 瓜地馬拉 es-gt
西班牙語 - 宏都拉斯 es-hn
西班牙語 - 墨西哥 es-mx
西班牙語 - 尼加拉瓜 es-ni
西班牙語 - 巴拿馬 es-pa
西班牙語 - 秘魯 es-pe
西班牙語 - 波多黎各 es-pr
西班牙語 - 巴拉圭 es-py
西班牙語 - 薩爾瓦多 es-sv
西班牙語 - 烏拉圭 es-uy
西班牙語 - 委內瑞拉 es-ve
蘇圖語 (Sutu) sx
瑞典語 sv
瑞典語 - 芬蘭 sv-fi
泰語 th
土耳其語 tr
聰加語 ts
烏克蘭語 uk
烏爾都語 - 巴基斯坦 ur
越南語 vi
科薩語 xh
意第緒語 ji
祖魯語 zu

[……]

閱讀更多

CKEditor4 自動清除內容標籤問題的解決方法

CKEditor4 自動清除內容標籤

在CKEditor中我們經由配置檔Config.js，可以依照自己的需求去自定編輯器的工具
如下圖的每一個小方塊，可依需求增加減少：

但在 CKEditor 中 CKEDITOR.editor.filter 會過濾掉一些沒開放功能的內容或程式碼

舉例來說：

上面這編輯器並沒有開放 iframe 這功能，但倘若我想要貼上 youtube 分享的嵌入HTML碼，而 youtube 的 HTML 就是由 <iframe> 方式嵌入的，youtube嵌入的Code如下：

<iframe width="560" height="315" src="//www.youtube.com/embed/9ATcxIOeDiY" frameborder="0" allowfullscreen></iframe>

我們開啟原始碼的編輯模式，貼上這一段code，做嵌入影片的動作後，在切換回所見即所得編輯方式的同時CKEDITOR.editor.filter就會過濾掉一些沒開放功能的內容，如上圖沒開放的iframe工具，如此我們因為沒有開放iframe工具就沒有辦法貼入youtube的iframe嵌入碼，其實這很合理，某些時候是一種很棒的限制內容功能，不過有些時候這或許並不是我們想要的，我們可能希望可以在不提供iframe的工具下，僅能用原始碼貼上的方式貼入 youtube 的 iframe。

解決這問題 CKEditor 也提供了2個解決方法：

在 CKEditor 配置檔 Config.js 設定

方法一：

config.allowedContent=true;

把allowedContent設定為true就是吧CKEDITOR.editor.filter這功能關閉，不去過濾任何內容，這方式不只針對 iframe，而是所有不開放功能都不會再被過濾了，雖然很方便，但少了一層的限制或許會擔心安全性的問題，所以我們還有第二種方法可選擇。

方法二：

CKEDITOR.editor.filter仍然運作，但允許開放部份不支援功能

config.allowedContent=false;
config.extraAllowedContent='iframe';

便只允許iframe的操作，若允許的工具有多項就用空格分隔，如下

config.extraAllowedContent='b i iframe';

[……]

閱讀更多

CKEditor4 重要配置設定 config.js (中文)

簡單的介紹一下 CKEditor

CKEditor是一個非常強大的HTML編輯器，舊稱FCKeditor，是一個專門使用在網頁上屬於開放原始碼的所見即所得文字編輯器套件，2003年就開始累積很多用戶了，至今已經十年的時間了，我想很多開發人員對CKEditor這名字應該不陌生，CKEditor 主要優點而且相容於絕大部分的網頁瀏覽器，該有的功能全都有，也提供非常多的配置及API可以符合各種不同的開發需求，而且最重要的是免費的^^，除此之外官網上也提供了非常多相關的使用範例，還有非常詳細的開發文件可讓開發者更了解使用方式，但此篇文章主要不是介紹CKEditor，而是介紹CKEditor的基本配置Config檔的設定。

CKEditor4的設定有些地方好像跟之前板本不太一樣，那本文介紹的CKEditor4的這個版本，所以測試環境請以CKEditor4為準，CKEditor4可至官網下載，也可由下方連結下載。

CKEditor 相關資源

CKEditor 官方網站
http://ckeditor.com/

CKEditor 下載
http://ckeditor.com/download

CKEditor DEMO
http://ckeditor.com/demo

CKEditor 開發文件
http://docs.ckeditor.com/

CKEditor 開發文件 > config
http://docs.ckeditor.com/#!/api/CKEDITOR.config

重要配置說明如下，主要分為工具列、基本設定、選單設定三大部份~

工具列配置：

基本設定：

關於WORD文字設定

設定選單：

(註一)
解決方法詳見我的另一篇文章
CKEditor4 預設字體大小 fontSize_defaultLabel、預設字型 font_defaultLabel 無法運作的解決方案
http://vector888.blogspot.com/2013/08/ckeditor4-fontsizedefaultlabel.html

(註二)
config.allowedContent;
config.extraAllowedContent;
詳細介紹及用法，詳見我的另一篇文章
CKEditor4 自動清除內容標籤問題的解決方法
http://vector888.blogspot.com/2013/08/ckeditor4.html

[……]

閱讀更多