第一次安裝你的 Symfony Demo 專案教學

Written by Simon Asika on


UIKit ,媲美 Bootstrap 的強大前端框架

Written by Simon Asika on

p2013-07-23-15.jpg

UIKit 是一套全新的前端框架,建立在 Normalize.css 之上,相較於 Yahoo Pure 專注在純 CSS 框架,UIKit 則專注在成為 Bootstrap 的加強版。他是由 Joomla! 知名佈景設計商 YOOTheme 所開發的,也是內置在他們最新的模版引擎 Warp7 中的標準框架。

為了要能夠與 Joomla!3 內建的 Bootstrap 樣式相容,UIKit 大多數的 Component 與 Bootstrap 非常接近,但更為簡潔,更為清爽,功能也更加強大。例如 Bootstrap 所沒有的垂直置中,或是三四倍以上數量能縮放大小的的Icon等等。

值得一提的是,UIKit本身提供三組風格: Default, Almost-Flat 與 Gradient,分別是原始純扁平化設計半扁平化設計(比較類似 Google 風格)以及漸層立體風格。也有一套強大的Customizer頁面可以協助您創建自己的風格。若您還向更進一步的訂製 class 字首或顏色等等複雜設定,還可以從 Github 上下載原始檔案,並用 customizer.json 進行配置,最後重新 build 成自己的 UIKit。

Customizer

p2013-07-28-1.jpg

不過也有些美中不足的缺點,例如各元素的顏色不像 Bootstrap 有六七種那麼豐富,UIKit 只有紅綠藍白四種顏色,單調了些,但命名與 Bootstrap 是差不多的(更新: 1.0.1 以後也加上了Warning的黃色)。而 UIKit 的 class 皆以 uk- 開頭,且語意化的名稱較長,例如 uk-medium-width-1-2,看久了會覺得很累,優點是不容易與其他框架起衝突。

官網: http://www.getuikit.com/


在 Ubuntu 中快速升級 PHP 至 5.4, 5.5

Written by Simon Asika on

首先,在正常的狀況下執行:

$ sudo apt-get install lamp-server^

安裝全套 LAMP Server。


Joomla! 內容管理系統簡介

Written by Simon Asika on

joomla.jpg

Joomla! 是一套世界著名,並得過許多獎項的 CMS 內容管理系統 (content management system),可以用來搭建商業網站、個人部落格、資訊管理系統、Web 服務等,還可以進行二次開發以擴充其功能。

在許多方面來說,Joomla! 是非常易用且高彈性的系統,使得他成為目前全球最多人使用的網站建置軟體之一。在這麼強大的功能之下,他卻是一套自由的開源軟體,任何人隨時都能下載 Joomla! 並立即使用它。


用 mootools 寫 Javascript 的鍵盤快速鍵功能

Written by Simon Asika on

hotkey.jpg

當我們在寫工具系統時,與一般Web網站最大的差異在於,這是一種專家系統,需要較高的操作效率,因此採用鍵盤操作取代滑鼠會是更好的選擇。

在以往,運用 Javascript 寫鍵盤操作功能時,我們需要很麻煩的去記錄每個鍵盤按鍵的編號,例如 enter 是 13 ,Tab 鍵是 9 ,然後再用 event.keyCode 來判斷,例如:

function (event) {
    if( event.keyCode == 13 ) {
        // Enter pressed
        // Do something
    }
}

即便最方便的 jQuery 也是用類似的方法來判別按鍵:

