開發管理者控制面板樣式Xoops模組

第一次開發管理者控制面板樣式的Xoops模組,因為使用開源的AdminLTE樣板,省去不少前端布局的時間,可以把時間拿來處理各項統計資料的分析及產出,雖然只是一個實驗性質的模組,如果資料量夠大甚至提升到Xoops系統層次,感覺會蠻有趣的~

廣告

Grav – 無資料庫、快速、易上手的CMS

Grav 是一個開源flat-file內容管理系統,使用PHP、YAML、TWIG、Markdown等技術架構而成,不需要安裝程序,只要將下載的檔案解壓縮即可運作,假設下載的是包含後台管理套件的壓縮檔,會提示建立管理者帳號,便擁有豐富美觀的後台管理界面(支援繁體),非常適合快速架構個人或中小型網站,官方提供不少免費網站骨架、佈景及數量可觀的外掛套件。

Link:https://getgrav.org/
Github:https://github.com/getgrav/grav

Layui – 來自對岸的前端框架

之前在尋找彈出視窗資源時,找到了Layer,功能完整、使用簡易、兼容性廣,後來又推出mobile版,同樣強大,我使用Framework7架構移動裝置頁面時,官方推薦的toast,雖然輕巧但功能單一,而layer mobile版不但輕巧功能更為多樣化!!

後來發現開發者又發表了Layui前端框架,實在厲害,雖然組件數不算多,但是在開發上應該足以支撐,之後如有機會或許可以嘗試使用這個框架開發~

Link:http://www.layui.com/
Github:https://github.com/sentsin/layui/

修改 jQuery-Validation-Engine Tooltip 樣式

修改前
jQuery-Validation-Engine-Tooltip-before
修改後
jQuery-Validation-Engine-Tooltip-after

加入以下CSS設定

  .formError {
      opacity: 0.78!important;
  }

  .formError .formErrorContent {
      width: 100%;
      margin-left: -40px;
      background-color: #ee0101;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      border-radius: 4px;
      box-shadow: 1px 1px 2px #999;
      border-style: none;
      min-width: 110px;
      line-height: 1.5em;
      margin-bottom: 5px;
      font-size: 11px;
      position: relative;
  }

  .formError .formErrorContent::after {
      content: " ";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #ee0101 transparent transparent transparent;
  }

  .formErrorArrow {
    display: none;
  }

Github:https://github.com/posabsolute/jQuery-Validation-Engine

HTML5 Mobile UI Framework

提到mobile framework,不得不問jQuery Mobile發生什麼事?發布1.4.5版已經是去年10月的事,整整1年多未有新版本發表,官方Blog也沒更新,在GitHub上的專案活動也沒有什麼進展,感覺jQuery Mobile似乎已準備被埋葬…
(補充:2016/1/28官網Blog回應遲未更新的原因http://blog.jquerymobile.com/2016/01/28/a-long-overdue-status-update/,不過重心似乎放在jQuery UI的開發上…)
jQuery Mobile承襲jQuery跨平台跨瀏覽器的優點,但是過於笨重以及效能問題卻是致命傷,手機上廣泛被應用的無限滾動及上下拉更新至今仍沒有較好的解決方法(plugin),外加更多plugin只會讓框架更笨重效能更差,因此找到幾個不錯的mobile framework在這裡紀錄一下~

1.Framework7

iDangero的產品,如果沒聽過Framework7,那麼對iDangero另外出品的swiper.js應該不會陌生,Framework7 UI操作非常滑順,除了含括ios特有功能,並提供ios及material介面,不需jQuery但也是最可惜的地方,他有自己的一套 DOM函式庫,很像精簡的jQuery,但實際使用起來還是不一樣,得花時間處理這些未知的坑。
(補充:最近使用Framework7跟SUI Mobile各完成了一個專案,SUI Mobile已有一段時間未更新,比較致命的缺點是當使用者在私密瀏覽/無痕模式時,router會失效,而Framework7則新增了不少元件,功能已接近完整,雖然採用自己的一套DOM函式庫,但是要和jQuery混用也是沒問題的,Framework7容易上手,官網文檔跟範例詳盡,而且具備JQM沒有的滑動圖片、滑動切換tab、下拉更新、無限滾動、圖片瀏覽器、lazy load等元件,切換畫面流暢不抖動,是一套蠻值得採用的框架,另外,Framework7沒有內建icon(僅2個),Ionicons是個不錯的選擇V1.5.0開始提供ios風格256種以及material風格932種icon。)

Link:http://www.idangero.us/framework7/
Github:https://github.com/nolimits4web/Framework7

2.MUI

Dcloud的產品,和ios原生UI幾乎無異,功能非常完整,與Dcloud的編程工具HBuilder結合使用,便可以直接產出APP,補足了phonegap(Cordova)缺乏的部份,可惜的是,因為需要直接使用webview,無法利用桌機瀏覽器預覽開發,但是如果前提是要直接做手機應用,那麼我覺得HBuilder+MUI非常棒。

Link:http://dev.dcloud.net.cn/mui/
Github:https://github.com/dcloudio/mui

3.SUI Mobile

阿里巴巴前端團隊的產品,基於Framework7為型態基礎,並使用zepto.js為函式庫,有Framework7的UI優點並改用相對輕量的函式庫,對於熟悉jQuery的開發者非常有利,我認為這樣的解決方案很好,並且在桌機瀏覽器開發也完全沒有問題,這個框架還很年輕,有發展潛能,值得期待。

Link:http://m.sui.taobao.org/
Github:https://github.com/sdc-alibaba/SUI-Mobile

Jssor 全能的幻燈片JS程式庫

網路上優秀的slideshow程式庫非常多,不過像Jssor這般全能的卻非常少,不需要搭配其他JS庫、可上下左右滑動、各種Caption效果顯示、小縮圖顯示、長條形滾動、可自動適應版面大小、支援滑鼠跟手指滑動、豐富的轉場效果、廣泛支援各式瀏覽器(ie6+)、多種skin可選擇…不勝枚舉,重點還是「免費」的,佛心來著!!

網址:http://jssor.com/
GitHub:https://github.com/jssor/slider

php.js讓Javascript也能使用PHP函數

php過濾HTML標籤時可以使用strip_tags這個函數,十分方便,移到前端用Javascript來處理時,想說是不是也有制式的函數來處理,找到了php.js,真的有人把php的函數用javascript來實現,做成了一個函式庫,像是strtotime、md5、strftime、number_format、date這些函數都有,實在太有趣了^^

網址:http://phpjs.org
GitHub:https://github.com/kvz/phpjs

改為Google Calendar API V3後如何同步行事曆

上一篇文章可以順利解決前端利用fullcalendar讀取google calendar的內容

現在要解決後端新增、修改、刪除事件的問題

因為先前使用Zend Framework v1 ZendGdata來操作

但現在已無法通過Google OAuth2

在stackoverflow找到解決方法

網址:http://stackoverflow.com/questions/27011264/authentification-zend-gdata-403-forbidden/27034888#27034888

重點在另一篇取得Refresh Token教學文章

網址:http://cornempire.net/2012/01/08/part-2-oauth2-and-configuring-your-application-with-google/

順利取得Refresh Token後即可利用第一個連結網址stackoverflow的方法操作google calendar

另外要注意的是stackoverflow中的這個class並沒有全日事件

而且新增事件時要取得事件的ID存入資料庫以便後續的修改及刪除