IE10 取代 ieTester 測試ie各版本相容性問題

相信大家在做前端開發的時候,應該都有用過ieTester來測試萬惡的ie吧,
不過透過ieTester秀出來的網頁,跟實際在ie中呈現有時候也會有不太一樣的現象產生,
在 ie10 中其實就內件有測試 ie 相容性的工具「開發人員工具」,供開發人員使用,

不僅如此「開發人員工具」還有很多功能,但此篇不多做介紹。

1.開啟「開發人員工具」,在ie中按F12就可呼叫出「開發人員工具」面版(下圖)。
2.選左側黑條的紅框處,切換模擬功能面版。
3.選擇「模式」,在這裡的模式,其實就是代表ie各版本。
4.選取您要測試的版本,就會用您選定的ie版本進行測試。

^^^^
非常簡單,也不用再另外安裝ieTester囉^^

 [……]

閱讀更多

PHP 以 Curl 傳遞 POST 資料,並取得回傳值

Curl 傳遞 POST 資料,並取得回傳值

/**
* VECTOR COOL
* https://vector.cool
*/
//用curl傳post並取回傳值
//一定要傳絕對路徑
function curl_post($url,$post)
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST,true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST,'POST');
curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
$result = curl_exec($ch);
curl_close ($ch);
return $result;
}

使用範例:

/**
* VECTOR COOL
* https://vector.cool
*/
$url='http://tw.yahoo.com';
$post_value= array(
'name' => 'JACK',
'age' => '20',
'phone' => '0968123456',
'address' => '台灣'
);

echo curl_post($url,$post_value);

 [……]

閱讀更多

PHP 時間運算 日期或時間加減

字串格式的日期時間轉成Time

‘2015-03-04 12:03:25’這就是字串格式的日期時間,都要先轉為time加以運算,運算完成再用date()去格式化日期。
例如資料庫dateTime時間格式或timestamep時間格式,需先轉成time才有辦法做運算
/*
	https://vector.cool
*/
$time = strtotime('2015-03-04 12:03:25');
//output : 1425441805

以下提供三種方法進行日期時間加減運算

一、慢慢算

/*
	https://vector.cool
*/
date_default_timezone_set("Asia/Taipei");
$next_Month = 30*24*60*60;//30天*24小時*60分*60秒
echo date('Y-m-d',strtotime('2015-03-04 12:03:25')+$next_Month);

二、使用 mktime()

/*
	https://vector.cool
*/
date_default_timezone_set("Asia/Taipei");
$date=date("Y-m-d",mktime(hr,min,sec,mon,day,year))

//例如:今天再加5天
date("y-m-d",mktime(0,0,0,date("m"),(date("d")+5),date("y")))

Reference:http://php.net/manual/zh/function.mktime.php

三、使用 strtotime()

strtotime()這東西比我想像聰明多了耶

/*
	https://vector.cool
*/
date_default_timezone_set("Asia/Taipei");
echo strtotime("now")."<br/>";
echo strtotime("10 September 2000")."<br/>";
echo strtotime("2020-09-29 +1 day")."<br/>";
echo strtotime("+1 day")."<br/>";
echo strtotime("+1 week")."<br/>";
echo strtotime("+1 week 2 days 4 hours 2 seconds")."<br/>";;
echo strtotime("next Thursday")."<br/>";
echo strtotime("last Monday")."<br/>";

Reference:http://php.net/manual/zh/function.strtotime.php

[……]

閱讀更多

語系代碼速查 例: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

[……]

閱讀更多

href=”javascript:void(0);” 設定無作用連結 – a 標籤 href 不作任何動作

有時候我們需要用a標籤去綁定一些Javascript or JQuery事件,不是真的要做為連結之用,但是a標籤又必需設定 href , 這時大部份人就會在href加#號,但其實加#號仍然是連結,等同換了另一頁,網址末端也會加上#號(如:http://www.aaa.com#),這並不是最理想的狀況,我們不希望它做任何動作,以下寫法a標籤緊會執行javascript的事件,除此之外不會有其他動作。我們也可以比較以下兩種寫法的差異。

javascript 寫在行內

<!-- A標籤還是有動作 -->
<a href="#" onclick="alert('hello')">沒有作用</a>

<!-- A標籤不會有任何動作 -->
<a href="javascript:void(0);" onclick="alert('hello')">沒有作用</a>

jQuery解法

html:

<a href="#">沒有作用</a>

jQuery

/**
* VECTOR COOL
* https://vector.cool
*/
$(document).ready(function(e) {
    $('a').click(function(e){
	e.preventDefault();
    });
});

 [……]

閱讀更多

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

[……]

閱讀更多