$('#input').on('keydown',function(event){
    console.log(event.which) // 等於 event.keycode
}

不過如果我們用的是 moootools 就方便多啦。


jQuery Chosen 避免中文搜尋時,按下 Enter 立刻就完成的狀況

Written by Simon Asika on

jQuery Chosen 很好用,尤其是清單過長時的搜尋功能。

不過中文輸入時會有個問題(最起碼Mac會),當我們輸入完一個中文字並出現要選擇的欄位時,此時輸入法會停留在可選字狀態,一旦我按下 Enter 想要確認選字,Chosen 會偵測到 Enter 鍵,因此就自動選了第一個項目。

130614-0002.jpg

解決方法很簡單,我們在搜尋時,別讓 Chosen 自動高亮搜尋出來的第一個項目,這樣當按下 Enter 時,Chosen 就不會有任何動作,我們可以開開心心的選字,然後再用方向鍵選擇想要的項目。

修改方法如下,大概在 993 行左右,把這一段程式碼:

函式名稱:winnow_results_set_highlight

Chosen.prototype.winnow_results_set_highlight = function() {
  var do_high, selected_results;
  if (!this.result_highlight) {
    selected_results = !this.is_multiple ? this.search_results.find(".result-selected.active-result") : [];
    do_high = selected_results.length ? selected_results.first() : this.search_results.find(".active-result").first();
    if (do_high != null) {
      return this.result_do_highlight(do_high);
    }
  }
};

改成

Chosen.prototype.winnow_results_set_highlight = function() {
  var do_high, selected_results;
  if (!this.result_highlight) {
    selected_results = !this.is_multiple ? this.search_results.find(".result-selected.active-result") : [];
    do_high = selected_results.length ? selected_results.first() : null;
    if (do_high != null) {
      return this.result_do_highlight(do_high);
    }
  }
};

即可。


2018.01.11 更新

改用 keyup 事件來偵測會更有效,首先要理解,注音輸入法的 Enter 選字時,只會觸發 keyup 事件,不會觸發 keydown 事件。偏偏 Chosen 是用 keyup 來選擇搜尋結果的,因此按下選字時自然就會觸發選擇結果的功能。我們只要把選擇結果的事件移動到 keydown 即可。

chosen.js 內,你可以用 13 來搜尋 (Enter 的編碼),有兩處使用到這個編碼。首先 433 行是 keyup 事件:

case 13:
  evt.preventDefault();
  if (this.results_showing) {
    return this.result_select(evt);
  }
  break;

註解掉 this.result_select(evt)

case 13:
  evt.preventDefault();
  if (this.results_showing) {
    // return this.result_select(evt);
  }
  break;

接著 1186 行是 keydown 事件:

case 13:
  if (this.results_showing) {
    evt.preventDefault();
  }
  break;

加上 this.result_select(evt)

case 13:
  if (this.results_showing) {
    evt.preventDefault();

    return this.result_select(evt);
  }
  break;

現在你可以正常的選字,然後再選擇搜尋結果了,按兩次 Enter 不會有問題。


關於我

Written by Simon Asika on

我是學生
我是SOHO

我是設計師
我是網頁工程師

我是資訊架構者
我是行銷企畫師

我是部落客
我是社群經理

我是社工大學生
我是圖資研究生

我是熱音社員
我是國標舞者

我是導演
我是編劇

我是電影人
我是動畫人

我是插畫家
我是藝術家

我是飛鳥 Asika

除此之外,我還能做些什麼?我也還在思考。

About Me


簡易 Joomla! 佈景設計教學

Written by Simon Asika on

這篇是從2012/02/12的I Love Joomla!聚會上擷取出來的,並非正式教學,但有一些HTML&CSS底子的人應該可以看的懂如何使用


Joomla! Module 模組開發範本

Written by Simon Asika on

基本上Joomla!模組都是放在 modules/mod_example 之下,最少僅需三個檔案,分別是:

  • modules/mod_example/mod_example.php
  • modules/mod_example/mod_example.xml
  • modules/mod_example/tmpl/default.php

不過大多數模組會再加上一個helper來撈取資料庫。


啟動 Ubuntu 下的 Apache mod rewrite 與相關設定

Written by Simon Asika on

一般來說安裝完 Ubuntu 與 LAMP Server 後,Apache mod_rewrite 預設是沒有啟動的,若我們要啟動它,需要依照以下方法來設定。

首先輸入指令啟動rewrite mod

# sudo a2enmod rewrite

或是用自定link的方式來啟動

# sudo ln -s /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled/rewrite.load

Control Tools

WS-logo